Choosing the Right Rendering Technique: CSR vs. SSR vs. SSG vs. ISR Clarified

Let’s break down each term step by step:

CSR VS SSR VS SSG VS ISR

CSR (Client-Side Rendering):

Client-Side Rendering refers to the process of rendering web content on the client’s browser using JavaScript after receiving raw data from the server. Here’s a step-by-step explanation:

• Step 1: The browser sends a request to the server for a web page.
• Step 2: The server responds with a minimal HTML page, often called a “shell,” and a JavaScript bundle.
• Step 3: The JavaScript bundle executes on the client side, making additional requests to fetch data (often from an API).
• Step 4: Once the data is received, the JavaScript code generates the necessary HTML, modifies the DOM (Document Object Model), and renders the content on the page.
• Step 5: Any subsequent interactions or changes in the UI trigger JavaScript functions to update the DOM without requiring a full page reload.

SSR (Server-Side Rendering):

Server-Side Rendering involves rendering web content on the server and sending fully-rendered HTML to the client’s browser. Here’s the step-by-step explanation:

• Step 1: The browser sends a request to the server for a web page.
• Step 2: The server processes the request and executes server-side code to fetch data from APIs or databases.
• Step 3: The server generates a complete HTML page with the fetched data injected into it.
• Step 4: The server sends the fully-rendered HTML page to the browser.
• Step 5: The browser receives the HTML and displays the content immediately. Any additional interactivity might require client-side JavaScript.

SSG (Static Site Generation):

Static Site Generation is a technique where web pages are pre-built at build time and serve as static files. Here’s how it works step by step:

• Step 1: During the build process, the server generates HTML pages for each website route.
• Step 2: The server can fetch data from APIs or databases during the build process and embed this data into the generated HTML pages.
• Step 3: The fully rendered HTML pages are saved as static files on the server.
• Step 4: When a user requests a page, the pre-rendered HTML is immediately served, reducing the need for server-side rendering on each request.
• Step 5: Client-side JavaScript can add dynamic behaviour to the static content.

ISR (Incremental Static Regeneration):

Incremental Static Regeneration is an extension of SSG that allows specific pages to be re-rendered periodically without rebuilding the entire site. Here’s the step-by-step explanation:

• Step 1: Similarly to SSG, during the build process, the server generates fully rendered HTML pages.
• Step 2: However, the server also sets a regeneration interval for specific pages.
• Step 3: When a user requests a page that is due for regeneration, the server serves the previously generated HTML while it simultaneously starts re-rendering the page in the background.
• Step 4: Once the new version is ready, the server swaps out the old page with the updated content, providing a seamless user experience.
• Step 5: This approach allows for near-real-time updates to specific pages without rebuilding the entire site.

In summary, these techniques vary in terms of where rendering occurs (client-side or server-side) and when the rendering process happens (at build time or runtime). The choice of technique depends on factors like performance requirements, SEO considerations, and the level of dynamic interactivity needed for the web application.