Which RENDERING strategy should we take on the Web? 🤔

Background 

As a part of React migration, I want to know what benefits we can take from SSR and CSR.

 

Rendering

Server rendering: generates the full HTML for a page in the server. 

👍 A fast FP, FCP, and TTI
👍 Avoid waiting for CPU-bound JS processing time
👎 Generating pages on the server takes time, it results in a slower TTFB
👎 Client can't still avoid third-party JS processing time

 

Content-heavy sites like Netflix server-render static landing pages, while prefetching the JS for interaction-heavy pages.

 

Static rendering: produces a separate HTML file for each URL ahead of time.

👍 A fast FP, FCP, and TTI assuming the amount of client-side JS is limited
👍 A consistently fast TTFB
👎 Individual HTML files must be generated for every possible URL

 

Server Rendering vs Static Rendering

SSR produces HTML on-demand for each URL but can be slower than just serving static rendered content. But we still need SSR for serving more 'live' data. Then you might want SSR+HTML caching which can massively reduce server render time!

 

Client-Side Rendering: renders pages in the browser using JS.

👍 Good enough performance by keeping a tight JS budget, and delivering value in as few RTTs as possible
👎 Amount of JS required tends to grow as an application grows -> consider code-splitting and lazy-loading

 

Streaming server rendering and Progressive Rehydration

Streaming server rendering: allows you to send HTML in chunks that the browser can progressively render as it's received.

👍 A fast FP and FCP

Progressive rehydration: individual pieces of a server-rendered application are "booted up" over time.

👍 Reduce the amount of JS required to make pages interactive since client-side upgrading of low priority parts of the page can be deferred

Partial Rehydration

 

Conclusion

The contents and functionalities of every website are very different. Take a look at the pros and cons of each rendering and use the appropriate one for your website to get more customers!

 

Reference

https://developers.google.com/web/updates/2019/02/rendering-on-the-web