-
Notifications
You must be signed in to change notification settings - Fork 9
Server Side Rendering (SSR)
This project uses server side rendering of React components to deliver the initial HTML to the user.
There are a multitude of reasons to use server side rendering, but it mostly boils down to speed. It allows the application to deliver an initial HTML page to the user before the JavaScript is even fetched and/or parsed by the browser. Coupled with caching of initial data, the application can deliver an entire initial state for the React application to build from, instead of relying witing on async fetches to load the interactive data.
Other important notes are Search Engine Optimization (SEO), and how links to the application show the correct information.
For search engines to index the application in the best possible way, it is important to have as much information in the HTML as possible, without needing to run javascript to render it. This leads to better search engine scores and more correct indexing of the website.
When linking to the application we want there to be as much correct information as possible. Let us take linking to an event to a Facebook page as an example; In this situation, Facebook has to parse the linked website to find information about the correct page name, text and image to display. When linking to an event, it should find the event image, the event name, and event ingress. The parser reads through the HTML, not the rendered React app. It is therefore important to include such information in the initial HTML from the server.
The server app contains an Express application which runs in Nodejs. This app is compiled with its' own Webpack config and entry point. The server catches incoming requests and renders the React components just like a browser would, but outputs it as a string of HTML markup instead of rendering it to the DOM. The HTML markup is then sent to the client, where the browser 'rehydrates' the HTML into the virtual React DOM, and React takes over the rendering from there. It is just the initial HTML which is rendered by the server.
For there to be a point to server side rendering, as much as possible of the page should be in the initial HTML. This is quite hard to do, as you want the page to load fast, and without waiting for expensive API fetches to finish before the HTML is sent to the user.