score:2

when implementing server side rendering (ssr), the server knows how to generate a full page with markup so the user gets a fully rendered page and from that moment, when the js resources get downloaded, the application will be live (event listeners will be enabled, the react lifecycle will be active and so on).
suppose you have app component that is an entry point for you app, a general ssr implementation will:

  1. get a request for a specific path
  2. initiate a new store instance for the request
  3. in case of using react router (or other router solution), fill the state with the requested route
  4. render the app, but instead of rendering and mounting the app, render the app to string (with rendertostring)
  5. dehydrate the state - take the latest state snapshot and append it to the result (after escaping it and wrapping it with script tag for example)
  6. return the markup as a response. the markup can look similar to the following:
<html>
...
...
<body>
    ...
    <app markup>
    ...
    <script><window.state = {state snapshot}></script>
</body>
</html>
  1. the browser gets the html and renders it (before react), so the user already have something on the screen
  2. the browser downloads the app bundle
  3. the app bundle includes the app that initiate the state with the provided state snapshot (rehydrate)
  4. the app rendered into the dom, if done correctly, no actual dom rendering should happen since the result will be the same (app rendered according the same state as it was rendered in the server)
  5. from this point the app behaves regular. any route change doesn't trigger the ssr engine

there are several frameworks (next.js for example) that comes out of the box with ssr solution along with code splitting according to routes. so when the user change route, a new backend request triggers the ssr flow again for the new route.
ssr can be implemented in many different variations, but the basic stays the smame

hope this gives a good starting point for understanding ssr.


Related Query

More Query from same tag