🧭 Day 11 — Dynamic Rendering (SSR): Real-Time Data

Zero to Hero — Hands-on Next.js Tutorial

Yesterday was about Static (Build time). Today is about Dynamic (Request time).

Sometimes you can’t prerender a page.

• A dashboard that shows the logged-in user’s name.
• A search results page based on query params.
• A page using random data or headers (GeoIP).

🟦 1. How to opt-out of Static?

Next.js is smart. It switches to Dynamic Rendering automatically if you use a “Dynamic Function” or “Dynamic Data Fetch”.

Dynamic Functions:

• cookies(), headers()
• searchParams prop in a Page

Dynamic Data Fetch:

• fetch('...', { cache: 'no-store' })
• fetch('...', { next: { revalidate: 0 } })

If you use ANY of these in your page components, the entire route becomes dynamic.

🟩 2. Testing Dynamic Rendering

Let’s make a “Random Quote” page that changes on every refresh.

// src/app/quote/page.tsx

async function getQuote() {
  // cache: 'no-store' = NEVER cache this. Always fetch fresh.
  const res = await fetch('https://api.quotable.io/random', { cache: 'no-store' });
  return res.json();
}

export default async function Page() {
  const quote = await getQuote();
  
  return (
    <div>
      <h1>Random Wisdom</h1>
      <blockquote>{quote.content}</blockquote>
      <p>- {quote.author}</p>
      <p>Generated at: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

If you reload this page, the time and quote will change every single time. That’s SSR (Server-Side Rendering).

🟧 3. Force Dynamic

You can also force a page to be dynamic using Route Segment Config.

export const dynamic = 'force-dynamic';
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

export default function Page() { ... }

Use this if you are reading data from a DB directly (e.g., Prisma) and Next.js is accidentally caching it statically.

🧪 Challenge: Day 11

1. Create a page /time.
2. Display the current server time (new Date().toISOString()).
3. Run npm run build and npm start.
4. Visit the page. Refresh. Does the time change?
5. If not (it’s static!), add export const dynamic = 'force-dynamic'.
6. Rebuild and check again. Now it should tick!

See you tomorrow for Streaming & Suspense (Making SSR feel fast)! 🌊