rshono で簡単にRSCを使おう

rshonoでRSCを簡単に使いましょう

Transcript

1. React Tokyo rshono で RSC を簡単に使おう！ 1 / 14
2. 谷口昂太郎（merino） 大学生 普段は、個人開発しながら就活中！ 最近はOSSにも取り組んでます！ React: 最近はRSCにハマってエコシステムや思想など勉強中です！ 2 / 14
3. 避けてない？ RSC で RSC アンチの話が、たびたび話題に React2Shell（CVE-2025-55182） デバッグしづらい サーバーとクライアントの境界が曖昧で、事故が起きやすい X 3 / 14
4. でも悪いのは RSC なのか？ 嫌われているのは、たいてい Next.js App Router の使いにくさ 4 / 14
5. RSC 自体は何が良い？ として優秀 データフェッチコロケーション バンドルサイズを削減できる Server Actions が便利 BFF 5 / 14
6. rshono = Hono + Rspack + RSC を Hono の Subapp として載せる、ミニマルなライブラリ。 やることは、ルートを defineRoutes で書くだけ。 RSC 6 / 14
7. 嬉しいのはこの3つ シンプル！ 既存の Hono アプリに、そのまま載せられる ルーティングを選ぶ必要がない 7 / 14
8. rshono の性能 指標 初回 payload rshono Next.js 60.4 kB 162.3 kB Cold build 533 ms 3.50 s Dev cold start 508 ms 1.53 s Prod install 72.8 MB 291.1 MB 依存パッケージ 16 22 。 回・1マシン（M1）の計測で ±10% 未満はノイズ。速さの差は主 ）。 rshono 1.0.0-rc.20 / hono 4.13.5 / Next.js 16.2.12 / React 19.2.8 1 HTTP React rshono benchmarks 2026-09-03 に 層（同じ ）。出典： 公式 （ 8 / 14
9. サンプルコード サーバ routes.ts // defineRoutes: URL と、その URL で描くページの対応を定義する export const routes = defineRoutes({ routes: [{ path: '/', component: () => import('./pages/home') }], }); クライアント 1 Pager.tsx 'use client'; // useNavigation: いまの URL と、URL を書き換えて再取得する router を返す export function Pager() { const { router } = useNavigation(); return <button onClick={() => router.push('?page=2')}>Next</button>; } 2 9 / 14
10. Waku と何が違う？ 共通点：RSC 前提のミニマル・Hono・暗黙キャッシュなし rshono Waku コンセプト RSC ファースト RSC ファースト 責務の範囲 最小（Hono アプリは自分） 規約・Adapter まで持つ ルーティング 明示的な表（1種類） 既定はファイル、表も可（3種類） 既定の描画 dynamic（Static も可） static（Dynamic も可） サーバー Hono の Subapp 独自 Adapter（内部で hono/tiny） History API ナビゲーション Navigation API RSC の粒度 ページ（Static も選べる） ページ・レイアウト・Slice（Dynamic も） 細かい最適化 不向き（ページ単位） 可（Slice で部分化） 10 / 14
11. シンプルさの代償 はページ単位。リクエストごとに細かく最適化できない 細かく最適化したい用途には向かない 利用例が少ない RSC 11 / 14
12. 是非使ってみてください！ 12 / 14
13. ご清聴ありがとうございました！ rshono ドキュメント 13 / 14
14. P.S. @Laph さん のスレッドで紹介されていた suraido.jsを、今回の発表に使わせてもらいました！ 使い心地最高です！ありがとうございました。 React Tokyo 14 / 14