Closed7

renderToReadableStream について

7kaji7kaji

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,
  });
}
7kaji7kaji

renderToString

  • React 16 で導入
  • サーバーサイドで React コンポーネントを文字列形式のHTMLに変換する
  • レンダリングが完了するまでブロッキング (すべてのHTMLが生成された後に、クライアントに送信)
  • レンダリング全体が完了するまで待つため、大規模なアプリケーションではパフォーマンスの問題が発生する可能性がある

renderToReadableStream

  • React 18 で導入
  • サーバーサイドで React コンポーネントをストリーミング形式のHTMLに変換し、HTMLの一部ができるとすぐにクライアントに送信できるようになる
  • 非同期で処理されるため、ブロッキングはしない
  • 大規模なアプリケーションでも、パフォーマンスが向上し、TTIが短縮される
このスクラップは2023/08/31にクローズされました