Server-Side Rendering

What this module covers

4 steps · Next.js

1. Step 1. Server-Side Rendering (SSR)

   When you opt out of caching, Next.js renders the page fresh on every request — perfect for personalized or real-time data. // Force dynamic on every request const res = await fetch(url, { cache: 'no-store' }); // Or page-level opt-out export const dynamic = 'force-dynamic'; import { cookies, headers } from 'next/headers'; export default async function Dashboard() { const token = cookies().get('auth-token'); if (!token) redirect('/login'); const user = await getUserFromToken(token.value); return <div>Welcome, {user.name}</div>; } Decision matrix: SSG for blog posts/docs/marketing pages and infrequently-changing data (use ISR); SSR for dashboards, account pages, real-time prices, and anything depending on cookies/headers.

   "force-dynamic" and cache: "no-store" both tell Next.js the same thing — skip the cache, render this fresh on every single request, exactly what a dashboard or a live price needs. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does the page opt out of caching for fresh data on every request?

2. Step 2. Quiz: Server-Side Rendering (SSR)

   Answer these questions about SSR, cookies, and when to choose it.

   no-store/force-dynamic disable caching; cookies() and headers() from next/headers read request data server-side; SSR suits personalized, per-user pages. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Answer the quiz below.

3. Step 3. Cookie-Gated Dashboard

   Create a /dashboard page that reads an auth cookie server-side. If no cookie, redirect to /login. If present, show a personalized greeting.

   This runs entirely on the server before any HTML reaches the browser — an unauthenticated visitor never even receives the dashboard markup, unlike a client-side redirect that would flash the page first. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does the page check the cookie and redirect when it's missing?

4. Step 4. Mini project: Server-Side Rendering

   Create a /dashboard page that reads an auth cookie server-side. If no cookie, redirect to /login. If present, show a personalized greeting. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   This runs entirely on the server before any HTML reaches the browser — an unauthenticated visitor never even receives the dashboard markup, unlike a client-side redirect that would flash the page first. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [Next.js] Does the page check the cookie and redirect when it's missing?