🎭 Next.js Rendering Configuration

The Kitchen That Cooks Your Website

Imagine your website is a restaurant. When customers (users) order food (request a page), how does the kitchen prepare it?

• Static Rendering = Pre-cooked meals ready in the fridge 🧊
• Dynamic Rendering = Fresh-cooked to order 🍳
• Partial Prerendering = Some pre-made, some fresh 🥗
• Edge Runtime = Mini kitchens everywhere, close to customers 🌍
• Node.js Runtime = The main big kitchen with all tools 🏭

Let’s explore each one!

🧊 Static vs Dynamic Rendering

Static Rendering: The Frozen Pizza Approach

Think of static rendering like making frozen pizzas at a factory.

How it works:

1. You bake all the pizzas ONCE (at build time)
2. Store them in freezers everywhere
3. When someone orders, just microwave and serve!

Real example:

// This page is STATIC by default
// Next.js bakes it once, serves forever
export default function AboutPage() {
  return (
    <div>
      <h1>About Our Company</h1>
      <p>We make cool stuff!</p>
    </div>
  );
}

When to use static:

• Blog posts
• About pages
• Documentation
• Product pages that rarely change

Benefit: Super fast! The page is already ready.

Dynamic Rendering: The Fresh Chef

Think of dynamic rendering like a chef cooking your order fresh.

How it works:

1. Customer orders (user visits page)
2. Chef cooks right then (server builds page)
3. Serve hot and fresh!

Real example:

// This page is DYNAMIC because
// it checks cookies (user-specific data)
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userToken = cookies().get('token');
  const data = await getUserData(userToken);

  return <div>Hello {data.name}!</div>;
}

What makes a page dynamic?

• Using cookies() or headers()
• Using searchParams (URL query strings)
• Fetching data with cache: 'no-store'

🥗 Partial Prerendering (PPR)

The Best of Both Worlds!

Imagine a restaurant that pre-makes the salad base but adds fresh toppings when you order.

Partial Prerendering does exactly this:

• Static parts load INSTANTLY (the shell)
• Dynamic parts load as they’re ready (the fresh data)

graph TD
    A["User Visits Page"] --> B["Static Shell: INSTANT!"]
    B --> C["Header shows immediately"]
    B --> D["Layout shows immediately"]
    B --> E["Dynamic parts loading..."]
    E --> F["User data appears"]
    E --> G["Live prices appear"]

How to use it:

// Enable in next.config.js
const nextConfig = {
  experimental: {
    ppr: true
  }
};

Then wrap dynamic parts with Suspense:

import { Suspense } from 'react';

export default function ProductPage() {
  return (
    <div>
      {/* This part is STATIC - instant! */}
      <h1>Super Cool Product</h1>
      <img src="/product.jpg" />

      {/* This part is DYNAMIC - loads after */}
      <Suspense fallback={<p>Loading price...</p>}>
        <LivePrice productId="123" />
      </Suspense>
    </div>
  );
}

The magic: Users see something FAST, then details fill in!

🌍 Edge Runtime: Mini Kitchens Worldwide

What is the Edge?

Imagine instead of ONE big restaurant downtown, you have tiny food trucks everywhere in the city.

• Customer in Tokyo? 🍣 Serve from Tokyo truck!
• Customer in Paris? 🥐 Serve from Paris truck!
• Customer in New York? 🗽 Serve from NYC truck!

That’s Edge Runtime! Your code runs on servers close to users.

graph TD
    A["User in Brazil"] --> B["Edge Server in São Paulo"]
    C["User in Japan"] --> D["Edge Server in Tokyo"]
    E["User in Germany"] --> F["Edge Server in Frankfurt"]
    B --> G["Super Fast Response!"]
    D --> G
    F --> G

How to use Edge Runtime:

// Add this to your page or route
export const runtime = 'edge';

export default function FastPage() {
  return <div>I run on the Edge!</div>;
}

Edge is FAST but has limits:

• ✅ Perfect for: Auth, redirects, simple APIs
• ❌ Cannot use: File system, some Node.js features
• ⚡ Runs in milliseconds, not seconds

🏭 Node.js Runtime: The Full Kitchen

The Main Headquarters

While Edge is like food trucks, Node.js Runtime is your main restaurant with:

• Full kitchen equipment
• All ingredients
• Every tool you need

This is the DEFAULT in Next.js!

// This uses Node.js Runtime by default
export default async function HeavyPage() {
  // Can access file system
  const data = await readFile('./data.json');

  // Can use any Node.js library
  const processed = await heavyComputation(data);

  return <div>{processed}</div>;
}

When to use Node.js Runtime:

• Database connections
• File operations
• Heavy computations
• When you need full Node.js APIs

Explicitly set it:

export const runtime = 'nodejs';

⚙️ Segment Config Exports

The Control Panel

Think of Segment Config Exports as the control switches in your kitchen:

graph TD
    A["Your Page File"] --> B["Config Exports"]
    B --> C["runtime: Where to cook?"]
    B --> D["dynamic: Cook fresh?"]
    B --> E["revalidate: How often refresh?"]
    B --> F["fetchCache: Save ingredients?"]

All the Config Options:

1. runtime - Choose your kitchen

export const runtime = 'edge';    // Fast food trucks
export const runtime = 'nodejs';  // Full kitchen

2. dynamic - Control caching behavior

// Always dynamic (fresh cooking)
export const dynamic = 'force-dynamic';

// Always static (pre-made)
export const dynamic = 'force-static';

// Let Next.js decide (auto)
export const dynamic = 'auto';

// Error if dynamic features used
export const dynamic = 'error';

3. revalidate - How often to refresh?

// Refresh every 60 seconds
export const revalidate = 60;

// Never refresh (fully static)
export const revalidate = false;

// Always fresh (dynamic)
export const revalidate = 0;

4. fetchCache - Control fetch caching

// Force all fetches to cache
export const fetchCache = 'force-cache';

// Force all fetches to be fresh
export const fetchCache = 'force-no-store';

5. preferredRegion - Where to run?

// Run closest to these regions
export const preferredRegion = ['iad1', 'sfo1'];

// Run everywhere
export const preferredRegion = 'auto';

// Run at one location
export const preferredRegion = 'home';

Complete Example:

// page.jsx with all configs

// Run on Edge, close to users
export const runtime = 'edge';

// Make it dynamic
export const dynamic = 'force-dynamic';

// Prefer these regions
export const preferredRegion = ['iad1', 'fra1'];

export default function MyPage() {
  return <div>Configured perfectly!</div>;
}

🎯 Quick Decision Guide

🏆 Remember This!

1. Static = Pre-baked 🍪 Fast but same for everyone
2. Dynamic = Fresh-cooked 🍳 Personalized but takes time
3. PPR = Hybrid 🥗 Static shell, dynamic filling
4. Edge = Nearby 🌍 Close to users, limited tools
5. Node.js = Full power 🏭 All features, one location
6. Config Exports = Control panel ⚙️ Fine-tune everything

You now understand how Next.js decides when and where to cook your pages! 🎉

The secret to fast websites? Choose the right rendering for each page!