Server Side Rendering with JavaScript Frameworks
What is server side rendering?
Server-side rendering is the process to generate and rewrite or recompose HTML server-side, when a page is requested.
Mechanism and caching
While this process may be triggered by a server programmed job or task, server side rendered pages tend to be generated on the fly, that means, only when a page is requested, then cached.
This demands that caching headers, for example, invalidate a previous version on every request, or considering certain rules. For example, if the server gets a user token, it may regenerate some of the HTML using user specific data. This is called dynamic data fetching and there are multiple use-cases that will influence what mechanisms we choose to fetch data, if we want to do retrieve it and compute on the server-side or if we want to bootstrap part of the page on the client-side.
Hydration
But how do we make the page dynamic to respond to user interaction while keeping state consistent?
State may be transferred from the server-side to the client-side, during a JavaScript bootstrapping or initialization of the application process, known as hydration. This process comes with considerable performance overhead and additional execution of JavaScript, like replay.