SSR(Server-Side Rendering)

SSR a way to reduce the load time of the react application, normally react is a client-side application basically meaning the built .js file is first downloaded to the user’s browser before the rest of the page starts loading. This increases the initial load time, and some web crawlers are unable to index the site, this also makes SEO in react app a little bit harder. as the content is not directly visible on the source page.

Server-side rendering on the other hand, renders the React components on the server. The output is HTML content.

The Server-Side Rendering Process

how HTML is rendered on the server in response to navigation?

• The user opens their browser and requests to open the webpage.
• The server creates rendered content in a viewable HTML file and sends it to the user. The CSS is also displayed on the browser, but the page is not yet interactive.
• Meanwhile, the browser downloads the JavaScript of the page, which is readily available on the server.
• Once all the scripts are loaded, the react component is rendered again on the client. The only difference this time is that it hydrates the existing view instead of overwriting it.
• The user can now interact with the site and the different elements.
• The browser implements the JavaScript (Document Object Model or DOM is fully rendered).
• The page is now fully loaded and can respond to the interactions of the user journey.

What is Hydration in React?

Hydrating a view means that it attaches any event handlers to the rendered DOM elements but keeps the rendered DOM elements intact. This way, the state of your DOM elements is preserved and there is no view reset that happens.

Cons of Rendering React on the Server

• SSR can improve performance if your application is small. But it can also degrade performance if it is heavy.
• It increases response time (and it can be worse if the server is busy).
• It increases response size, which means the page takes longer to load.
• It increases the complexity of the application.

Pros of Rendering React on the Server

• Faster load time, as it loads the application content so the user is shown the application instead of the blank page
• Easy to Index, SSR sites is much easier for search engines than client-side rendered sites. The content is rendered before the page is loaded, so they don’t need to run JavaScript to read and index it.
• SSR is excellent for static webpages as it’s faster to pre-render a static (or unchanging) page on the server before sending it to the client.

Next.js is one of the framework used for creating server-side rendering applications.

If you’d like to be in the know, subscribe, clap, like and share. Cheers!