<h2 id="h7ef41f099b">📝Next.jsのレンダリング（生成）パターン</h2><p>Next.jsの記事生成のパターンをまとめ。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>パターン</p></th><th colspan="1" rowspan="1"><p>説明</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>SSG（Static Site Generation）</strong></p></td><td colspan="1" rowspan="1"><p>完全な静的生成。HTMLは一度だけビルド時に生成。変更は再ビルドで反映。</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>SSR（Server Side Rendering）</strong></p></td><td colspan="1" rowspan="1"><p>毎回リクエスト時にHTMLを生成。getServerSideProps を使用。</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>ISR（Incremental Static Regeneration）</strong></p></td><td colspan="1" rowspan="1"><p>revalidate オプションを使うことで、一定時間ごとに静的HTMLを再生成可能。</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>CSR（Client Side Rendering）</strong></p></td><td colspan="1" rowspan="1"><p>ページはJSでクライアント側で描画され、HTMLは最小限。</p></td></tr></tbody></table><h2 id="he7dc9e6ba2">レンダリング方式（SSG、SSR、ISR、CSR）の<strong>メリット・デメリット</strong></h2><p>Next.jsのレンダリング方式にはそれぞれメリットデメリットがある。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>パターン</p></th><th colspan="1" rowspan="1"><p>メリット</p></th><th colspan="1" rowspan="1"><p>デメリット</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>SSG（Static Site Generation）</strong></p></td><td colspan="1" rowspan="1"><p>・高速：ビルド時に生成されたHTMLをそのまま返すので表示が速い<br>・SEOに強い（完全なHTML）<br>・CDNキャッシュが効きやすい</p></td><td colspan="1" rowspan="1"><p>・頻繁に更新されるページには不向き<br>・データが古くなりやすい（再ビルドが必要）<br>・ページ数が多いとビルド時間が長くなる</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>SSR（Server Side Rendering）</strong></p></td><td colspan="1" rowspan="1"><p>・毎回最新のデータでレンダリング可能<br>・SEOにも強い（HTMLを返す）<br>・ユーザーごとの内容に対応しやすい（認証など）</p></td><td colspan="1" rowspan="1"><p>・表示速度が遅くなることがある（サーバー負荷）<br>・キャッシュが効きにくい<br>・サーバーコスト・インフラ管理が増える</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>ISR（Incremental Static Regeneration）</strong></p></td><td colspan="1" rowspan="1"><p>・SSGの速度＋データの自動更新が可能<br>・表示速度と鮮度のバランスが良い<br>・CDN対応も可能でスケーラブル</p></td><td colspan="1" rowspan="1"><p>・バグったときに「古いページがキャッシュされたまま」になるリスク<br>・ユーザーによっては古い内容を一時的に見る可能性がある</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>CSR（Client Side Rendering）</strong></p></td><td colspan="1" rowspan="1"><p>・動的コンテンツに強い（SPAに向いている）<br>・APIベースで柔軟に構成可能<br>・ページ間の遷移が速くなる</p></td><td colspan="1" rowspan="1"><p>・初回表示が遅い（JSが読み込まれるまで表示されない）<br>・SEOが弱くなる（クローラーはJSを完全に理解できない場合がある）<br>・JSエラーで真っ白になるリスク</p></td></tr></tbody></table><h2 id="h2538350eef">SSG、SSR、ISR、CSRそれぞれの基本挙動</h2><h3 id="ha93f6e9eb4">📝 <strong>SSG（Static Site Generation）の基本挙動</strong></h3><p>SSG化すると、ページのビルド時にサーバーサイドで<strong>静的HTML</strong>が生成される。<br>リロード時も、CDNなどを介して生成済みのHTMLがそのまま返ってくる。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>タイミング</p></th><th colspan="1" rowspan="1"><p>起こること</p></th></tr><tr><td colspan="1" rowspan="1"><p>ビルド時</p></td><td colspan="1" rowspan="1"><p>getStaticProps＋(getStaticPaths)が実行され、静的HTMLが生成</p></td></tr><tr><td colspan="1" rowspan="1"><p>アクセス時</p></td><td colspan="1" rowspan="1"><p>事前に生成済されたHTMLが即座に返される（CDNキャッシュ経由） or 条件により再生成</p></td></tr><tr><td colspan="1" rowspan="1"><p>更新時</p></td><td colspan="1" rowspan="1"><p>コードやデータを変更 → 再ビルドが必要（再デプロイ）</p></td></tr></tbody></table><pre><code class="language-javascript">export const getStaticProps = async () =&gt; {
  const data = await fetchData();// 別コンポーネントでデータを取得
  return {
    props: { data }, // ページコンポーネントに渡すprops
  };
};</code></pre><h3 id="h93c3741095">📝<strong>ISR（Incremental Static Regeneration）基本挙動</strong></h3><p>SSGの派生。<br>Next.jsが提供する「静的生成（SSG）＋ 動的な再生成」を組み合わせた仕組み。</p><p><strong>ページを事前にビルドしておくけど、必要に応じてあとから自動で再生成できる</strong><br>→ <code>getStaticProps</code> に <code>revalidate</code> をつけることで実現。</p><p><code>revalidate</code>時間を設定することで、<strong>アクセス時にバックグラウンドで静的HTMLを自動再生成</strong>できる。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>タイミング</p></th><th colspan="1" rowspan="1"><p>起こること</p></th></tr><tr><td colspan="1" rowspan="1"><p>ビルド時</p></td><td colspan="1" rowspan="1"><p><code>getStaticProps</code> が実行され、初回の静的HTMLを生成</p></td></tr><tr><td colspan="1" rowspan="1"><p>アクセス時</p></td><td colspan="1" rowspan="1"><p>生成済みHTMLが返る（再生成されていない場合）</p></td></tr><tr><td colspan="1" rowspan="1"><p>revalidate経過後のアクセス</p></td><td colspan="1" rowspan="1"><p>表示はキャッシュ → 裏で<code>getStaticProps</code>が実行され、次回アクセスで新HTMLが配信される</p></td></tr></tbody></table><pre><code class="language-javascript">export const getStaticProps = async () =&gt; {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // 60秒ごとに再生成（次のアクセス時に）
  };
};</code></pre><h3 id="hd294c8934e">📝<strong>SSR（Server-side Rendering）の基本挙動</strong></h3><p>毎回リクエストがあるたびに、サーバー側でHTMLを生成して返す。getServerSideProps を使用。<br>リアルタイム性が必要なページに適している。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>タイミング</p></th><th colspan="1" rowspan="1"><p>起こること</p></th></tr><tr><td colspan="1" rowspan="1"><p>アクセス時（毎回）</p></td><td colspan="1" rowspan="1"><p><code>getServerSideProps</code> が実行され、サーバーでHTMLを生成して返す</p></td></tr><tr><td colspan="1" rowspan="1"><p>キャッシュ</p></td><td colspan="1" rowspan="1"><p>基本なし（毎回サーバーに負荷）</p></td></tr><tr><td colspan="1" rowspan="1"><p>ユーザー別データ</p></td><td colspan="1" rowspan="1"><p>表示内容をユーザーごとに出し分け可能（ログインなど）</p></td></tr></tbody></table><pre><code class="language-javascript">export const getServerSideProps = async () =&gt; {
  const res = await fetch(&quot;https://api.example.com/blogs&quot;);
  const data = await res.json();

  return {
    props: { data },
  };
};

export default function Blog({ data }) {
  return &lt;div&gt;{data.title}&lt;/div&gt;;
}</code></pre><h3 id="h85f8b93b44">📝CSR（Client-side Rendering）<strong>の基本挙動</strong></h3><p>クライアントサイド（ブラウザ）でJavaScriptがデータを取得して、DOMを描画する方式。<br>Next.js では useEffect でAPIから取得するなど。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>タイミング</p></th><th colspan="1" rowspan="1"><p>起こること</p></th></tr><tr><td colspan="1" rowspan="1"><p>初回アクセス時</p></td><td colspan="1" rowspan="1"><p>HTMLはほぼ空（Loading状態）、JSが読み込まれた後に表示</p></td></tr><tr><td colspan="1" rowspan="1"><p>データ取得</p></td><td colspan="1" rowspan="1"><p>ブラウザ側でAPIなどからフェッチして描画</p></td></tr><tr><td colspan="1" rowspan="1"><p>SEO</p></td><td colspan="1" rowspan="1"><p>JS実行前は中身がないため、SEOにやや弱い（工夫が必要）</p></td></tr></tbody></table><pre><code class="language-javascript">import { useEffect, useState } from &quot;react&quot;;

export default function Blog() {
  const [data, setData] = useState(null);

  useEffect(() =&gt; {
    fetch(&quot;https://api.example.com/blogs&quot;)
      .then((res) =&gt; res.json())
      .then((json) =&gt; setData(json));
  }, []);

  if (!data) return &lt;div&gt;Loading...&lt;/div&gt;;

  return &lt;div&gt;{data.title}&lt;/div&gt;;
}</code></pre><h2 id="h6356bbf039">⭐️まとめ</h2><p>それぞれのレンダリング方法に、カスタマイズの柔軟さやメリットデメリットがある。<br>そのページの目的に合わせたレンダリング方法を選ぶと良い。</p>

SSG / ISR / SSR の違いとは？どんな時に使うの？

SSR

Next.js のレンダリング方式まとめ｜SSG・ISR・SSR・CSR の違いと使い分け