React.js SSR

A beginner’s guide to React Server-Side Rendering (SSR)

In this lesson, we are going to talk about server-side rendering (SSR), its benefits, and its pitfalls. Then we will set up a mini React project and an express server (Node.js) to demonstrate how SSR can be achieved.

Uday Hiwarale
JsPoint
Published in
17 min readDec 7, 2020

--

(source: unsplash.com)

Almost every other website right now is a single page application (SPA). I am sure you know what a single page application is. Frameworks like Angular, React, Vue, Svelte, etc. are on the boom because of their ability to quickly and efficiently design SPAs. They are not only perfect for rapid prototyping but for designing complex web applications as well (if done right).

Until recently, for most websites, HTML was generated on the server and sent along with the response so that browser can render it on the screen. Whenever a user clicks on a link to access the new page, we used to send the server a new request to generate new HTML for that page. There is nothing wrong with this approach except for the loading time and the user experience.

The user had to wait for a few seconds until the server receives the request, gathers the data, compose the HTML, and returns the response. Since this was a…

--

--