Reactはどこで終わるのか？
React・フレームワーク（Next.js）・サーバー・ビルドツール。それぞれの責任境界を地図として整理します。
🗺️ 全体像：4つのレイヤー
JSX変換 / モジュールバンドル / 最適化 / Tree shaking / コード分割
ルーティング / SSR・SSG / データフェッチ規約 / キャッシュ / Server Actions / ミドルウェア
コンポーネントのレンダリング / state管理 / 再レンダリング / Reconciliation / Hooks / Suspense
DOM操作 / 描画（レイアウト・ペイント） / イベント処理 / Web APIs
⚛️ Reactが担当する範囲
Reactの責任は明確です。「stateをDOMと同期する」こと、それだけです。
コンポーネントのレンダリング
JSX → React要素 → Fiberツリー
Reconciliation
前回のツリーとの差分計算（diffアルゴリズム）
DOMへの反映
commit phaseで最小限のDOM操作
Hooks
state管理・副作用・コンテキストのAPI提供
Suspense
データ待機中のローディングUI表示制御
エラーバウンダリ
レンダリングエラーのキャッチ・フォールバック表示
🌐 フレームワークが担当する範囲
Next.jsなどのフレームワークはReactを使いながら、Reactが担当しない領域を提供します。
Next.jsの場合
use serverディレクティブはReact側だが、通信の実装はフレームワーク側。 Server Componentsはどちらの責任？
React Server Components（RSC）のコンセプト・APIはReact自身が定義します（use server/use clientディレクティブ）。
しかし実際のHTTPリクエスト・レスポンスの処理、バンドル方法、デプロイ環境などはフレームワーク（Next.js等）の責任です。
🏗️ ビルドツールが担当する範囲
ビルドツールはReactとは完全に独立した層です。 Reactの実行前に動く「変換・最適化パイプライン」です。
<div> → React.createElement('div') への変換（ビルド時） 💡 「Reactの外」を意識した設計
Reactの責任範囲を理解していると、「これはReactで解決すべきか、フレームワークで解決すべきか」の判断ができます。
Q: ユーザーの認証情報をどう保持するか？
→ Reactの外（サーバー・クッキー・JWT）
Q: ページ間のデータ共有をどうするか？
→ URLやサーバーキャッシュ（フレームワーク） or Reactのstate
Q: ボタンをクリックしたらUIを変えたい
→ React（state更新）
Q: APIからデータを取得したい
→ Reactの外（SWR・React Query・Server Components）
Q: 複数コンポーネントで状態を共有したい
→ Reactのcontext or 外部状態管理（Zustand等）
📌 まとめ
- ✓ React：「stateをDOMと同期する」——それだけ
- ✓ フレームワーク：ルーティング・SSR・キャッシュ・データフェッチ規約
- ✓ ビルドツール：JSX変換・バンドル・最適化（Reactとは独立した層）
- ✓ Server Componentsのコンセプトはreact、実装はフレームワーク
- ✓ 「どのレイヤーの問題か」を特定することで、適切な解決策を選べる