今更RSCについてのお話 Full RSC vs RSC as Data Next.jsとTanStack Start比較

Transcript

1. 今更RSCについてのお話 Full RSC vs RSC as Data Next.jsとTanStack Start比較 in Funabashi.dev 2026/4/18
2. 多摩川駅周辺住み 社内システムを改修したり、インフラを作ったり、APIを生 やしたり...etc をやっていた２代目無職 趣味：#トンチキ技術グッズを作ったり 河村 直樹（@iwonder118） 自己紹介
3. なぜ今なのか C(lient)S(ide)R(endering)を強く打ち出していたTanStackが、今週RSC対応を出してきた https://tanstack.com/start/latest
4. このLTのきっかけ これを見て「どうやら棲み分けがあるっぽいぞ」と思い気になった
5. 前提 - 今回のLTでTanStackを触っているのでそこら辺は初心者 - Next.jsは2年ぐらいの経験 - Reactは何もわからん状態
6. React Server Componentとは 複雑、分かりづらいと呼ばれる諸悪の根源(嘘) サーバ側でReactコンポーネントを評価して、その結果をクライアントへ送る仕組み Reactのコンポーネントツリーを、Flightという仕組みでクライアントに渡して合成する ブラウザ サーバ サーバコンポーネントを解 釈 Flight
7. React Server Componentとは - メリット - サーバアクセスや秘匿性のあるデータをクライアントに持ってこなくてよい - ブラウザから直接APIを叩かないので、データ取得の経路を短くしやすい - 手元のデバイスよりサーバ間での通信のほうが早い - 必要なところだけclient componentに切り出せる - SSRよりJS量が少なくなる - デメリット - どこまでがserverでどこからがclientかを常に意識する必要がある - ブラウザ側の状態や副作用(クエリパラメータ、Cookieなどへのアクセス)はclient componentに逃がす必要がある - インタラクティブなUIは結局client componentが必要 - モーダルとか
8. SSRとRSCの違い SSRはサーバ側でレンダリングをしてHTMLを返す その後にクライアント側でJavaScriptがハイドレーションをして、画面を構築 RSCはサーバ側でレンダリングをして、評価結果をReact Flightで返す クライアント側で差分変更をして画面を構築 CSRで全て行っていたもののうち、一部サーバで行える評価部分をサーバに移した物 SSR ブラウザ HTML JS レンダラ HTML サーバ RSC ブラウザ レンダラ React Flight React サーバ
9. 同じような TODOアプリで比較 Next.js版 TanStack Start版 AIに作らせました...
10. Next.jsのReact Flight __next_f部分がRSCで飛んでくる部分 (※初期表示の評価のためにHTMLに入っている) testでgrep
11. Next.jsでは RSC部分での変化があるたびに差分が飛んできて差し替わっている
12. TanStack Startでは $R[22]でgrep 後ろに引っ付いているscript内でリンクす る streamの部分がRSC $RSC部分がRSC部分(※初期表示の評価のためにHTMLに入っている) 構造が結構違う（というか独自）
13. TanStack Startでは testでgrep $_TSR部分がstream部分(※初期表示の評価のためにHTMLに入っている) 構造が結構違う（というか独自）
14. TanStack Startでは
15. TanStack Startでは Server Function のがRSCの返却を内包しているのでServer Functionの返答が 帰ってきている
16. 比較 Client Component ブラウザ サーバー Server Component Router / Client UI (Client Component) Next.js TanStack Start 見え方 データとしての Server Component - Next.js: RSCはアプリ全体の標準実装面 - TanStack Start: RSCはrouter/data layerが扱うデータの一種 境界線
17. なぜ違うのにできるのか 人が書いたJSXをReactが解釈して、レンダラー によって出力するものが変わっている 人 HTML JSX サーバ Fiber Tree React評価部分 仮想 DOM etc… React Element フレーム ワーク Flight etc… レンダラー クライアント React部分
18. まとめ 同じRSCなのにアプローチが違う Next.jsでのRSCはアプリを構築する手段として、扱うデータの関心事によっての棲 み分けのため TanStack StartではRSCをrouter/data layerが扱うデータとして応用して、クライア ント部分のサポート でもその柔軟性ができるのが、Reactが宣言的なUIの記述ライブラリであり、抽象 的な表現を用いているため
19. ご清聴ありがとうございました
20. 宣伝 ついにやります！！ 5/1 (金) 19:30~ 僕が船橋に来れているのでみんなの 参加待ってます
21. 宣伝② 2026/5/9
22. 宣伝③ 5/14(木)、5/15(金)　すでに650名ぐらいの参加登録！
23. 宣伝④