Server-Side Rendering

Recently we revamped our site from legacy monolith app to SPA using ReactJS. Server Side Rendering was one of our major considerations for the following reasons.

• SEO friendliness
• End user performance benefits

Before heading to the details of SSR, let’s understand how the normal SPA works in the browser.

How usual SPA renders (CSR)

In Client Side Rendered app the complete rendering takes place at the browser side. The initial request response from the server has the empty index file with links to the bundled code. On getting the response from the server, the browser will download the included scripts and other resource files from the server. The downloaded bundled JavaScript file will be executed which renders the app in the browser with meaningful content. A visual representation of the sequence is shown below.

The app needs to handle the download and execution delays by providing hints to users with appropriate imagery.

Why CSR is not SEO friendly

The search engines usually will crawl the pages and perform the ranking based on the SEO guidelines. Page needs to meet certain criteria such as page title, heading, meta tags, keywords etc. As plotted above the initial request response from CSR contains a plain HTML with some bundled code, which does not have any required title, heading, meta tags or keywords.

How SSR works differently

In Server Side Rendered app, the initial request response from the server will have the enough initial rendered HTML. It means we can ensure the page has all the SEO parameters ready when initial rendering occurs on the server itself. A visual representation of the rendering process is attached below.

Key things to keep in mind in SSR

• The mounting phase of the react lifecycle occurs on the server, hence the app should not use any browser specific code such as, use of window object or local storage in mounting phase of the component.
• If some user related information is required while mounting, then it has to be passed or stored in a server-side store such as a cookie.
• The page will become interactive only after downloading and executing the react app on the browser even though it is showing the initial page view rendered via the downloaded HTML. Any early actions during the load such as clicking a button, the action won’t be executed till the react app is ready.

What should be compromised in SSR

• Time to resolve the first response might be relatively slower as server spends cycles in rendering the HTML page content.
• Server throughput suffers slightly as the server spends execution cycles for the rendering