Introduction 👋

Rendering is the process of turning your React code into HTML that browsers can display. Next.js offers a spectrum of rendering strategies — from fully static to fully dynamic — and this flexibility is one of its biggest strengths. This tutorial covers how rendering works under the hood, and how to choose the right strategy for each part of your app.

What is Rendering? 🧠

Rendering converts your React components into HTML markup. In Next.js, this can happen at build time, on the server per-request, or in the browser — and often a mix of all three within a single page.

Rendering Pipeline 🏗️

A typical Next.js request flows through several stages: matching a route, rendering Server Components into a special data format (RSC Payload), converting that into HTML, sending HTML to the browser, and finally hydrating it into an interactive app.

Client-Side Rendering (CSR) 💻

In Client-Side Rendering, the browser downloads a minimal HTML shell and JavaScript bundle, then renders the UI entirely in the browser. This is the traditional React SPA model.

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Server-Side Rendering (SSR) 🖥️

Server-Side Rendering generates the full HTML for a page on the server, on every request. This ensures content is always fresh and immediately visible, at the cost of a server round-trip per visit.

export const dynamic = "force-dynamic";

export default async function Dashboard() {
  const data = await fetchLiveData();
  return <p>{data.value}</p>;
}

Static Site Generation (SSG) 📄

With Static Site Generation, pages are rendered to HTML once at build time and reused for every request, making them extremely fast to serve since no per-request computation is needed.

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <h1>{post.title}</h1>;
}

Incremental Static Regeneration (ISR) ♻️

ISR lets you update statically generated pages after build time, on a set interval, without rebuilding the entire site. It combines the speed of static generation with the freshness of dynamic data.

export const revalidate = 3600; // regenerate every hour

export default async function Product({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return <h1>{product.name}</h1>;
}

Partial Prerendering (PPR) 🧩

Partial Prerendering is an experimental strategy that combines a static shell, rendered at build time, with dynamic holes that stream in at request time — giving both instant static content and fresh dynamic data in a single page.

import { Suspense } from "react";

export const experimental_ppr = true;

export default function Product({ params }: { params: { id: string } }) {
  return (
    <div>
      <StaticProductInfo />
      <Suspense fallback={<p>Loading reviews…</p>}>
        <DynamicReviews id={params.id} />
      </Suspense>
    </div>
  );
}

Dynamic Rendering 🔄

Dynamic Rendering renders a route on the server for every incoming request, using the latest data. Next.js automatically switches a route to dynamic rendering when it detects request-specific APIs.

Hybrid Rendering 🧬

Next.js apps are typically hybrid by nature — some routes are static, others dynamic, and some combine both through PPR or nested <Suspense> boundaries, all within the same application.

Streaming 🌊

Streaming allows the server to send HTML to the browser incrementally, as it becomes ready, rather than waiting for the entire page to finish rendering. This is built on <Suspense> boundaries.

import { Suspense } from "react";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Loading stats…</p>}>
        <Stats />
      </Suspense>
    </div>
  );
}

Hydration 💧

Hydration is the process where React attaches event listeners and internal state to the server-rendered HTML in the browser, turning static markup into a fully interactive application.

React Server Components 🧠

React Server Components (RSC) render exclusively on the server and never ship their JavaScript to the browser, resulting in smaller client bundles. They can directly access backend resources like databases without an API layer.

export default async function Posts() {
  const posts = await db.query("SELECT * FROM posts");
  return <List type="unordered">{posts.map((p) => <List.Item key={p.id}>{p.title}</List.Item>)}</List>;
}

Client Components 🖱️

Client Components, marked with the "use client" directive, render on the server for the initial HTML and then hydrate in the browser to support interactivity like state, effects, and event handlers.

"use client";

import { useState } from "react";

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? "❤️" : "🤍"}</button>;
}

Server Components 🗄️

Server Components are the default in the App Router — every component is a Server Component unless explicitly marked with "use client". They're ideal for data fetching and content that doesn't require interactivity.

Rendering Strategies 🗺️

Choosing a rendering strategy is about matching how often data changes with how it's rendered. Next.js supports mixing strategies at the individual route segment level.

Static Rendering 🧊

Static Rendering is the default in the App Router. As long as a route doesn't use dynamic APIs, Next.js renders it once at build time and serves the cached result to every visitor.

export default function About() {
  return <h1>About Us</h1>;
}

Dynamic Rendering Triggers ⚡

Certain APIs and configurations automatically opt a route out of static rendering. Recognizing these triggers helps you understand why a route you expected to be static is actually dynamic.

Route Segment Configuration ⚙️

Exported configuration constants let you explicitly control a route segment's rendering behavior, overriding Next.js's automatic detection.

export const dynamic = "force-static"; // or "force-dynamic", "auto", "error"
export const revalidate = 3600;

Rendering Performance 🚀

SEO Considerations 🔍

Because Next.js renders HTML on the server (via SSR, SSG, or ISR), content is present in the initial response, making it fully crawlable by search engines — unlike pure client-side rendered apps.

Caching and Rendering 🗃️

Rendering and caching are closely linked: statically rendered pages are cached at the data cache and full route cache layers, while dynamic pages typically bypass these caches unless explicitly configured.

Revalidation 🔁

Revalidation refreshes cached data or pages without a full rebuild. Next.js supports both time-based revalidation and on-demand revalidation triggered by code.

"use server";

import { revalidatePath, revalidateTag } from "next/cache";

export async function updatePost() {
  await savePost();
  revalidatePath("/blog");
  revalidateTag("posts");
}

Rendering Debugging 🐞

Next.js provides build-time output indicating whether each route is ○ (static), ƒ (dynamic), or incremental — a quick way to verify a route is rendering the way you expect.

Choosing the Right Rendering Strategy 🧭

Best Practices ✅

Common Mistakes ⚠️

Frequently Asked Questions 💬

Summary 📌