Rendering Concepts ( CSR, SSR, SSG, ISR )

I am welcoming all of you to learn four concepts on website rendering. In this blog, we will be using Next.js framework to know those concepts, each suited to different use cases for immense improvement in website load/delivery speed. Let’s discuss them along with code examples:

What is CSR?

Client-Side Rendering (CSR) is a rendering method where the initial HTML sent to the user's browser contains minimal content or a basic structure. The dynamic content is rendered entirely on the client side using JavaScript. After the initial page load, JavaScript fetches the necessary data (often via APIs) and dynamically updates the page content in the browser. This approach is commonly used in single-page applications (SPAs).

Key Points in the Definition:

1. Initial HTML: The server sends a basic HTML structure to the browser.

2. JavaScript: The browser downloads and executes JavaScript to render the page's dynamic content.

3. Data Fetching: Data is typically fetched via API calls after the page loads.

4. Browser Responsibility: The user's browser takes on most of the work of rendering and updating the UI.

When to use CSR ( Client-Side Rendering ) :

1. Interactive Apps: For apps like dashboards or chats where users interact a lot.

2. Single Page Apps (SPAs): Apps like Gmail with dynamic routing and no page reloads.

3. No SEO Needed: Internal tools or user dashboards that don’t rely on search engines.

4. Real-Time Updates: Apps with live data, like stock prices or sports scores.

5. Fast Development: Easier to build without complex server-side setup.

Code Example :

// app/page.js
"use client";
import { useState, useEffect } from "react";
import Image from "next/image";

export default function Home() {

  const [data, setData] = useState({});

  const fetchData = async ()=>{
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const result = await response.json();
    setData(result);
  }

  useEffect(()=>{
    fetchData();
  },[])

  return (
    <div>
      <p>Hey this is home page and this is the title : {data.title}</p>
    </div>
  );
}

Here, the data is displayed after it’s fetched, without reloading the page.

P.S. : You can try doing console.log(result) inside fetchData() and look at the browser console.

What is SSR?

Server-Side Rendering (SSR) is a rendering method where the content of a website is dynamically generated on the server for each user request. The fully rendered HTML is then sent to the browser, ensuring fresh content and improving SEO.

Key Points in the Definition :

1. Content Generation on Server : Content is generated on the server for each request.

2. Latest Data: Ensures the latest data is displayed.

3. Fully Rendered HTML: The browser receives fully rendered HTML.

When to use SSR ( Server-Side Rendering ) :

1. SEO is Important: Use SSR for pages that need to rank well on search engines (e.g., e-commerce product pages).

2. Dynamic Content: For content that changes often and needs to be up-to-date (e.g., user dashboards, news articles).

3. First-Load Speed: To ensure faster page rendering for the first visit compared to CSR.

4. Real-Time Updates: When fresh data is critical for every request (e.g., live sports scores).

Code Example :

// app/page.js
import Image from "next/image";

export default function Home() {

  const fetchData = async ()=>{
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const result = await response.json();
    console.log(result);
  }

  fetchData();

  return (
    <div>
      <p>Hey this is home page</p>
    </div>
  );
}

Take a look at your code editor terminal after writing this code.

What is SSG?

Static Site Generation (SSG) is a rendering method where the content of a website is pre-rendered at build time. This means the HTML for each page is generated once, during the build process, and served as static files to users. SSG is ideal for pages with content that doesn't change often or doesn't depend on user-specific data.

Key Points in the Definition :

1. Pre-rendered at build time : The content of a website is pre-rendered at build time.

2. Static files: The HTML pages are served as static files to users.

When to use SSG ( Static Site Generation ) :

1. Static Content: For pages that don’t change often, like blogs or marketing websites.

2. Fast Load Time: When you want pages to load quickly because the content is pre-made.

3. SEO: When you need good search engine optimization because search engines can easily read the pre-rendered content.

4. No Real-Time Data: When the content doesn’t rely on user login or real-time updates (like a product page that doesn't change often).

5. Simple Websites: For websites that don’t require frequent updates, like portfolios or documentation.

Code Example :

// app/page.js
import Image from "next/image";

export default function Home() {

  return (
    <div>
      <p>Hey this is home page</p>
    </div>
  );
}

After running npm run build in your terminal, you can see the following. It basically shows the pages which are prerendered as static content at build time.

What is ISR?

Incremental Static Regeneration / Incremental Static Generation (ISR/ISG) is a rendering method in Next.js that allows you to update static content after the site is built without needing to rebuild the entire site. The HTML for each page can be re-rendered periodically, based on a defined interval (e.g., every few minutes), ensuring fresh content while maintaining the benefits of static generation.

Key Points in the Definition :

1. Static Page Generation : Initially, pages are statically generated during the build.

2. Revalidation of pages : After a set period, if a user visits the page again, it triggers regeneration in the background.

3. Serving Fresh Content: Once the page is re-generated, the updated version is served to users.

When to use ISR ( Incremental Static Regeneration ) :

1. Frequently Changing Content: When content updates regularly but not on every page load (e.g., blogs, news articles, product pages). ISR ensures pages are updated in the background without a full rebuild.

2. SEO is Important: Like static sites, ISR generates static pages for SEO, but the content stays fresh by regenerating periodically.

3. Performance and Freshness Balance: When you need the performance benefits of static pages (fast load times) while ensuring the content remains up-to-date (e.g., e-commerce sites with changing inventory).

4. Large Sites: For large websites (with many pages) where rebuilding the entire site after every update is inefficient, ISR allows only the updated pages to regenerate.

5. No Need for Real-Time Data: When content needs to be fresh but doesn’t require real-time data or immediate updates on every request.

Code Example :

// app/page.js
import Image from "next/image";

export default async function Home() {

  let data = await fetch('https://api.vercel.app/blog', { next: { revalidate: 3600 } })
  let posts = await data.json()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Here, revalidate: 3600 tells Next.js to regenerate the page content every hour (3600 seconds).

P.S. : Run the same command npm run build and see the result.