Read request data once, high up, and pass it down
A cookie read inside a deeply nested component makes everything above it dynamic, or fails the build under Cache Components. Read it in the page, pass the value as a prop, and the rest of the tree can be cached.
const theme = (await cookies()).get("theme")?.value ?? "dark";
return <Shell theme={theme} />;The rule generalises: request specific reads belong at the edge, not in the leaves.
nextjsreact
Longer version: the post this came from.