Dynamic root layout with cacheComponent #85936
Replies: 2 comments 2 replies
-
|
As far as I understand, the whole root layout should be wrapped in I haven't tried that out yet though, would be curious about your findings. |
Beta Was this translation helpful? Give feedback.
-
|
You can support dynamic cookies (like The root layout itself must be wrapped in a Suspense boundary.Cache Components require all async boundaries to stream, and the root layout is no exception. If your layout is reading cookies, then it’s already async — which means it must be suspended by something above it. Because nothing sits above the root layout, the only solution is to wrap the entire layout tree in Suspense inside // app/layout.tsx
import { Suspense } from "react";
export default function RootLayout({ children }) {
return (
<html>
<body>
<Suspense fallback={null}>
<RootLayoutInner>{children}</RootLayoutInner>
</Suspense>
</body>
</html>
);
}
// async component that reads cookies
async function RootLayoutInner({ children }) {
const locale = (await cookies()).get("locale")?.value ?? "en";
return (
<html lang={locale}>
{children}
</html>
);
}Why this works
TL;DRMake the root layout sync, and move all async logic (cookies, fetch, locale) into a child layout wrapped in Suspense. |
Beta Was this translation helpful? Give feedback.
-
|
That's pretty cool, I need to try this out when I find some time! But I guess the double |
Beta Was this translation helpful? Give feedback.
-
|
The problem with these approaches is that the page will render empty contents or something as the first render then it streams the actual layout, which causes a flash effect or layout shift. My current solution is to provide an async component to the fallback which actually delays the first load. something like this : The root layout is a special one and this is hacky |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
With cacheComponent enabled, how to read cookies like locale in order to set the lang attribute on html element ?
The problem is that with cache components enabled, all async components should be wrapped with suspense in order to enabled streaming.
But this might not be possible when the root layout it self is an async component and suspense fallback it self should read cookie value.
@amannn Do you have a solution for this ?
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions