"Classic" Server-side rendering ¶
Back in the day, all sites were either static or used server-side rendering (SSR). In the case of SSR, the server used to render each page, while the client's job was to just passively show the HTML that it got from the backend.
Client-side rendering in Single Page Applications ¶
"Modern" SSR and Universal applications ¶
Disadvantages of Universal apps ¶
But this approach is not without its drawbacks. The process of re-rendering of the whole page after it's been already shown to the user, which is called "rehydration", presents us with two new issues:
- Data duplication. On the client we want to avoid sending requests for the same data that has been used by the backend to render the page, therefore this data is usually attached to the page by the backend in JSON format, so that client could parse it and use it right away. So, the same data is being transferred twice - in the form of rendered HTML and raw JSON data.
So to sum it up, usually, to show a page we need to:
- get data from some storage or API
- render the page's HTML using this data
- return the rendered HTML page
And in the case of universal apps there's also 4th step:
- Rehydrate the UI (re-render the page in the browser)
Static web sites are very performant because they allow us to skip steps 1, 2, and, of course, 4 altogether! Well, not skip, but do it beforehand and not at the time of the request. So if you want your sites to be blazing fast, go for static sites whenever it is possible.