Rendering in Next.js

Rendering is the process of converting React components into HTML that the browser can display.

Why Rendering Matters?

Rendering affects performance, SEO, and user experience. Different pages require different rendering strategies.

Static Rendering (SSG)

Static pages are generated at build time and reused for every user. This is the fastest and most SEO-friendly option.

export default function Page() {
  return <h1>Static Page</h1>;
}

Server-Side Rendering (SSR)

Pages are rendered on every request. This ensures users always see fresh data.

export const dynamic = "force-dynamic";

export default async function Page() {
  return <h1>Server Rendered Page</h1>;
}

Client-Side Rendering (CSR)

Rendering happens in the browser after the page loads. Used for interactive and user-specific features.

"use client";

import { useState } from "react";

export default function Page() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

Real World Use Case

Blog and documentation pages use static rendering, news pages use server-side rendering, and dashboards rely on client-side rendering.