Однако я сталкиваюсь с несоответствием гидратации, когда память WebAssembly инициализируется внутри клиентского компонента, который запускается после гидратации.
Код: Выделить всё
// app/components/WasmCounter.client.tsx
'use client';
import React, { useEffect, useState } from 'react';
export default function WasmCounter() {
const [count, setCount] = useState(null);
useEffect(() => {
(async () => {
const memory = new WebAssembly.Memory({
shared: true,
initial: 1,
maximum: 1,
});
const response = await fetch('/counter.wasm');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.instantiate(buffer, { env: { memory } });
const { increment } = module.instance.exports as any;
const result = increment(41);
setCount(result);
})();
}, []);
return WASM Count: {count};
}
// app/layout.tsx
import "./globals.css";
import WasmCounter from "./components/WasmCounter.client";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
Код: Выделить всё
Warning: Text content did not match. Server: "WASM Count: " Client: "WASM Count: 42"
но в этом случае сервер даже не выполняет код WebAssembly, это делает только клиент.
Даже в этом случае Next.js, похоже, обрабатывает пустое значение useState по-разному, возможно, из-за использования SharedArrayBuffer.
Вопрос:
Почему инициализируется WebAssembly.Memory с общим: true внутри клиентского компонента вызывает несоответствие гидратации в Next.js 15. Связано ли это с тем, как модель гидратации React обрабатывает ссылки SharedArrayBuffer или с тем, как Next.js сериализует выходные данные сервера?
Подробнее здесь: https://stackoverflow.com/questions/798 ... -when-used
Мобильная версия