Understanding Static and Dynamic Rendering

Next.js renders pages in different ways to optimize performance. Static Rendering (SSG) pre-generates HTML at build time for lightning-fast loads. Dynamic Rendering (SSR) generates HTML on each request for personalized content. Incremental Static Regeneration (ISR) combines both—static with periodic updates. Understanding when and how pages render is crucial for building fast, scalable applications!

Three Types of Rendering

1. Static Rendering (SSG - Static Site Generation)

When: Build time
Caching: Served from CDN indefinitely
Use for: Marketing pages, blog posts, documentation
Speed: ⚡ Fastest (pre-rendered HTML)

2. Dynamic Rendering (SSR - Server-Side Rendering)

When: Request time (every request)
Caching: No caching (always fresh)
Use for: User dashboards, personalized content, real-time data
Speed: 🐢 Slower (rendered on demand)

3. Incremental Static Regeneration (ISR)

When: Build time + periodic revalidation
Caching: Cached with time-based revalidation
Use for: E-commerce products, news articles, CMS content
Speed: ⚡ Fast (static) + 🔄 Updated (revalidated)

Next.js Default Behavior

Next.js defaults to Static Rendering whenever possible for maximum performance. A route automatically becomes dynamic if it uses dynamic functions (cookies, headers, searchParams) or opts out of caching.

Static Rendering (SSG)

Fully Static Page

app/about/page.tsx

// This page is FULLY STATIC
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a company that builds amazing things.</p>
      <p>Founded in 2024.</p>
    </div>
  );
}

// ✅ Rendered at build time
// ✅ HTML cached indefinitely
// ✅ Served from CDN
// ✅ Fastest possible load time
// ✅ No server processing on request

Static with Cached Data

app/blog/page.tsx

// Static page with data fetching
export default async function BlogPage() {
  // Default: cached indefinitely
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  
  return (
    <div>
      <h1>Blog</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// ✅ Rendered at build time
// ✅ Fetch data once during build
// ✅ HTML + data cached
// ✅ No data fetching on request

Explicitly Static

app/docs/page.tsx

export const dynamic = 'force-static'; // Force static rendering

export default async function DocsPage() {
  const docs = await fetch('https://api.example.com/docs', {
    cache: 'force-cache', // Explicitly cache
  }).then(r => r.json());
  
  return (
    <div>
      <h1>Documentation</h1>
      {/* Render docs */}
    </div>
  );
}

// ✅ Forced to be static
// ✅ Even if it uses dynamic-like patterns
// ✅ Good for ensuring pages are always static

When Pages Are Static

✅ Pages are Static when:

No dynamic functions (cookies, headers, searchParams)
All data fetching uses default caching (cache: 'force-cache')
No dynamic segments without generateStaticParams
export const dynamic = 'force-static' is set

Dynamic Rendering (SSR)

Using Dynamic Functions

app/dashboard/page.tsx

import { cookies } from 'next/headers';

// This page is DYNAMIC because it uses cookies()
export default async function DashboardPage() {
  const cookieStore = cookies();
  const userId = cookieStore.get('userId')?.value;
  
  // Fetch user-specific data
  const userData = await fetch(`https://api.example.com/users/${userId}`).then(r => r.json());
  
  return (
    <div>
      <h1>Welcome, {userData.name}!</h1>
      <p>Your personal dashboard</p>
    </div>
  );
}

// ✅ Rendered on every request
// ✅ Fresh user data every time
// ✅ Personalized content
// ⚠️ Slower than static (server processing)

Using headers()

app/api-docs/page.tsx

import { headers } from 'next/headers';

// Dynamic because of headers()
export default async function ApiDocsPage() {
  const headersList = headers();
  const userAgent = headersList.get('user-agent');
  
  // Customize based on device
  const isMobile = /Mobile/i.test(userAgent || '');
  
  return (
    <div>
      <h1>API Documentation</h1>
      {isMobile ? <MobileDocs /> : <DesktopDocs />}
    </div>
  );
}

// ✅ Personalized based on request headers
// ✅ Different content per device
// ✅ Dynamic rendering

Using searchParams

app/search/page.tsx

// Dynamic because of searchParams
export default async function SearchPage({
  searchParams,
}: {
  searchParams: { q?: string; page?: string };
}) {
  const query = searchParams.q || '';
  const page = parseInt(searchParams.page || '1', 10);
  
  // Search based on query parameters
  const results = await fetch(
    `https://api.example.com/search?q=${query}&page=${page}`
  ).then(r => r.json());
  
  return (
    <div>
      <h1>Search Results for "{query}"</h1>
      {results.map(result => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
}

// ✅ Different content per query
// ✅ Dynamic based on URL params
// ✅ Rendered on request

Opting Out of Caching

app/live-data/page.tsx

// Dynamic because of cache: 'no-store'
export default async function LiveDataPage() {
  const data = await fetch('https://api.example.com/live', {
    cache: 'no-store', // Don't cache, always fetch fresh
  }).then(r => r.json());
  
  return (
    <div>
      <h1>Live Data</h1>
      <p>Updated: {new Date().toLocaleTimeString()}</p>
      <p>Value: {data.value}</p>
    </div>
  );
}

// ✅ Fresh data on every request
// ✅ No caching
// ✅ Dynamic rendering

Explicitly Dynamic

app/dashboard/page.tsx

export const dynamic = 'force-dynamic'; // Force dynamic rendering

export default async function DashboardPage() {
  // Even without dynamic functions, this is dynamic
  const data = await fetch('https://api.example.com/data').then(r => r.json());
  
  return <div>{data.content}</div>;
}

// ✅ Forced to be dynamic
// ✅ Rendered on every request
// ✅ Never cached

When Pages Are Dynamic

⚠️ Pages are Dynamic when:

Using cookies(), headers(), or searchParams
Using cache: 'no-store' in fetch
Using revalidate: 0 in fetch
export const dynamic = 'force-dynamic' is set
Dynamic segments without generateStaticParams

Incremental Static Regeneration (ISR)

Time-Based Revalidation

app/blog/[slug]/page.tsx

// ISR: Static with revalidation every hour
export default async function BlogPostPage({
  params,
}: {
  params: { slug: string };
}) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 3600 }, // Revalidate every 1 hour (3600 seconds)
  }).then(r => r.json());
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <p>Published: {post.publishedAt}</p>
    </article>
  );
}

// ✅ Generated statically at build
// ✅ Served from cache for 1 hour
// ✅ After 1 hour, regenerates in background
// ✅ Subsequent requests get updated version
// ✅ Fast + fresh data

Route Segment Config

app/products/page.tsx

// Revalidate entire route segment
export const revalidate = 3600; // 1 hour

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  
  return (
    <div>
      <h1>Products</h1>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

// ✅ Applies to entire route
// ✅ All fetches in this route use same revalidation
// ✅ Simpler than per-fetch revalidation

Different Revalidation Times

app/dashboard/page.tsx

export default async function DashboardPage() {
  // Revalidate every 60 seconds
  const stats = await fetch('https://api.example.com/stats', {
    next: { revalidate: 60 },
  }).then(r => r.json());
  
  // Revalidate every 10 minutes
  const notifications = await fetch('https://api.example.com/notifications', {
    next: { revalidate: 600 },
  }).then(r => r.json());
  
  // Never cache (always fresh)
  const liveData = await fetch('https://api.example.com/live', {
    cache: 'no-store',
  }).then(r => r.json());
  
  return (
    <div>
      <h1>Dashboard</h1>
      <Stats data={stats} />
      <Notifications data={notifications} />
      <LiveFeed data={liveData} />
    </div>
  );
}

// ✅ Different revalidation per data source
// ✅ Optimize based on update frequency
// ✅ Mix static, ISR, and dynamic data

ISR with generateStaticParams

app/products/[id]/page.tsx

// Generate static paths at build time
export async function generateStaticParams() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  
  return products.map((product) => ({
    id: product.id,
  }));
}

// ISR for each product
export default async function ProductPage({
  params,
}: {
  params: { id: string };
}) {
  const product = await fetch(`https://api.example.com/products/${params.id}`, {
    next: { revalidate: 3600 }, // Revalidate every hour
  }).then(r => r.json());
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
    </div>
  );
}

// ✅ Pre-generate known products at build
// ✅ Each product revalidates independently
// ✅ New products generated on-demand
// ✅ Fast + always up-to-date

Rendering Strategies by Route

Different rendering strategies for different routes

appImportant

Select a file or folder to see details

Rendering Comparison

Feature	Static (SSG)	Dynamic (SSR)	ISR
When Rendered	Build time	Request time	Build + revalidation
Performance	⚡ Fastest	🐢 Slower	⚡ Fast
Data Freshness	Stale until rebuild	Always fresh	Periodic updates
Caching	Indefinite CDN	No caching	CDN with TTL
Server Load	None (cached)	High (every request)	Low (periodic)
Best For	Marketing, docs, blog	Dashboards, personalized	E-commerce, news, CMS
Build Time	Increases with pages	Fast builds	Build known paths

Cache Control Options

Force Cache (Static)

TYPESCRIPT

// Force caching - always static
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache', // Default behavior
});

// ✅ Cached at build time
// ✅ Never refetches
// ✅ Fastest option

No Store (Dynamic)

TYPESCRIPT

// Never cache - always dynamic
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store', // Opt out of caching
});

// ✅ Fresh data every request
// ✅ Dynamic rendering
// ✅ Use for real-time data

Revalidate (ISR)

TYPESCRIPT

// Cache with revalidation - ISR
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 }, // Revalidate every 60 seconds
});

// ✅ Static + periodic updates
// ✅ Best of both worlds
// ✅ Use for frequently updated content

No Revalidate (Static Forever)

TYPESCRIPT

// Cache forever
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: false }, // Or omit revalidate
});

// ✅ Cached at build
// ✅ Never revalidates
// ✅ Use for truly static content

Revalidate 0 (Dynamic)

TYPESCRIPT

// Revalidate immediately - effectively dynamic
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 0 },
});

// ✅ Same as cache: 'no-store'
// ✅ Always fresh
// ✅ Dynamic rendering

Route Segment Config Options

dynamic

app/page.tsx

// Control rendering mode
export const dynamic = 'auto'; // Default: auto-detect
// export const dynamic = 'force-static'; // Always static
// export const dynamic = 'force-dynamic'; // Always dynamic
// export const dynamic = 'error'; // Error if dynamic

export default function Page() {
  return <div>Content</div>;
}

// 'auto': Next.js decides based on usage
// 'force-static': Force static even with dynamic functions
// 'force-dynamic': Force dynamic even without dynamic functions
// 'error': Throw error if page becomes dynamic

revalidate

app/blog/page.tsx

// Set revalidation for entire route
export const revalidate = 3600; // 1 hour
// export const revalidate = 60; // 1 minute
// export const revalidate = false; // Never revalidate
// export const revalidate = 0; // Revalidate on every request (dynamic)

export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <div>{/* posts */}</div>;
}

// Applies to all data fetching in this route
// Can be overridden per-fetch with next.revalidate

dynamicParams

app/products/[id]/page.tsx

// Control behavior for dynamic params not in generateStaticParams
export const dynamicParams = true; // Default: generate on-demand
// export const dynamicParams = false; // Return 404 if not pre-generated

export async function generateStaticParams() {
  // Generate params for known products
  return [
    { id: '1' },
    { id: '2' },
    { id: '3' },
  ];
}

export default function ProductPage({ params }: { params: { id: string } }) {
  return <div>Product {params.id}</div>;
}

// dynamicParams = true: New products generated on first visit
// dynamicParams = false: Only pre-generated products exist

Rendering Best Practices

1. Default to Static

TYPESCRIPT

// ✅ GOOD: Let Next.js optimize
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{/* render */}</div>;
}

// ❌ BAD: Forcing dynamic unnecessarily
export const dynamic = 'force-dynamic';
export default function Page() {
  // Could be static but forced dynamic
  return <div>Static content</div>;
}

// Use static rendering by default for best performance

2. Use ISR for Semi-Dynamic Content

TYPESCRIPT

// ✅ GOOD: ISR for content that changes occasionally
export const revalidate = 3600; // 1 hour

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <div>{/* products */}</div>;
}

// ❌ BAD: Dynamic for content that rarely changes
export const dynamic = 'force-dynamic';
// Causes unnecessary server load

// ISR provides fast loads + fresh content

3. Reserve Dynamic for Personalized Content

TYPESCRIPT

// ✅ GOOD: Dynamic for user-specific data
import { cookies } from 'next/headers';

export default async function DashboardPage() {
  const userId = cookies().get('userId')?.value;
  const userData = await fetch(`/api/users/${userId}`).then(r => r.json());
  return <div>Welcome, {userData.name}</div>;
}

// Dynamic rendering justified for personalized content

4. Choose Appropriate Revalidation Times

TYPESCRIPT

// ✅ GOOD: Match revalidation to update frequency

// Blog posts: 1 hour (rarely change)
export const revalidate = 3600;

// Product prices: 5 minutes (change frequently)
export const revalidate = 300;

// News articles: 1 minute (very frequent)
export const revalidate = 60;

// Static content: never
export const revalidate = false;

// Match revalidation to your content update frequency

5. Use generateStaticParams for Known Routes

TYPESCRIPT

// ✅ GOOD: Pre-generate known routes
export async function generateStaticParams() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return products.map(p => ({ id: p.id }));
}

// Faster builds, better performance for known routes

// ❌ BAD: All routes generated on-demand
// Slower first visits, increased server load

// Pre-generate what you know, on-demand for the rest

Key Takeaways

Static (SSG) - build time, cached forever, fastest
Dynamic (SSR) - request time, always fresh, personalized
ISR - static + periodic updates, best of both
Default to static - Next.js optimizes automatically
cache: 'no-store' - opts into dynamic rendering
revalidate - time-based ISR (seconds)
Dynamic functions - cookies(), headers(), searchParams trigger dynamic
Choose wisely - match rendering to content type

What's Next?

You've mastered static and dynamic rendering! Next, we'll explore generateStaticParams for Static Generation—pre-generating dynamic routes at build time, controlling which paths to generate, implementing fallback behavior, and optimizing build times. You'll create lightning-fast static sites with dynamic routes!

We'll cover generateStaticParams, dynamicParams, fallback behavior, and complete static generation strategies.

⚡ Performance Tip

Choose the right rendering strategy: Static for marketing pages and blogs (fastest), ISR for e-commerce and news (fast + fresh), Dynamic for dashboards and personalized content (always current). Match your rendering to your content update frequency!

Test Your Understanding

Question 1 of 4

What is Static Rendering (SSG)?

Three Types of Rendering

1. Static Rendering (SSG - Static Site Generation)

When: Build time
Caching: Served from CDN indefinitely
Use for: Marketing pages, blog posts, documentation
Speed: ⚡ Fastest (pre-rendered HTML)

2. Dynamic Rendering (SSR - Server-Side Rendering)

When: Request time (every request)
Caching: No caching (always fresh)
Use for: User dashboards, personalized content, real-time data
Speed: 🐢 Slower (rendered on demand)

3. Incremental Static Regeneration (ISR)

When: Build time + periodic revalidation
Caching: Cached with time-based revalidation
Use for: E-commerce products, news articles, CMS content
Speed: ⚡ Fast (static) + 🔄 Updated (revalidated)

Next.js Default Behavior

Static Rendering (SSG)

Fully Static Page

app/about/page.tsx

// This page is FULLY STATIC
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a company that builds amazing things.</p>
      <p>Founded in 2024.</p>
    </div>
  );
}

// ✅ Rendered at build time
// ✅ HTML cached indefinitely
// ✅ Served from CDN
// ✅ Fastest possible load time
// ✅ No server processing on request

Static with Cached Data

app/blog/page.tsx

// Static page with data fetching
export default async function BlogPage() {
  // Default: cached indefinitely
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  
  return (
    <div>
      <h1>Blog</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// ✅ Rendered at build time
// ✅ Fetch data once during build
// ✅ HTML + data cached
// ✅ No data fetching on request

Explicitly Static

app/docs/page.tsx

export const dynamic = 'force-static'; // Force static rendering

export default async function DocsPage() {
  const docs = await fetch('https://api.example.com/docs', {
    cache: 'force-cache', // Explicitly cache
  }).then(r => r.json());
  
  return (
    <div>
      <h1>Documentation</h1>
      {/* Render docs */}
    </div>
  );
}

// ✅ Forced to be static
// ✅ Even if it uses dynamic-like patterns
// ✅ Good for ensuring pages are always static

When Pages Are Static

✅ Pages are Static when:

No dynamic functions (cookies, headers, searchParams)
All data fetching uses default caching (cache: 'force-cache')
No dynamic segments without generateStaticParams
export const dynamic = 'force-static' is set

Dynamic Rendering (SSR)

Using Dynamic Functions

app/dashboard/page.tsx

import { cookies } from 'next/headers';

// This page is DYNAMIC because it uses cookies()
export default async function DashboardPage() {
  const cookieStore = cookies();
  const userId = cookieStore.get('userId')?.value;
  
  // Fetch user-specific data
  const userData = await fetch(`https://api.example.com/users/${userId}`).then(r => r.json());
  
  return (
    <div>
      <h1>Welcome, {userData.name}!</h1>
      <p>Your personal dashboard</p>
    </div>
  );
}

// ✅ Rendered on every request
// ✅ Fresh user data every time
// ✅ Personalized content
// ⚠️ Slower than static (server processing)

Using headers()

app/api-docs/page.tsx

import { headers } from 'next/headers';

// Dynamic because of headers()
export default async function ApiDocsPage() {
  const headersList = headers();
  const userAgent = headersList.get('user-agent');
  
  // Customize based on device
  const isMobile = /Mobile/i.test(userAgent || '');
  
  return (
    <div>
      <h1>API Documentation</h1>
      {isMobile ? <MobileDocs /> : <DesktopDocs />}
    </div>
  );
}

// ✅ Personalized based on request headers
// ✅ Different content per device
// ✅ Dynamic rendering

Using searchParams

app/search/page.tsx

// Dynamic because of searchParams
export default async function SearchPage({
  searchParams,
}: {
  searchParams: { q?: string; page?: string };
}) {
  const query = searchParams.q || '';
  const page = parseInt(searchParams.page || '1', 10);
  
  // Search based on query parameters
  const results = await fetch(
    `https://api.example.com/search?q=${query}&page=${page}`
  ).then(r => r.json());
  
  return (
    <div>
      <h1>Search Results for "{query}"</h1>
      {results.map(result => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
}

// ✅ Different content per query
// ✅ Dynamic based on URL params
// ✅ Rendered on request

Opting Out of Caching

app/live-data/page.tsx

// Dynamic because of cache: 'no-store'
export default async function LiveDataPage() {
  const data = await fetch('https://api.example.com/live', {
    cache: 'no-store', // Don't cache, always fetch fresh
  }).then(r => r.json());
  
  return (
    <div>
      <h1>Live Data</h1>
      <p>Updated: {new Date().toLocaleTimeString()}</p>
      <p>Value: {data.value}</p>
    </div>
  );
}

// ✅ Fresh data on every request
// ✅ No caching
// ✅ Dynamic rendering

Explicitly Dynamic

app/dashboard/page.tsx

export const dynamic = 'force-dynamic'; // Force dynamic rendering

export default async function DashboardPage() {
  // Even without dynamic functions, this is dynamic
  const data = await fetch('https://api.example.com/data').then(r => r.json());
  
  return <div>{data.content}</div>;
}

// ✅ Forced to be dynamic
// ✅ Rendered on every request
// ✅ Never cached

When Pages Are Dynamic

⚠️ Pages are Dynamic when:

Using cookies(), headers(), or searchParams
Using cache: 'no-store' in fetch
Using revalidate: 0 in fetch
export const dynamic = 'force-dynamic' is set
Dynamic segments without generateStaticParams

Incremental Static Regeneration (ISR)

Time-Based Revalidation

app/blog/[slug]/page.tsx

// ISR: Static with revalidation every hour
export default async function BlogPostPage({
  params,
}: {
  params: { slug: string };
}) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 3600 }, // Revalidate every 1 hour (3600 seconds)
  }).then(r => r.json());
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <p>Published: {post.publishedAt}</p>
    </article>
  );
}

// ✅ Generated statically at build
// ✅ Served from cache for 1 hour
// ✅ After 1 hour, regenerates in background
// ✅ Subsequent requests get updated version
// ✅ Fast + fresh data

Route Segment Config

app/products/page.tsx

// Revalidate entire route segment
export const revalidate = 3600; // 1 hour

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  
  return (
    <div>
      <h1>Products</h1>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

// ✅ Applies to entire route
// ✅ All fetches in this route use same revalidation
// ✅ Simpler than per-fetch revalidation

Different Revalidation Times

app/dashboard/page.tsx

export default async function DashboardPage() {
  // Revalidate every 60 seconds
  const stats = await fetch('https://api.example.com/stats', {
    next: { revalidate: 60 },
  }).then(r => r.json());
  
  // Revalidate every 10 minutes
  const notifications = await fetch('https://api.example.com/notifications', {
    next: { revalidate: 600 },
  }).then(r => r.json());
  
  // Never cache (always fresh)
  const liveData = await fetch('https://api.example.com/live', {
    cache: 'no-store',
  }).then(r => r.json());
  
  return (
    <div>
      <h1>Dashboard</h1>
      <Stats data={stats} />
      <Notifications data={notifications} />
      <LiveFeed data={liveData} />
    </div>
  );
}

// ✅ Different revalidation per data source
// ✅ Optimize based on update frequency
// ✅ Mix static, ISR, and dynamic data

ISR with generateStaticParams

app/products/[id]/page.tsx

// Generate static paths at build time
export async function generateStaticParams() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  
  return products.map((product) => ({
    id: product.id,
  }));
}

// ISR for each product
export default async function ProductPage({
  params,
}: {
  params: { id: string };
}) {
  const product = await fetch(`https://api.example.com/products/${params.id}`, {
    next: { revalidate: 3600 }, // Revalidate every hour
  }).then(r => r.json());
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>${product.price}</p>
    </div>
  );
}

// ✅ Pre-generate known products at build
// ✅ Each product revalidates independently
// ✅ New products generated on-demand
// ✅ Fast + always up-to-date

Rendering Strategies by Route

Different rendering strategies for different routes

appImportant

Select a file or folder to see details

Rendering Comparison

Feature	Static (SSG)	Dynamic (SSR)	ISR
When Rendered	Build time	Request time	Build + revalidation
Performance	⚡ Fastest	🐢 Slower	⚡ Fast
Data Freshness	Stale until rebuild	Always fresh	Periodic updates
Caching	Indefinite CDN	No caching	CDN with TTL
Server Load	None (cached)	High (every request)	Low (periodic)
Best For	Marketing, docs, blog	Dashboards, personalized	E-commerce, news, CMS
Build Time	Increases with pages	Fast builds	Build known paths

Cache Control Options

Force Cache (Static)

TYPESCRIPT

// Force caching - always static
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache', // Default behavior
});

// ✅ Cached at build time
// ✅ Never refetches
// ✅ Fastest option

No Store (Dynamic)

TYPESCRIPT

// Never cache - always dynamic
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store', // Opt out of caching
});

// ✅ Fresh data every request
// ✅ Dynamic rendering
// ✅ Use for real-time data

Revalidate (ISR)

TYPESCRIPT

// Cache with revalidation - ISR
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 60 }, // Revalidate every 60 seconds
});

// ✅ Static + periodic updates
// ✅ Best of both worlds
// ✅ Use for frequently updated content

No Revalidate (Static Forever)

TYPESCRIPT

// Cache forever
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: false }, // Or omit revalidate
});

// ✅ Cached at build
// ✅ Never revalidates
// ✅ Use for truly static content

Revalidate 0 (Dynamic)

TYPESCRIPT

// Revalidate immediately - effectively dynamic
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 0 },
});

// ✅ Same as cache: 'no-store'
// ✅ Always fresh
// ✅ Dynamic rendering

Route Segment Config Options

dynamic

app/page.tsx

// Control rendering mode
export const dynamic = 'auto'; // Default: auto-detect
// export const dynamic = 'force-static'; // Always static
// export const dynamic = 'force-dynamic'; // Always dynamic
// export const dynamic = 'error'; // Error if dynamic

export default function Page() {
  return <div>Content</div>;
}

// 'auto': Next.js decides based on usage
// 'force-static': Force static even with dynamic functions
// 'force-dynamic': Force dynamic even without dynamic functions
// 'error': Throw error if page becomes dynamic

revalidate

app/blog/page.tsx

// Set revalidation for entire route
export const revalidate = 3600; // 1 hour
// export const revalidate = 60; // 1 minute
// export const revalidate = false; // Never revalidate
// export const revalidate = 0; // Revalidate on every request (dynamic)

export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <div>{/* posts */}</div>;
}

// Applies to all data fetching in this route
// Can be overridden per-fetch with next.revalidate

dynamicParams

app/products/[id]/page.tsx

// Control behavior for dynamic params not in generateStaticParams
export const dynamicParams = true; // Default: generate on-demand
// export const dynamicParams = false; // Return 404 if not pre-generated

export async function generateStaticParams() {
  // Generate params for known products
  return [
    { id: '1' },
    { id: '2' },
    { id: '3' },
  ];
}

export default function ProductPage({ params }: { params: { id: string } }) {
  return <div>Product {params.id}</div>;
}

// dynamicParams = true: New products generated on first visit
// dynamicParams = false: Only pre-generated products exist

Rendering Best Practices

1. Default to Static

TYPESCRIPT

// ✅ GOOD: Let Next.js optimize
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{/* render */}</div>;
}

// ❌ BAD: Forcing dynamic unnecessarily
export const dynamic = 'force-dynamic';
export default function Page() {
  // Could be static but forced dynamic
  return <div>Static content</div>;
}

// Use static rendering by default for best performance

2. Use ISR for Semi-Dynamic Content

TYPESCRIPT

// ✅ GOOD: ISR for content that changes occasionally
export const revalidate = 3600; // 1 hour

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <div>{/* products */}</div>;
}

// ❌ BAD: Dynamic for content that rarely changes
export const dynamic = 'force-dynamic';
// Causes unnecessary server load

// ISR provides fast loads + fresh content

3. Reserve Dynamic for Personalized Content

TYPESCRIPT

// ✅ GOOD: Dynamic for user-specific data
import { cookies } from 'next/headers';

export default async function DashboardPage() {
  const userId = cookies().get('userId')?.value;
  const userData = await fetch(`/api/users/${userId}`).then(r => r.json());
  return <div>Welcome, {userData.name}</div>;
}

// Dynamic rendering justified for personalized content

4. Choose Appropriate Revalidation Times

TYPESCRIPT

// ✅ GOOD: Match revalidation to update frequency

// Blog posts: 1 hour (rarely change)
export const revalidate = 3600;

// Product prices: 5 minutes (change frequently)
export const revalidate = 300;

// News articles: 1 minute (very frequent)
export const revalidate = 60;

// Static content: never
export const revalidate = false;

// Match revalidation to your content update frequency

5. Use generateStaticParams for Known Routes

TYPESCRIPT

// ✅ GOOD: Pre-generate known routes
export async function generateStaticParams() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return products.map(p => ({ id: p.id }));
}

// Faster builds, better performance for known routes

// ❌ BAD: All routes generated on-demand
// Slower first visits, increased server load

// Pre-generate what you know, on-demand for the rest

Key Takeaways

Static (SSG) - build time, cached forever, fastest
Dynamic (SSR) - request time, always fresh, personalized
ISR - static + periodic updates, best of both
Default to static - Next.js optimizes automatically
cache: 'no-store' - opts into dynamic rendering
revalidate - time-based ISR (seconds)
Dynamic functions - cookies(), headers(), searchParams trigger dynamic
Choose wisely - match rendering to content type

What's Next?

We'll cover generateStaticParams, dynamicParams, fallback behavior, and complete static generation strategies.

⚡ Performance Tip

Test Your Understanding

Question 1 of 4

Understanding Static and Dynamic Rendering

Three Types of Rendering

1. Static Rendering (SSG - Static Site Generation)

2. Dynamic Rendering (SSR - Server-Side Rendering)

3. Incremental Static Regeneration (ISR)

Next.js Default Behavior

Static Rendering (SSG)

Fully Static Page

Static with Cached Data

Explicitly Static

When Pages Are Static

✅ Pages are Static when:

Dynamic Rendering (SSR)

Using Dynamic Functions

Using headers()

Using searchParams

Opting Out of Caching

Explicitly Dynamic

When Pages Are Dynamic

⚠️ Pages are Dynamic when:

Incremental Static Regeneration (ISR)

Time-Based Revalidation

Route Segment Config

Different Revalidation Times

ISR with generateStaticParams

Rendering Strategies by Route

Rendering Comparison

Cache Control Options

Force Cache (Static)

No Store (Dynamic)

Revalidate (ISR)

No Revalidate (Static Forever)

Revalidate 0 (Dynamic)

Route Segment Config Options

dynamic

revalidate

dynamicParams

Rendering Best Practices

1. Default to Static

2. Use ISR for Semi-Dynamic Content

3. Reserve Dynamic for Personalized Content

4. Choose Appropriate Revalidation Times

5. Use generateStaticParams for Known Routes

Key Takeaways

What's Next?

Test Your Understanding

What is Static Rendering (SSG)?

Master static and dynamic rendering in Next.js! Learn SSG, SSR, ISR, and when to use each.

Master Next.js Performance

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

NextJS Tutorials

Understanding Static and Dynamic Rendering

Three Types of Rendering

1. Static Rendering (SSG - Static Site Generation)

2. Dynamic Rendering (SSR - Server-Side Rendering)

3. Incremental Static Regeneration (ISR)

Next.js Default Behavior

Static Rendering (SSG)

Fully Static Page

Static with Cached Data

Explicitly Static

When Pages Are Static

✅ Pages are Static when:

Dynamic Rendering (SSR)

Using Dynamic Functions

Using headers()

Using searchParams

Opting Out of Caching

Explicitly Dynamic

When Pages Are Dynamic

⚠️ Pages are Dynamic when:

Incremental Static Regeneration (ISR)

Time-Based Revalidation

Route Segment Config

Different Revalidation Times