В маршрутизаторе приложений Next.js: файл cookie, установленный в действии сервера, недоступен во время первоначального ⇐ Javascript

[Anonymous]

Я столкнулся с неожиданным поведением файлов cookie в Next.js при установке файла cookie внутри действия сервера и попытке прочитать его во время первоначального рендеринга клиентского компонента. Действие сервера выполняется успешно, и файл cookie появляется в хранилище браузера, но во время первого рендеринга клиентский компонент считывает пустое или отсутствующее значение.
я получаю такое сообщение

Код: Выделить всё

Server rendered value: "theme: light"
Client rendered value: "theme: undefined"
Hydration failed because the initial UI does not match what was rendered on the server.

setTheme.ts

Код: Выделить всё

'use server';
import { cookies } from 'next/headers';
export async function setTheme() {
const cookieStore = cookies();
cookieStore.set('theme', 'dark', {
path: '/',
});
}

layout.tsx

Код: Выделить всё

import './globals.css';
import ThemeWidget from '@/components/ThemeWidget';

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (



{children}


);
}

ThemeWidget.tsx

Код: Выделить всё

'use client';

import { useEffect, useState } from 'react';

export default function ThemeWidget() {
const [theme, setTheme] = useState(null);

useEffect(() => {
const value = document.cookie
.split('; ')
.find(c => c.startsWith('theme='))
?.split('=')[1];

setTheme(value ?? null);
}, []);

return theme: {theme};
}

Вопрос
Почему файл cookie, установленный в действии сервера, недоступен во время первоначального рендеринга клиента в маршрутизаторе Next.js?
Среда
- Next.js: 15.0.0
- React: 18.3.1
- Node.js: 20.11.1

Подробнее здесь: https://stackoverflow.com/questions/798 ... uring-init