What is the Server-Side Rendering and how it works

Server-side rendering (SSR) is a technique for rendering web content on the server-side, i.e., before the page is sent to the client.

In this article, I will explore what server-side rendering is, how it works, and its benefits and drawbacks.

What is Server-Side Rendering?

In server-side rendering, the server generates the HTML for a page, which is then sent to the client. This is in contrast to client-side rendering, where the HTML is generated on the client-side, using JavaScript to render content in the browser.

With SSR, the server receives a request from the client and generates the HTML for the requested page. The resulting HTML is then sent to the client, which can display it in the browser.

Server-Side Rendering is also named Pre-Rendering (the same is true for the Static Site Generation — SSG) because the fetching of external data and transformation of components, content and data into HTML happens before the result is sent to the client.

Server-Side Rendering schema

How Does Server-Side Rendering Work?

Let’s take a much deeper look at how server-side rendering works.

1. A user requests a page from a server: this could be a direct request to the server or a click on a link that triggers a request.
2. The server receives the request and uses a server-side rendering engine to generate the HTML for the requested page: this rendering engine uses a templating language to create a template for the page.
3. The server-side rendering engine fills in the placeholders in the template with the appropriate data: this data could come from a database or an API.
4. The server sends the resulting HTML to the client, which can display it in the browser a static page, not fully interactive.
5. The client’s browser may also download any additional assets, such as CSS and JavaScript files, needed to render the page.
6. The browser executes the JavaScript and re-render the page when necessary, or it can attach events or other functionalities.
7. The client display the fully rendered and interactable page to the user.