✋ rendering patterns

Key terms

• SSR: Server-Side Rendering
• CSR: Client-Side Rendering
• SSG: Static Site Generation
• ISR: Incremental Static Regeneration
• SPA: Single Page Application
• MPA: Multi-Page Application
• hydration: the process of attaching JavaScript behavior to HTML elements
• rendering: the process of converting the code to html
• pre-rendering: the process of converting the code to html before it is sent to the client

Rendering

• rendering is converting the code to html => what
• rendering can be done partially or all at once => how
• rendering can take place on the server or on the browser => where
• it can happen at build time or at request time => when

hydration

• Making a static page interactive in the browser is called hydration
• With server-side rendering, the HTML of the page is generated on a server for each request. The generated HTML, JSON data, and JavaScript instructions to make the page interactive are then sent to the client. On the client, the HTML is used to show a fast non-interactive page, while React uses the JSON data and JavaScript instructions to make components interactive (for example, attaching event handlers to a button). This process is called hydration.
• In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. Because the HTML is pre-rendered on a server, this allows for a fast "first contentful paint" (when useful data is first displayed to the user), but there is a period of time afterward where the page appears to be fully loaded and interactive, but is not until the client-side JavaScript is executed and event handlers have been attached. Frameworks that use hydration include Next.js and Nuxt.js. React v16.0 introduced a "hydrate" function, which hydrates an element, in its API.

Client-Side Rendering (CSR)

• CSR is the approach in which the HTML file rendering is done in the user's browser
• the browser receives an empty HTML shell from the server along with the JavaScript instructions to construct the UI.
• the route creation and manipulation is being done in the browser

Single-page application (SPA)

• SPA is the type of web app that incorporates the CSR approach as its behavior.
• it is a web application where users can navigate between pages without having to make a server roundtrip

Pros

• the page is interactive directly after the initial page load
• smoother user experience
• less dependent on the server (less server roundtrips)
• dynamically update the content without a full page reloads
• good for interactivity
• SPAs have smoother transitions between pages and feel almost like a native app

Cons

• requires a large javascript bundle
• the initial page load is slow
• SEO is very bad

CSR Vs SPA

• CSR is the model under which SPAs operate.

Multi-page application (MPA)

• the html is rendered on the server
• the generated html is sent to the client

Server-side rendering (SSR)

• the HTML page is generated on a server at request time.
• The generated HTML, JSON data, and JavaScript instructions to make the page interactive are then sent to the client.
• happens at request time on the server
• hydrated on the browser

advantages

• good for SEO
• displaying the preview of the page that is being shared on social media platforms
• fast initial load

disadvantages

• the page is not interactive directly after the initial page load
• Slower time-to-interactive

SSR Vs MPA

Static Site Generation (SSG)

• the HTML page is generated once on the server at build time
• generated at build time
• Static Site Generation is like Server Side Rendering, with the exception that you render the pages at build time instead of request time. This means all pages will be generated into HTML and JavaScript files, and all calls to APIs will be pre-fetched and cached so that no calls to your API need to be made on client-side navigation.
• This fits best if you do not need a dynamic website - with no user-specific content, meaning every user sees the exact same thing: no login, no actions that allow sending input data to the server - everything is “read-only”.
• hydrate the html on the browser

Pros

• Just like server-side rendering, static-site generation is immediately available and doesn’t require any additional data fetches from the API.
• simple hosting
• good for SEO
• good for performance

Cons

• Build time would increase depending on the size of the application.
• no fresh data until your rebuild the website
• Data is only fetched once at build time, so retrieving data dynamically based on user input is not possible.

Incremental Static Regeneration (ISR)

• You can use Incremental Static Regeneration to create or update static pages after you’ve built your site. This means you do not have to rebuild your entire site if your data changes.

Why Server-Side Rendering and Static Site Generation are referred to as Pre-Rendering

Because the fetching of external data and transformation of React components into HTML happens before the result is sent to the client.

What happens in a standard react application

The browser receives an empty HTML shell from the server along with the JavaScript instructions to construct the UI.

Rendering paradigms

Static website

• no dynamic data
• create html files and serve them as they are
• suitable for basic websites

Incremental static regeneration

• the cache can be invalidated based on certain rules and the page will be automatically rebuilt

advantages

• rebuild page if stale

disadvantages

• complex to self-host

Partial hydration

• not yet

Island architecture

• not yet

Streaming SSR

not yet

Resumability

not yet

• no need for hydration

Resources

• https://youtu.be/Dkx5ydvtpCA?si=P6oDmimDOXNYmrD9
• https://www.wolfpack-digital.com/blogposts/spa-csr-ssr-ssg-demystifying-rendering-modes