momotech_blog

レンダリング手法の違い

レンダリング手法

🖥️ SSR（Server‑Side Rendering／サーバーサイドレンダリング）

📄 SSG（Static Site Generation／静的サイト生成）

🔄 ISR（Incremental Static Regeneration／インクリメンタル静的再生成）

🌐 CSR（Client‑Side Rendering／クライアントサイドレンダリング）

🔀 ハイブリッド／その他のパターン

パターン特徴
SSG ＋ CSR静的生成後、必要な箇所だけ CSR で動的にデータをフェッチ
SSR ＋ CSR初回は SSR、ユーザー操作以降は CSR で更新
プレビュー モードCMS と連携し、ビルドせずにリアルタイムでプレビュー用のページを SSR で表示
On‑Demand ISRAPI 経由で任意のタイミングに静的ページを再生成

選び方のポイント

マウントとは

マウント（Mount） は、React のコンポーネントが 初めてブラウザの DOM 上に表示される 一連の流れを指します。具体的には以下のステップです。

  1. 📄 仮想 DOM の生成
    • React コンポーネントの JSX をもとに、メモリ上に「仮想 DOM（Virtual DOM）」を作成します。
  2. 🌐 実際の DOM への反映
    • React が仮想 DOM を比較・検証し（差分検出）、必要な箇所だけをブラウザの実際の DOM に書き込みます。
  3. 🔗 ライフサイクルメソッド（フック）の実行
    • コンポーネントが DOM に置かれた直後に、componentDidMount（クラスコンポーネント）や useEffect(..., [])（関数コンポーネント）といった「マウント時の処理」が一度だけ呼び出されます。
  4. 🎯 インタラクティブな準備完了
    • イベントハンドラ（onClick など）や state 更新機能が DOM 要素に結びつき、ユーザー操作を受け付けられる状態になります。

なぜ「マウント」を意識するか？

まとめ

💧 Hydration（ハイドレーション）とは

サーバーサイドレンダリング（SSR）で返された静的な HTML に、クライアント側の React が「リアクティブな振る舞い（イベントハンドラや state の管理）」をあとから “水を含ませる” ように注入する処理のこと。

❓ なぜ必要か？

🔄 Hydration の流れイメージ

  1. 🌐 ブラウザが /order ページを開く

  2. 🏗️ Next.js サーバーが HTML を組み立てて送信

  3. 📄 ブラウザが静的なマークアップを描画

    この段階ではまだ React のイベントは動かない

  4. ⚡ JavaScript が読み込まれ、React が Hydrate 開始

    「この HTML は自分のものだ！」と再認識

  5. 🎁 React が各要素に onClick や useState をひも付け

    ページがインタラクティブに動作するようになる

🔑 ポイントまとめ

👤プロフィール


プロフィールアイコン

青木 日菜子

2024年10月に転職し、フロントエンドエンジニアとして React/Next.js を用いたモダンな Web 開発に従事。 現在はバックエンドにも視野を広げ、SQL の学習を継続中。

趣味は「おうちカフェ」。コーヒーメーカーで淹れたカフェオレを片手に、読書やテレビ鑑賞を楽しむ時間が至福。