Dynamic Rendering (Opting Out)

How request-specific functions force routes out of the static cache.

Next.js5 min readConcept 29 of 65

The Poison Pill

Dynamic rendering means a page is generated on the server at the exact moment a user requests it, rather than being pre-built.

In Next.js, this happens automatically when you use a Dynamic Function like cookies(), headers(), or searchParams. These functions act as a 'poison pill' — the moment Next.js detects them during the build, it aborts static generation for that route.

Unknowable Data

Next.js aggressively tries to build everything statically for maximum performance. However, some data is impossible to know ahead of time.

You cannot know what a user's session cookie is, or what they will type into a search bar (?query=test), until they actually make the HTTP request.

Automatic Detection

You do not need to manually configure { cache: 'no-store' } to make a route dynamic.

Simply importing and calling import { cookies } from 'next/headers'; cookies().get('session'); in a Server Component is enough to transition the entire route from Static to Dynamic.

The Poison Pill

Hover over the code snippets. Notice how standard Server Components result in a Static Route (Full Route Cache), but the moment you introduce cookies(), Next.js detects the 'poison pill' and forces the route out of the cache.

page.tsx

import { cookies } from 'next/headers';
export default async function Page() {
// Normal DB Fetch
const data = await db.query();

return <div>...</div>;
}

Next.js Pipeline

Origin
FULL ROUTE CACHE
Static HTML
+ RSC
User
INSTANT
ON-DEMAND

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which of the following will automatically force a route to become dynamically rendered?
  2. 2You have a fast, static blog. You add `headers()` to the root `layout.tsx` to read the user-agent. What happens?

Remember this

  • Dynamic rendering occurs when a page is built at request-time.
  • cookies(), headers(), and searchParams act as 'poison pills'.
  • Calling a dynamic function automatically opts the route out of the static cache.
  • Be careful: adding a dynamic function to a layout can accidentally de-optimize your whole app.
  • Next.js 15's Partial Prerendering (PPR) aims to solve this by mixing static shells with dynamic holes.

Done with this concept?

Mark it complete to track your progress. No login needed.