n番煎じな React Server Components

• Introducing Zero-Bundle-Size React Server Components – React Blog
• reactjs/server-components-demo: Demo app of React Server Components.
• https://github.com/reactjs/rfcs/pull/188
  • 現在進行形で、React Server Components の仕様（提案）に関して議論をしているプルリク
• 他の人の scraps
  • React Server Components 雑まとめ
  • React Server Componentの情報と考察が集まるスクラップ
• 日本語記事
  • React界隈で話題になっている「React Server Components」についてまとめました！ | Developers.IO
  • React Server Componentについてまとめてみた - Qiita

reactjs/server-components-demo リポジトリを動かしてみる＆コードを追いかけると、ざっくりしたことは分かる。

ちなみに動かす分には、Docker は必須ではない。たんに PostgreSQL さえ動いていれば npm run start するだけで動く。

• scripts/build.js のやってることは、これ用の Webpack 立ち上げてるだけ
• server/api.server.js は Node.js で動く Express アプリ
  • React Server Components の仕掛けは renderReactTree sendResponse 関数と app.get('/react', ... エンドポイントの3つを見れば分かる
  • 惜しいなーと思うのは /notes エンドポイントなどは、ふつーの JSON で REST な感じでつまらない
• renderReactTree は src/App.server.js を React Experimental な API を使ってサーバーサイドレンダリングしてる。ページ全体
• クライアント側の仕掛けは src/index.client.js src/Root.client.js src/Cache.client.js を追いかければ分かると思う
• react-fs や react-pg パッケージの類いは、facebook/react の master ブランチの packages/react-fs とかにあるのでそこらへん読めば分かるけど、Node.js で動く、キャッシュ込みのラッパーでしかない。client からは呼び出し不可能
• react-fetch はさすがに Node と Browser の両方に対応してるみたい。そりゃそうだ
• 将来的にはこれらパッケージが、Node と Browser それぞれのエントリポイントで動くようになったりする未来はあるのかもしれない

冬休みの宿題としては、ここまで一通りの仕組みが提供されているので、この仕組みを使って、自分なりに Node.js のコードと React の client コードをいい感じに、React Server Components というコンポーネント指向 universal ウェブ開発（という言葉があるかどうかは知らんが）で何ができるか遊んでみましょうというところですかね。

試しに、reactjs/server-components-demo リポジトリから不要な物をあれこれ削って動かしてみたり、TypeScript 化しようとしてみたんだけど、TypeScript 化は、webpack plugin や babel plugin に手を入れないとだめっぽし

あと node --conditions=react-server .... とかいうのを設定しておかないと、react-server として動いてくれない。ぴえん

わざとじゃないんだろうけど、あの手のこの手で TypeScript で動かないようになってる雰囲気がある