Introducing SSR
First, you have to understand the differences between using a server-side-rendered and a client-side-rendered application. There are numerous things to bear in mind when transforming a pure client-side-rendered application to support SSR. In our application, the current user flow begins with the client requesting a standard index.html
file. This file includes only a small number of things, such as a small body
object with one div
element, a head
tag with some very basic meta
tags, and a vital script
tag that downloads the bundled JavaScript file created by webpack. The server merely serves the index.html
and the bundle.js
files. Then, the client's browser begins processing the React markup that we wrote. When React has finished evaluating the code, we see the HTML of the application that we wanted to see. All CSS files or images are also downloaded from our server, but only when React has inserted the HTML into the browser's Document Object Model (DOM). During...