メタフレームワーク＆ハイブリッド — Next.js / Nuxt / Astro（RSC・Server Actions）
📖 このページのゴール：メタフレームワークが「描画戦略（SPA/SSR/SSG）をページごとに混ぜられる全部入り」だと分かる。とくに 「Reactの一部がバックエンドで動く」（React Server Components・Server Actions）の正体が腹落ちする。 ← 目次・はじめにへもどる
🧩 メタフレームワークって何？（🟢 基礎）
これまで見た SPA（ブラウザ描画）／SSR（サーバー描画）／SSG（作り置き） は、それぞれ一長一短でした。「ページごとに、いいやり方を選びたい」——そのワガママを叶えるのが メタフレームワーク です。
メタフレームワーク＝React や Vue の上に乗っかって、ルーティング（ページの振り分け）・SSR/SSG・データ取得・最適化などを全部まとめて面倒みてくれる“土台”。
| メタフレームワーク | 土台 | ひとことで |
|---|---|---|
| Next.js | React | いちばん人気。SSR/SSG/CSR を自在に混ぜる |
| Nuxt | Vue | Vue 版の Next.js 的存在 |
| Astro | 何でも（React/Vue/素のHTML） | 基本は静的で爆速。後述の「アイランド」が得意 |
そして「ページごとに描画方法を混ぜる」ことを ハイブリッド と呼びます。トップは SSG（速い）、商品ページは SSR（最新在庫）、管理画面は SPA、のように適材適所にできます。
🌗 本題：「Reactの一部がバックエンドで動く」とは（🟢 基礎）
ここが、いちばん分かりにくくて、いちばん面白いところです。むかしの常識はこうでした。
- フロント（React）＝ブラウザで動く。サーバーとは別物。
ところが Next.js（App Router） が広めた React Server Components（RSC＝リアクト・サーバー・コンポーネント） は、この常識をくつがえします。
コンポーネント（画面の部品）の一部を、ブラウザではなく“サーバーで”実行できる。
これが「Reactの一部がバックエンドで動く」の正体です。何がうれしいのか——
- 🔒 DBアクセスや、秘密のAPIキーを使う処理を、サーバーで動く部品に書ける。秘密がブラウザに出ません（姉妹教材の「鍵を守る」が、フロントの書き方の中で自然に守れる）。
- ⚡ 重い処理やデータ取得をサーバーで済ませ、ブラウザには“結果のHTML”だけ届く。ブラウザに送るJSが減って軽くなる。
- 🧩 サーバーで動く部品（サーバーコンポーネント）と、ブラウザで動く部品（クライアントコンポーネント＝ボタンや入力など“動く”所）を、1つの画面の中で混ぜて書く。
さらに Server Actions（サーバーアクション） を使うと、フォーム送信などの処理を、サーバー側の関数として直接書けます。「ボタンを押したらサーバーのこの関数が動く」を、APIを自分で作らずに書ける——フロントとバックの境目が、どんどん溶けていくわけです。
🍱 たとえ：お弁当屋さんの厨房（サーバー）とカウンター（ブラウザ）。むかしは「厨房は厨房、接客は接客」と完全に分かれていました。RSC は、“厨房で仕込んだ部品”と“カウンターで動く部品”を、同じお弁当箱に詰めるイメージ。お客さん（ブラウザ）には完成品が届き、レシピ（秘密）は厨房に残ります。
🏝 Astro の「アイランド（islands）」（🔧 応用）
Astro は別のアプローチで人気です。アイランド・アーキテクチャ＝ページの大部分は“ただの静的HTML”（最速）にしておき、動きが要る所だけを“島（island）”としてJSを効かせる。「ページ全体をReactで動かす」のではなく、「動かしたい所だけ部分的に動かす」ので、とても軽い。ブログやメディアのように「ほぼ読み物＋一部だけインタラクティブ」に最適です。
👍 向いている / 👎 向かない
| 👍 強い | いいとこ取り（SEO＋初回速度＋アプリ的操作）・秘密をサーバー側で扱える・適材適所で最適化・いま実務の主流 |
| 👎 注意 | 「この部品はサーバー？ブラウザ？」を意識する難しさ・概念が多く学習コスト高め・小さなサイトには大げさなことも |
🏢 誰が使う？
モダンなスタートアップ〜大企業の主力。「Reactを使うなら、最初から Next.js」という現場も多いです。一方、個人のブログ/LPなら、軽い Astro（SSG） が気持ちよく作れます。
🟢 ひとことで言うと
メタフレームワーク（Next.js/Nuxt/Astro）＝描画戦略をページごとに混ぜられる全部入り。目玉は RSC／Server Actions＝“Reactの一部をサーバーで動かす”こと。これで秘密をサーバーに置きつつ、速くて動くUIが作れます。フロントとバックの境目が溶けていく、いまのフロントエンドの中心地です。
➡️ 次へ
ここまでで「何で作る」「どこで描画する」が一通り見えました。次章では、それらを支える裏方の道具——ビルドツール（Vite）とホスティングを押さえます（姉妹編「コンピューティングの選択肢」とつながります）。