[dynamicIO] No longer possible to set dynamic <html> attributes. I18n is broken. Framework solution needed. #71927
-
Next.js v15+ with dynamicIO enabledAfter the change to pass all dynamic data ( Since accessing dynamic data requires a
Caution Filling a cache during prerender timed out like because request specific arguments such as params, searchParams, cookies() or dynamic data was used inside the "use cache". These are all expected behavior, however one very important use case feels impossible to implement; Internationalization. Basically this entire documentation page is obsolete. The following code is no longer valid: export async function generateStaticParams() {
return [{ lang: 'en-US' }, { lang: 'de' }]
}
export default function Root({ children, params }) {
return (
<html lang={params.lang}>
<body>{children}</body>
</html>
)
}This is very unfortunate. And similarly you cannot set the Failed attempts to fix the problem
Hacky workaroundTo fix the I first set a client cookie in the middleware. Then I read the cookie value and modify the element synchronously, suppressing hydration warnings on the export default function Layout({ children }) {
return (
<html suppressHydrationWarning={true}>
<head>
<script>{langCode}</script>
</head>
<body>{children}</body>
</html>
);
}Where const code = `(${() => {
const cookies = String(document.cookie);
const pos = cookies.indexOf('__Host-Lang=');
if (pos > -1) {
const endPos = cookies.indexOf(';', pos);
const cookieValue = cookies.slice(pos + 12, endPos > -1 ? endPos : undefined);
document.documentElement.lang = cookieValue;
document.documentElement.dir = ['ar', 'fa', 'he', 'ps', 'ur'].includes(cookieValue.slice(0, 2)) ? 'rtl' : 'ltr';
}
}})();`;
// The code should be injected in the page before any other script so it runs before React hydration
export default code;Unfortunately, this doesn't solve situations when the language depends on outside data (e.g. an article from a CMS). Or if you want to change the language without resorting to full-page navigation. Solution neededI don't know what a React-native or Next.js-native solution for this problem could look like. To me it feels more of a framework oversight than something that React should address. So, a solution from Next.js seems more appropriate. Some have suggested adding attributes support in Maybe some kind of middleware api could handle all this. I don't know... The |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
The main thing that's currently missing is the flag (It will also be possible to use a Suspense boundary above html but that's not the best solution since it makes the whole page dynamic.) |
Beta Was this translation helpful? Give feedback.
-
|
Maybe it would be useful to have a way to do This would nicely enable things like this: export function Page({ params }) {
const static = await params.get('static')
return (
<>
<div>static: {static}</div>
<Suspense>
<DynamicComponent promise={params.get('dynamic')}/>
<Suspense>
</>
)
}
export function generateStaticParams() {
return [{ static: 'foo' }]
} |
Beta Was this translation helpful? Give feedback.
The main thing that's currently missing is the flag
dynamicParams = false. You'll notice that this is disabled indynamicIObecause we have plans for a different alternative. Once that's in then you'll be able to await the params without a Suspense boundary since they will all be known statically (fromgenerateStaticParams).(It will also be possible to use a Suspense boundary above html but that's not the best solution since it makes the whole page dynamic.)