Hello everyone! Perhaps you want to implement server-side rendering in your project, but do not want to rework its established architecture? Then this article is especially for you. Today, I will try to tell you how to do this.
It is worth noting that this method is suitable for any web project architecture, be it WordPress, Vue.js, or any other.
Using HMPL
You can achieve server-side rendering by using this module. The connection is very simple and the usage is also:
<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>
or
npm i hmpl-js
Now, you can safely use the module in the project. Let's try to take some component from the server:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
</head>
<body>
<script>
document.body.append(
hmpl.compile(`<main>{{ src: "/api/header" }}</main>`)().response
);
</script>
</body>
</html>
Thanks to the extended markup of request objects, we can compile the string into a ready-made DOM node that can be easily rendered into the DOM.
The result will be as follows:
This way, our components are rendered on the server, and we simply display them on the client.
To better understand the process, let's move on to the theory.
How Server-Side Rendering Works
This list describes the Server-Side rendering process step by step:
Request: When a user requests a web page (by entering a URL or clicking a link), the request is sent to the web server.
Processing: The server processes the request. This often involves fetching data from a database, running business logic, and rendering the HTML based on this data. This can be done using server-side frameworks such as Node.js with Express, Django, Ruby on Rails, etc.
Generating HTML: The server creates the complete HTML for the requested page. This can be done using templating engines (like EJS, Handlebars, or Pug) or directly with server-side languages that build the HTML structure.
Response: The server sends the fully rendered HTML page back to the client's browser.
Rendering in Browser: The browser receives the HTML and renders it immediately, displaying the content to the user.
In the diagram, it looks like this:
Now, let's see what this looks like in code:
Here’s a simple example using Node.js with Express and EJS as the templating engine for SSR:
1. Set up Node.js with Express
First, you need to create a new Node.js project and install Express and EJS:
npm install express ejs
2. Create the Server
Create a file named server.js:
const express = require('express');
const app = express();
const PORT = 3000;
// Set EJS as the templating engine
app.set('view engine', 'ejs');
// Sample data
const data = {
title: 'Server Side Rendering Example',
content: 'This is an example of Server Side Rendering using Node.js and EJS.'
};
// Define a route
app.get('/', (req, res) => {
// Render the HTML using EJS
res.render('index', { data });
});
// Start the server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
3. Create the EJS Template
Create a folder named views, and inside it create a file named index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= data.title %></title>
</head>
<body>
<h1><%= data.title %></h1>
<p><%= data.content %></p>
</body>
</html>
4. Start the Server
Run the server:
node server.js
Now, when you navigate to http://localhost:3000, the server will render the complete HTML page and send it to the browser.
Conclusion
This method is great when you don't need to depend on the architecture of frameworks and libraries, but at the same time, because of this feature, since the page is requested from the client, search robots will not see the page. Therefore, this method is suitable when you don't need to think too much about SEO.
Also, I will be glad if you support the project with your star. Thank you!
Top comments (0)