Complex interaction between caching, metadata boundaries, and dynamic APIs causes server-side errors.
The issue involves a hydration mismatch and header timing problem when combining cached data with dynamic APIs in Next.js. It requires understanding of Next.js rendering pipeline and metadata handling. The solution likely needs changes to how metadata boundaries interact with cached content.
https://github.com/lucianobfs/nextjs-use-cache-metadata-boundary-repro
pnpm install
pnpm build
pnpm start
http://localhost:3000/posts/1The pattern that triggers the bug (app/posts/[slug]/page.tsx):
generateMetadata() calls await connection() — required because the underlying library uses crypto.randomBytes() (e.g., Effect-TS, Prisma)"use cache" function first (cachedPostData)draftMode() and searchParams — dynamic APIs called outside the cache scope, as the docs recommendCurrent: The page renders correctly (HTTP 200), but the server logs contain two recurring errors:
Error A — Metadata boundary mismatch (most frequent): ``` Error: Expected the resume to render
Error B — ERR_HTTP_HEADERS_SENT (intermittent): ``` Error: Cannot set headers after they are sent to the client at g.setHeader (.next/server/chunks/ssr/[root-of-the-server]__*.js) { code: 'ERR_HTTP_HEADERS_SENT', digest: '1390897066' } ```
Expected: No server-side errors. The cached portion and the dynamic portion should coexist without hydration mismatches or header conflicts.
Although pages return HTTP 200, these errors cause:
Claim this issue to let others know you're working on it. You'll earn 30 points when you complete it!