What is server-side rendering, used in react? explain

why do we use this in react? wasn’t react a frontend lib, thus, don’t need a server right? so, what is this server-side rendering really? and what is it’s importance here?

Server Side Rendering , also called SSR , is the ability of a React application to render on the server rather than in the browser.

Why would we ever want to do so?

  • it allows your site to have a faster first page load time, which is the key to a good user experience
  • it is essential for SEO: search engines cannot efficiently and correctly index applications that exclusively render client-side. Despite the latest improvements to indexing in Google, there are other search engines too, and Google is not perfect at it in any case. Also, Google favors sites with fast load times, and having to load client-side is not good for speed
  • it’s great when people share a page of your site on social media, as they can easily gather the metadata needed to nicely share the link (images, title, description…)

Without Server Side Rendering, all your server ships is an HTML page with no body, just some script tags that are then used by the browser to render the application.

Client-rendered apps are great at any subsequent user interaction after the first-page load. Server-Side Rendering allows us to get the sweet spot in the middle of client-rendered apps and backend-rendered apps: the page is generated server-side, but all interactions with the page once it’s been loaded are handled client-side.

However, Server Side Rendering has its drawback too:

  • it’s fair to say that a simple SSR proof of concept is simple, but the complexity of SSR can grow with the complexity of your application
  • rendering a big application server-side can be quite resource-intensive, and under heavy load, it could even provide a slower experience than client-side rendering, since you have a single bottleneck.

Server-Side rendering allows you to pre-render the initial state of your react components at the server side only. With SSR, the server’s response to the browser becomes only the HTML of the page which is now ready to be rendered. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page in spite of React still downloading the JavaScript, creating the virtual DOM, linking events, etc. at the back end.

Hope this image clears everything.

Thanks for sharing this image.