Learning JavaScript Design Patterns, 2nd Edition

Chapter 13. Rendering Patterns

As we moved to more interactive websites, the number of events handled and the amount of content rendered on the client side grew, resulting in SPAs rendered primarily on the client, as in the case of React.js.

However, web pages can be as static or dynamic as the function they serve. We continue to serve a lot of static content on the web, for example, blog/news pages that you can generate on the server and push as-is to the clients. Static content is stateless, does not fire events, and does not need rehydration after rendering. Conversely, dynamic content (buttons, filters, search bar) has to be rewired to its events after rendering. The DOM has to be regenerated on the client side (virtual DOM). This regeneration, rehydration, and event handling functions contribute to the JavaScript sent to the client.

A Rendering pattern provides the ideal solution for rendering content for a given use case. The Rendering patterns in this table are popular:

Rendering patterns
Client-side rendering (CSR)	HTML is rendered completely on the client
Server-side rendering (SSR)	Dynamically rendering HTML content on the server before rehydrating it on the client
Static rendering	Building a static site to render pages on the server at build time
Incremental static generation	Being able to dynamically augment or modify a static site even after the initial build (Next.js ISR, Gatsby DSG)
Streaming SSR	Breaking down server-rendered content into smaller streamed ...