Zenn
Closed1

React Fizz/Flightメモ

laisolaiso

Packages

  • react-dom
  • react-server
  • react-server-dom-webpack

ReactDOMServer

  • Browser系とNode系の対になる実装がある
    • Streams APIの差異吸収
// ブラウザで動く時は https://developer.mozilla.org/en-US/docs/Web/API/Streams_API
export type Destination = ReadableStreamController;

export function writeChunk(
  destination: Destination,
  chunk: PrecomputedChunk | Chunk,
): void {
  destination.enqueue(chunk);
}

// Nodeで動く時は https://nodejs.org/api/stream.html
export type Destination = Writable;

export function writeChunk(
  destination: Destination,
  chunk: Chunk | PrecomputedChunk,
): void {
  const nodeBuffer = ((chunk: any): Buffer | string); // close enough
  destination.write(nodeBuffer);
}
  • 実行される環境によって切り替わる
    • ReactDOMServerNode -> ReactFizzServerNode -> ReactServerStreamConfigNode
    • ReactDOMServerBrowser -> ReactFizzServerBrowser -> ReactServerStreamConfigBrowser
    • ❓ 実装がどうやって差し変わっているのか
  • ❓ React 18でBrowser側もStreams APIを使うようになった?

Mini Example

src/react/fixtures/fizz-ssr-browser/index.html
async function render() {
    let controller = new AbortController();
    let response;
    try {
        let stream = await ReactDOMServer.renderToReadableStream(
            <html>
            <body>Success</body>
            </html>,
            {
                signal: controller.signal,
            }
        );
        response = new Response(stream, {
            headers: { 'Content-Type': 'text/html' },
        });
    } catch (x) {
        response = new Response('<!doctype><p>Error</p>', {
            status: 500,
            headers: { 'Content-Type': 'text/html' },
        });
    }

    let blob = await response.blob();
    let url = URL.createObjectURL(blob);
    let iframe = document.createElement('iframe');
    iframe.src = url;
    let container = document.getElementById('container');
    container.innerHTML = '';
    container.appendChild(iframe);
}
render();

ReactFizzServer

  • 🤔 hydrateとfizzの対比ではないか
  • 🤔 DOMじゃなくてFizzという単位を返すので分離しているのでは
  • ReactDOMFizzServer -> ReactFizzServer の依存
  • Requestを受け入出力のストリームへworkerがバッファを書き込んで非同期に処理する

ReactFizzHooks

  • ReactFizzServer内部イベント時に呼び出されている
  • ❓ stateを分離するため?

React Flight

  • プロトコル、データ構造部分を含むコードネーム
  • React Flight Serverのバイディングとしてreact-server-dom-webpackがある
  • RSCでは特定のエンドポイントからHTTPでJSONを受け取りClientが画面に描画する
  • ❓ FizzとFlightの関係は?

ReactModelJSONValue

ReactModel

ReactModelObject

  • ReactModelをkey: valueで持つオブジェクト
このスクラップは2023/03/26にクローズされました