Open10
HonoでReact Server Components (RSC)をする
ピン留めされたアイテム
kobaken@vitejs/plugin-rsc を利用するのが今は良さげ。
kobaken
これをキッカケに始めてみた。
kobakenRSCとは？
- 本家: https://react.dev/reference/rsc/server-components
- 抜群にわかりやすかった記事: https://tonyalicea.dev/blog/understanding-react-server-components/
簡潔に解釈した内容はこう。
- RSCはSSRとCSRそれぞれの長所短所をつなぐハイブリッド機能。具体的には、コンポーネント情報をバックエンドとフロントエンドでやりとりするための仕組み（RSC Payload）を通じて、次の２つの機能を実現してる。
- SSRされたコンポーネントにインタラクティブにする
- クライアントからサーバー側で定義されたアクションを呼び出す（サーバーアクション）
kobakenRSC Payloadの雰囲気を、すでにRSC実装がなされている Next.js, Wakuを眺めて感じてみる。
- Next.js の場合
- Waku の場合
-
self.__next_fやself.__FLIGHT_DATAに、payloadデータが入ってる - これを実現するのに、React リポジトリに、react-server-dom-webpack, react-server-dom-turpopackといったトランスパイラー向けのパッケージが用意されている。これをメタフレーム側では利用すれば良さそう。
- Next.js は、react-server-dom-turpopack と このRSC Payload生成くんあたりが肝っぽい。
- Wakuは、react-server-dom-webpack と rsc-html-stream を組み合わせて、streamにRSC Payloadデータをinjectionしているよう。
- Vite の対応はEnvironment APIの対応待ちだった為、まだReactリポジトリに入っていない
- PR は挙がってる https://github.com/facebook/react/pull/33152
- この実装元は、@hiogawa/vite-rsc
kobaken雰囲気実装した
実装の状況:
- SSRされたコンポーネントをインタラクティブにする
- サーバーアクション
- インテグレーション / tailwindcss
- 細かな動作確認
どうやって実装した？
-
@hiogawa/vite-rsc を利用
- rsc-html-stream を利用したサンプル実装が用意されてるので、それを参考にガチャガチャした
- ただこれを実装仕切るには、Viteにも詳しくなる必要がありそう。一旦、現時点の状態で公開する。
kobakenサーバーアクションで用意したserver-counterが、
別コンポーネントのSuspenseが解決した後、DOM構造が代わってDOMの更新できなくなるようだ。
kobaken読む