Почему модуль WebAssembly, выполняемый внутри веб-воркера, приводит к утечке памяти при использовании с промежуточным прJavascript

Форум по Javascript
Ответить
Anonymous
 Почему модуль WebAssembly, выполняемый внутри веб-воркера, приводит к утечке памяти при использовании с промежуточным пр

Сообщение Anonymous »

Я работаю с WebAssembly и Next.js, чтобы обмениваться состоянием между сервером и клиентом.
Однако я сталкиваюсь с несоответствием гидратации, когда память 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}


);
}
Next.js выдает в консоли предупреждение о несоответствии гидратации

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

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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»