Server-side rendering without Next.js, Remix, Nuxt.js, etc.

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 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:

1. Request: When a user requests a web page (by entering a URL or clicking a link), the request is sent to the web server.




2. 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.




3. 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.




4. Response: The server sends the fully rendered HTML page back to the client's browser.




5. 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:

Also, I will be glad if you support the project with your star. Thank you!

Star HMPL ☆