Dynamic Server Usage Error when accessing request headers inside Server Component tree during static generation

[Jordid]

Summary

Hi team,

I am facing an issue during the production build (next build) of my App Router application.

I have a deeply nested Server Component that reads authentication state via headers() or cookies(). However, whenever the build process attempts to statically generate (SSG) the route segment, the compilation aborts with the following error trace:

Plaintext
Error: Dynamic server usage: headers / cookies
at Page (./app/dashboard/page.tsx:14:18)
at Digest: 219830198
I tried wrapping the component tree inside a custom Boundary, but the static worker still fails during trace evaluation. Is there a way to opt out of static generation for this specific route segment without converting the entire layout or downstream components into Client Components ('use client')?

Additional information

No response

Example

No response

[icyJoseph]

In the normal App Router mode, pages are static or dynamic. You can't fully statically prerender a page, if some part of the UI depends on runtime data, such as cookies.

Is there a way to opt out of static generation for this specific route segment without converting the entire layout or downstream components into Client Components ('use client')?

You'd need in this case, to do `export const dynamic = 'force-dynamic', but now this page, that seems to be mostly static, has been forced to be dynamic, which is not ideal.

This is something that Cache Components solves. Is it possible for you to at least try to adopt Cache Components and see how it works? You'd need to wrap that Component with Suspense, and then everything else around it can be prerendered at build time into a static shell.

[christianalberto]

Hi! This happens because Next.js attempts to statically pre-render (SSG) the route by default during next build, but reading dynamic request data like cookies() or headers() forces the component to require request-time evaluation.

You don't need to convert anything to Client Components ('use client'). You just need to explicitly tell Next.js to treat this route segment as dynamic by adding the route segment config option at the top of your page.tsx or layout.tsx:

TypeScript
// app/dashboard/page.tsx
import { cookies } from 'next/headers';

// 1. Force dynamic rendering for this route
export const dynamic = 'force-dynamic'; 

export default async function DashboardPage() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Token Status: {token ? 'Authenticated' : 'Guest'}</p>
    </div>
  );
}

Adding export const dynamic = 'force-dynamic' instructs the Next.js compiler to bypass static generation during next build and render the page dynamically on every request.