Closed7
renderToReadableStream について
renderToReadableStream の docs
remix のテンプレートで生成されるデフォルトの実装が renderToString
から renderToReadableStream
に変わっていた。
app/entry.server.tsx
/**
* By default, Remix will handle generating the HTTP Response for you.
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
* For more information, see https://remix.run/docs/en/main/file-conventions/entry.server
*/
import type { EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToReadableStream } from "react-dom/server";
export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const body = await renderToReadableStream(
<RemixServer context={remixContext} url={request.url} />,
{
signal: request.signal,
onError(error: unknown) {
console.error(error);
responseStatusCode = 500;
},
}
);
if (isbot(request.headers.get("user-agent"))) {
await body.allReady;
}
responseHeaders.set("Content-Type", "text/html");
return new Response(body, {
headers: responseHeaders,
status: responseStatusCode,
});
}
renderToString
- React 16 で導入
- サーバーサイドで React コンポーネントを文字列形式のHTMLに変換する
- レンダリングが完了するまでブロッキング (すべてのHTMLが生成された後に、クライアントに送信)
- レンダリング全体が完了するまで待つため、大規模なアプリケーションではパフォーマンスの問題が発生する可能性がある
renderToReadableStream
- React 18 で導入
- サーバーサイドで React コンポーネントをストリーミング形式のHTMLに変換し、HTMLの一部ができるとすぐにクライアントに送信できるようになる
- 非同期で処理されるため、ブロッキングはしない
- 大規模なアプリケーションでも、パフォーマンスが向上し、TTIが短縮される
今回は、Remix で Mantine という UI Component を使いたいが、renderToReadableStream を使うのは無理かも?
renderToString での実装例
以下の例でも React 18 を使っているが、renderToString を用いて実装されている
参考コメント、issue
同様の問題?を解決している例
このパッケージを使うことで簡単に解決できるっぽい。
このスクラップは2023/08/31にクローズされました