next build fails with Dynamic server usage on a page that calls fetchContent
Added fetchContent to a route that also uses generateStaticParams and the build now fails during prerendering:
Error: Dynamic server usage: Page couldn't be rendered statically because itused `headers`. See more info here:https://nextjs.org/docs/messages/dynamic-server-errorThe route is one of our statically generated article pages. We prerender a few thousand of them, so I would like to keep that. Is there a way to reconcile fetchContent with static generation or are these two just incompatible
1 answer
They are incompatible by design, and the error is telling the truth: fetchContent reads the incoming request (that is where the headers usage comes from), so it cannot run during static prerendering. There is no request at build time to personalize against. A route that calls it must render dynamically.
So it is a per-route decision:
-
Keep the route static and personalize client-side. Move the personalized section into a client component island that uses useContent, and let the article shell stay prerendered. The static HTML ships from the cache and the island resolves after hydration.
-
Drop static generation for that route and let it render dynamically, if the personalization is important enough above the fold to justify it.
For a few thousand article pages, option 1 is usually the right call: keep generateStaticParams, prerender the articles, and personalize the one section that needs it in an island.
More background on the mechanism in fetchContent forces dynamic rendering.
Went with option 1, build is green again and the articles stay prerendered. Thanks for explaining where the headers usage came from.