CSR vs SSR vs SSG in Next.js

CSR (Client Side Rendering)

In Client Side Rendering (CSR), the browser initially receives minimal HTML from the server along with a JavaScript bundle. React then executes in the browser, fetches required data, and renders the UI on the client side. This approach creates highly interactive applications but can negatively impact SEO and initial page load performance because users may initially see a blank page before JavaScript finishes executing.

How It Works

• Browser requests page
• Server sends minimal HTML + JS bundle
• React hydrates application
• Browser renders UI

Example

"use client";

import { useEffect, useState } from "react";

export default function UsersPage() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then((res) => res.json())
      .then(setUsers);
  }, []);

  return (
    <div>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}
      

SSR (Server Side Rendering)

In Server Side Rendering (SSR), the server generates fully rendered HTML for every incoming request before sending it to the browser. The browser immediately displays meaningful content, which improves SEO and initial page performance. After the HTML reaches the client, React hydrates the application to make it interactive.

How It Works

• Request reaches server
• Server fetches data
• Server renders HTML
• Browser receives complete page
• Hydration attaches interactivity

Example

export default async function ProductsPage() {
  const products = await fetch(
    "https://api.example.com/products",
    {
      cache: "no-store",
    }
  ).then((res) => res.json());

  return (
    <div>
      {products.map((product) => (
        <p key={product.id}>
          {product.name}
        </p>
      ))}
    </div>
  );
}
      

SSG (Static Site Generation)

Static Site Generation (SSG) generates HTML during the build process instead of generating it for every request. The generated pages are deployed to a CDN and served instantly to users. Because pages are pre-rendered and cached globally, SSG provides excellent performance, scalability, and SEO.

How It Works

• Application builds during deployment
• Pages are pre-rendered into static HTML
• CDN serves static files instantly

Example

export default async function BlogPage() {
  const posts = await fetch(
    "https://api.example.com/posts",
    {
      cache: "force-cache",
    }
  ).then((res) => res.json());

  return (
    <div>
      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}