PHONG PHAN

27/4/2025

Understanding Rendering Mechanisms in Next.js 15 with the App Router

Hello! If you're exploring Next.js 15 and want to understand how different rendering mechanisms like SSR, SSG, ISR, CSR, and Server Components work within the App Router, this article will help you grasp them through practical examples. We'll walk through each mechanism using the app folder structure

What is the App Router?

In Next.js 15, the App Router (the app directory) is the primary way to build applications, replacing the older pages directory. It offers a flexible structure, defaults to Server Components, and integrates seamlessly with various rendering mechanisms. Each page.js file in the app directory represents a route.

Think of the App Router as a modern restaurant where you can order food in different ways:

SSG: Pre-cooked dishes, served instantly.
SSR: Meals cooked fresh for each order.
ISR: Pre-made dishes, refreshed periodically.
CSR: You cook at the table with provided ingredients.
Server Components: The chef handles most of the work, delivering a finished dish.

Let’s dive into each mechanism with examples in the App Router.

1. Static Site Generation (SSG) - Pre-Rendered Static Pages What is SSG?

SSG generates static HTML pages at build time, stored on the server or CDN for lightning-fast delivery.

Simple Example

Imagine a blog with posts like “How to Make Bread.” The content rarely changes, so you want pre-rendered HTML for speed and SEO.

Implementing SSG in App Router

In the App Router, create a page.js file and use fetch with default caching to generate static pages.

DummyComponent.jsx

// app/blog/page.js
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    cache: 'force-cache', // Static generation, like getStaticProps
  });
  return res.json();
}

export default async function Blog() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Explanation:
- fetch with cache: 'force-cache' ensures data is fetched at build time, creating static HTML.
- The /blog page is pre-rendered and served from a CDN, making it super fast.
Dynamic Routes: For individual posts (/blog/[id]), use a dynamic folder and generateStaticParams.

DummyComponent.jsx

// app/blog/[id]/page.js
async function getPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`, {
    cache: 'force-cache',
  });
  return res.json();
}

export async function generateStaticParams() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return posts.map((post) => ({ id: post.id.toString() }));
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.id);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

generateStaticParams: Similar to getStaticPaths, it specifies which id values to pre-render.

When to Use :

Blogs, documentation, static product pages.
Need high speed and great SEO.

2. Server-Side Rendering (SSR) - Rendering on Demand

What is SSR?

SSR generates HTML on the server for each request, ensuring fresh content every time.

Simple Example

Picture a news website showing the latest articles. Each visit fetches new data and renders HTML on the server.

Implementing SSR in App Router

Use fetch with cache: 'no-store' to fetch fresh data per request.

DummyComponent.jsx

// app/news/page.js
async function getNews() {
  const res = await fetch('https://api.example.com/news', {
    cache: 'no-store', // Like getServerSideProps
  });
  return res.json();
}

export default async function News() {
  const articles = await getNews();
  return (
    <ul>
      {articles.map((article) => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
}

Explanation:
- cache: 'no-store' ensures data is fetched anew for each request, mimicking SSR.
- HTML is generated on the server and sent to the client.

When to Use :

News sites, social media, dashboards.
Need dynamic or personalized content.

3. Incremental Static Regeneration (ISR) - Periodic Static Updates

What is ISR?

ISR generates static pages at build time (like SSG) but allows periodic updates without rebuilding the entire app.

Simple Example

Consider an e-commerce product list where prices update hourly. ISR creates a static page but refreshes it every hour.

Implementing ISR in App Router

Use fetch with next: { revalidate } to specify the refresh interval.

DummyComponent.jsx

// app/products/page.js
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // Refresh every 1 hour
  });
  return res.json();
}

export default async function Products() {
  const products = await getProducts();
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Explanation:
- next: { revalidate: 3600 } tells Next.js to refresh the page after 1 hour if there’s a new request.
- The page is served from the CDN but updates in the background.

When to Use :

Product lists, blog posts with comments.
Want SSG speed with dynamic updates.

4. Client-SideRendering (CSR) - Rendering in the Browser

What is CSR?

CSR loads minimal HTML, then uses JavaScript to fetch data and render content in the browser.

Simple Example

Imagine a dashboard showing orders after login. Data is fetched via JavaScript in the browser.

Implementing CSR in App Router

Use "use client" to mark a component as client-side, paired with useEffect for data fetching.

DummyComponent.jsx

// app/dashboard/page.js
'use client';

import { useState, useEffect } from 'react';

export default function Dashboard() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    async function fetchOrders() {
      const res = await fetch('https://api.example.com/orders');
      const data = await res.json();
      setOrders(data);
    }
    fetchOrders();
  }, []);

  return (
    <ul>
      {orders.map((order) => (
        <li key={order.id}>{order.name}</li>
      ))}
    </ul>
  );
}

Explanation:
- "use client" marks the component to run in the browser.
- useEffect fetches data and updates the UI when ready.

When to Use :

Dashboards, management apps.
No SEO needed, prioritizing interactivity.

5. Server Components - Default in App Router

What are Server Components?

Server Components, the default in App Router, render logic and HTML on the server, minimizing JavaScript sent to the client.

Simple Example

A product page fetches data from an API and renders HTML on the server, sending only the final result to the browser.

Implementing Server Components

All components in the app directory are Server Components unless marked "use client".

DummyComponent.jsx

// app/products/[id]/page.js
async function getProduct(id) {
  const res = await fetch(`https://api.example.com/products/${id}`);
  return res.json();
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

Explanation:
- Data fetching and rendering happen on the server.
- The client receives pre-rendered HTML, reducing JavaScript load.

When to Use :

Most static or dynamic pages.
Prioritize performance and SEO.

Quick Comparison

Mechanism	Render Time	Speed	SEO	Use Case
SSG	Build time	Very fast	Great	Blogs, documentation
SSR	Request time	Slower	Good	News, dashboards
ISR	Build + Revalidate	Fast	Great	Products, periodic updates
CSR	Client-side	Slow	Poor	Interactive apps, no SEO
Server Components	Server-side	Fast	Great	Most pages

Conclusion

With App Router in Next.js 15, you can flexibly choose the right rendering mechanism:

SSG: Pre-render static pages with cache: 'force-cache'.
SSR: Render dynamic pages with cache: 'no-store'.
ISR: Combine static speed and dynamic updates with next: { revalidate }.
CSR: Use "use client" for browser-based interactivity.
Server Components: Default for high performance and SEO.

I hope these examples clarify how to implement rendering in the App Router.

Maybe you like

What is Zustand? Why Its Combination with @tanstack/react-query is the Hottest State Management Trend for Projects Big and Small

Published at: 30/7/2025

What Are Access Tokens and Refresh Tokens? Why Do We Need Both Instead of Just One?

Published at: 31/7/2025

Why Shadcn/UI Has Taken Over as the Top UI Component Library

Published at: 28/7/2025

What is Prisma? Why It’s the Best, Most Powerful, and Easiest-to-Use ORM That Developers Can’t Afford to Miss

Published at: 29/7/2025

🚀 Level Up Your React Source Structure for Professional Work - Coding Is No Longer a Nightmare

Published at: 21/4/2025

Asynchronous Processing in JavaScript from A → Z

Published at: 27/4/2025

Setup React Typescript with Vite & ESLint

Published at: 18/8/2024

SITE MAP

Understanding Rendering Mechanisms in Next.js 15 with the App Router

What is the App Router?

1. Static Site Generation (SSG) - Pre-Rendered Static Pages What is SSG?

2. Server-Side Rendering (SSR) - Rendering on Demand

3. Incremental Static Regeneration (ISR) - Periodic Static Updates

4. Client-SideRendering (CSR) - Rendering in the Browser

5. Server Components - Default in App Router

Quick Comparison

Conclusion

What is Zustand? Why Its Combination with @tanstack/react-query is the Hottest State Management Trend for Projects Big and Small

What Are Access Tokens and Refresh Tokens? Why Do We Need Both Instead of Just One?

Why Shadcn/UI Has Taken Over as the Top UI Component Library

What is Prisma? Why It’s the Best, Most Powerful, and Easiest-to-Use ORM That Developers Can’t Afford to Miss

🚀 Level Up Your React Source Structure for Professional Work - Coding Is No Longer a Nightmare

Asynchronous Processing in JavaScript from A → Z

Setup React Typescript with Vite & ESLint