Remix は RSC にどう対応するのか

@mizchi

Remix Tokyo 2024/09/25

About

そろそろ Remix で RSC したくない?

export default async function MyPage() {
  const data = await fetch('/api/data')
  return <div>{JSON.stringify(data, null, 2)}</div>
}
  • 非同期関数コンポーネントで非同期データ解決
  • サーバーからデータが折りたたまれたストリームを転送

Remix 側のスタンス

https://remix.run/blog/remix-v2 (2023/09/15)

(Google翻訳) 要約すると、Remix v3 で RSC のサポートを追加することに私たちは楽観的であり、複数のフレームワークでこのテクノロジーを証明する取り組みに積極的に参加したいと考えています。RSC の機能は興味深いものですが、Remix v2 は現在の安定した React 機能に依存しており、この記事の執筆時点では RSC は含まれていません。RSC が安定したら、Remix でサポートされることを期待できます。

Remix RSC の現状認識

  • remix@3 = react-router@7 らしい (vite plugin 化)
  • Remix自体が頑張るのではなく、Vite v6 の EnvironmentAPI に依存
  • 👉 vite の RSC 対応側を追う必要がある

remix-run/remix のコード読んできた

そもそもの RSC の実装方法 (2024/09/16)

export default async function MyServerEntryPage() {
  return <>
    <MyServerComponent />
    <MyClientComponent /> <!-- このコンポーネントを展開するチャンクは何? -->
  </>
}

React Flight Protocol の例

alt text
参考: https://scrapbox.io/mrsekut-p/React_Flightのフォーマット

フレームワークごとのRSC対応

  • Next.js: react-server-dom-webpack, react-server-dom-turbopack
    • ビルド時にコンポーネントとチャンクの対応を解決して埋め込む
    • sebmarkbage(React のメインメンテナ、現 Vercel) が実装
  • dai-shi/waku
    • dai-shi さんの謎のパワーで対応(すごい)
  • Vite
    • 1年前 cyco130/vite-rsc Webpack 版をハックする形で試験実装
    • vite-rsc を元に react-server-dom-vite の PR (Closed)
    • 要約: 「vite v5 の内部変更で忙しいから一旦クローズするわ」

Vite 側の RSC 対応 - EnvironmentAPI

  • v5: SSR プロセスのための Runtime API を導入
    • vite.loadSsrModule(...)server.moduleGraph.getModuleByUrl
  • v6: RuntimeAPI => EnvironmentAPI で責務を再定義
    • (Experimental)
    • モジュールグラフのキャッシュを管理するのが Vite 本体の責務
    • 実行環境ごとの node/deno/worked 等へのアダプタを用意

https://ja.vitejs.dev/guide/api-environment.html

Remix RSC 視点の EnvironmentAPI

  • RSCの対応チャンク払い出し処理を vite/module-runner あたりの中間キャッシュ問い合わせで実装しそう?
    • vite:ModuleRunner
    • vite:ModuleEvaluator
  • サーバープロセスで ReactFlightProtocol を喋る
  • クライアントプロセスで ReactFlightClient を受け取る

で、結局俺達の Remix RSC 実装は?

  • まだない!!!!
  • 準備が整ったので、しばし少し待て。待てない人は、自作しよう!
  • Vite ベースの他ライブラリも同概念の SC 実装するのではないか?という期待
    • Astro/Vue/Svelte/Qwik

おわり