メインコンテンツまでスキップ

第288章：React Server Components (RSC) の未来とHono

今回のゴール 🎯​

  • RSCって何者？（SSR/CSRとどう違うの？）を“ふわっと”じゃなく理解する🧠✨
  • Hono × RSC がなぜ相性いいのか、構成イメージを掴む🧩
  • 実際に動く雛形を触って「Server / Client の境界」を体感する🖐️💻

1) RSCって結局なに？🧸⚛️​

RSC（React Server Components）は、ざっくり言うと👇

  • サーバーで動くコンポーネント（DBアクセスや秘密鍵が必要な処理もOK🔑）
  • でも、ページ全部を“HTMLだけ”で返すのとは違って、Reactの部品情報（Flight）も一緒に運ぶタイプ
  • “サーバー”は、クライアントや普通のSSRサーバーとは別環境として扱えるよ、という位置づけ（＝設計がしやすい） (React)

2) SSR/CSR/RSCの関係を一枚で🖼️✨​

RSC Concept

ポイントはここ👇😊

  • SSRは「HTML作って返す」＋「あとでハイドレーション」
  • RSCは「サーバー側で作った“Reactの部品情報”を、ブラウザが受け取って組み立てる」イメージ（Flightって呼ばれるやつ） (Qiita)

3) “use client” が境界線 🚧🧡​

RSCの世界では、基本は Server Component（サーバー側） で、 「ここだけブラウザで動かしたい！」ってファイルにだけ "use client" を付けます✍️✨

  • ✅ Server → Client は呼べる（ページの中にボタン置く、みたいに）
  • ❌ Client → Server は呼べない（ブラウザはDB直アクセスできないよね…😇）

4) なんでHonoと相性いいの？🌩️🚀​

Honoは Web標準ベースで、Cloudflare WorkersみたいなEdgeで動かすのが得意✨ (hono.dev) RSCは ストリーミングや“サーバー側で先にやる”のが強みなので、Edgeの軽さと噛み合いやすい、って感じ💡

さらにHonoは、Reactとは別に hono/jsx や Client Components（hono/jsx/dom） っていう超軽量路線も持ってる（用途で選べるのが強い） (hono.dev)

5) まずは動かして体感しよ！💻✨（Hono + Vite + RSC 雛形）​

HonoでRSCをサクッと試せるボイラープレートが紹介されています (Zenn) ここではそのREADME通りに動かすよ〜！🍀

手順（Windows）🪟​

PowerShell（またはターミナル）で👇

git clone https://github.com/kfly8/boilerplate-hono-vite-rsc.git
cd boilerplate-hono-vite-rsc
npm install
npm run dev
  • ブラウザで http://localhost:5173 を開く（READMEにも書いてあるよ） (GitHub)

フォルダ構成（どこ見ればいい？）👀​

この雛形だと、ざっくり👇がヒント🍯

  • src/routes/ … 画面（ルーティング）
  • src/rsc/ … RSCのエントリやレンダラ（RSCの心臓部🫀） (GitHub)

6) ちょい改造：Client Component を1つ足す 🎮✨​

「押したら数字増えるボタン」みたいな、ブラウザで動くやつを作ろう！

(1) Client Component を作る​

例：src/routes/home/components/Counter.client.tsx を作って👇

"use client";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      style={{
        padding: 12,
        borderRadius: 12,
        border: "1px solid #ccc",
        cursor: "pointer",
      }}
    >
      クリック 👉 {count}
    </button>
  );
}
  • "use client" はいちばん上に置くのが大事だよ🧷✨

(2) Server Component 側（ページ）から呼ぶ​

例：src/routes/home/page.tsx（名前は雛形側と違うかもだけど、homeのpageを探してね🔍）で👇みたいに置く：

import { Counter } from "./components/Counter.client";

export default function Page() {
  return (
    <main style={{ padding: 24 }}>
      <h1>Hono × RSC 体験中 ✨</h1>
      <p>下のボタンだけ、ブラウザで動くよ〜🧡</p>
      <Counter />
    </main>
  );
}

これで「ページはサーバー寄り、ボタンはクライアント寄り」っていう 混在が体感できるはず！🥳

7) “未来”の話：HonoでRSCはどう育つ？🌱🔮​

  • HonoでRSCを使う実例・試行が出てきてて、「HonoでインタラクティブUI作るならRSCいいかも」って話もあります (Zenn)
  • 一方で、Hono系フルスタックの HonoX は「Hono + React + Vite + SSR」みたいな思想で、RSCはまだ議論・要望段階っぽい空気もあるよ（Issueが立ってる） (Qiita)

つまり今は、

  • ガチ安定運用：既にRSCを強く統合してるフレームワーク（例：Next系）
  • 軽量&自由度：Honoベースで必要なものを組む（今回みたいな雛形） この2択を、目的で選ぶ時代って感じ😌✨

8) 超大事：RSCのセキュリティ注意（2025年12月の話）🚨🧯​

2025年12月に、RSCの仕組み（Flight payloadのデコード周り）に関連した 未認証RCEの脆弱性が告知されています。Reactチームは「すぐ更新してね」と強く推奨しています (React) JPCERT/CC からも注意喚起が出ています (jpcert.or.jp)

なので当面は👇を徹底しよ🙏

  • ✅ React関連を 最新パッチへアップデート
  • ✅ RSC/Server Function系のエンドポイントを、むやみに外へ公開しない（認証・制限・WAFも検討）
  • ✅ “サンプルだからOK”で放置しない（雛形ほど危ない😇）

まとめ 🎀​

  • RSCは「サーバーでReactを組み立てつつ、必要なところだけクライアントにJSを渡す」発想✨ (React)
  • HonoはEdge適性が高く、RSCの“ストリーミング/サーバー寄り”と噛み合いやすい🌩️ (Cloudflare Docs)
  • まずは雛形で「"use client" の境界」を手で触るのが最短ルート💨 (GitHub)
  • そして今はセキュリティが特に大事！🚨 (React)

ミニ課題（5〜20分）📝✨​

  1. Counter を「+1」だけじゃなく「-1」も付ける ➖➕😊
  2. Counter の下に「偶数なら🎉、奇数なら🌀」を表示（条件分岐）
  3. Server Component側で new Date().toLocaleString() を表示して、ページ更新すると時間が変わるのを確認⌛

次の章（289章）は「認証とミドルウェア」だから、ここで掴んだ **“サーバー側でやること”**の感覚がめちゃ効いてくるよ〜😺🧡