Our servers behave just like a browser, so it fetches the code that starts the rendering, and instead of showing the results to the user, it transfers it to you.
We do this for 2 main reasons:
- Web crawlers – without SSR you won't have your results in any Search engines
- Performance – we can render pages faster
But it's always the same code that's used for the SSR and for the rendering on the client.
To go into a bit more detail...
We generate the SSR HTML on the Server for every request that comes in with Accept-Header text/html, which is most-like the first “real” request from the Browser to our Server. We'll then return the pre-rendered HTML and the Application. React will then Hydrate these results and replace them with the local browser rendered versions.
If the SSR for some reason fails, we will still provide the Application and an HTTP Status Code 503 (so that Searchbots won’t take these results). The Application will then be initialized and React will take care of rendering the Components.
As we have a PWA all other requests will then be sent with Accept-Header application/JSON from the inside of the application and will therefore return just JSON which then re-renders the necessary parts.
Currently, we have no caching there in place but also do a full-cycle instead for the HTML Requests.
So, what we do in the Catwalk backend is that we sent the request result including the data and Tastic configuration to our SSR server, which is a small NodeJS application. And there we use 'react-dom/server' to render the HTML.
Also, translations would be available as we send the context we have to our SSR, which also includes the current locale the user uses on the Catwalk.
Updated 2 months ago