<h2 id="he16b7b12c8">⚡️無限スクロールはCSR</h2><p>ユーザーのアクション（今回はスクロール）でデータ取得を行い、ページを表示させるCSR。</p><p><code>useState</code> と <code>useEffect</code> を使って無限スクロールを実装したけど、記事一覧ページから個別記事に移動して、また一覧ページに戻ると、<strong>すでに取得済みの11件目以降の記事が再度取得されてしまう</strong>。</p><p>これはNext.jsの仕様で、ページを離れるとコンポーネントの状態（<code>useState</code>など）はリセットされるため、戻ってきた時には再初期化されてしまうことが原因。</p><p>一度無限スクロールで取得したデータを取り直さないようにするには、<strong><span class="text-large">クライアントサイドで状態を保持する仕組み</span></strong>を導入する。</p><h2 id="hcd1318e753">✅ 解決方法：<code>zustand</code>や<code>Recoil</code>、<code>Redux</code>などの状態管理ライブラリを使う</h2><p>状態管理ライブラリを使用することで、ブログ一覧ページを離れて詳細ページに行っても、戻ってきたら<strong><span class="highlight">読み込んだブログ一覧は維持されたままにできる。</span></strong></p><h2 id="h3ec8ddcdcc">🧠 <code>zustand</code>の導入 &amp; 実装ステップ</h2><h3 id="hd7ea8c0b9d">1. <code>zustand</code> をインストール</h3><pre><code>npm install zustand</code></pre><h3 id="ha18b429992">2. ストアを作成（例：<code>src/store/useBlogStore.js</code>）</h3><p>⚠️Zustandの初期状態を設定する際の注意点：<br>ビルドした時、getStaticPropsですでに10件分の記事は取得されている状態。<br>Zustandの初期状態を設定する際、初期データをそのまま追加してしまうとZustandの初期状態を設定するuseEffectが走った際に、元あるデータ＋初期データが追加されてデータが重複してしまう。</p><p>そのため、取得するデータの状態を「初期時」と「追加時」と「初期化」の3つの状態を用意する。</p><p>❌状態を分けないと…<br>ビルド時にデータを10件取得<br>↓<br>useEffectでZustandの初期状態を設定（ビルド時に取得したデータをそのまま入れる）<br>↓<br>20件の重複データが表示される</p><pre><code class="language-javascript">import { create } from &quot;zustand&quot;;

const useBlogStore = create((set) =&gt; ({
  blogs: [],
  offset: 0,
  isEnd: false,
  initialized: false, 

  // 初回取得時に実行する（SSGデータセット）
  initBlogs: (initialBlogs) =&gt;
    set({
      blogs: initialBlogs,
      offset: initialBlogs.length,
      isEnd: initialBlogs.length === 0,
      initialized: true, // ← 初期化フラグを立てる
    }),

  // 無限スクロール時に実行する（新しい記事を追加）
  addBlogs: (newBlogs) =&gt;
    set((state) =&gt; ({
      blogs: [...state.blogs, ...newBlogs],
      offset: state.offset + newBlogs.length,
      isEnd: newBlogs.length === 0,
    })),
}));

export default useBlogStore;</code></pre><h3 id="h8c7ef6f8be">3.一覧ページ<code>blogs/index.jsx</code>で<code>useBlogStore.js</code>を使う</h3><pre><code class="language-javascript">import useBlogStore from &quot;src/store/useBlogStore&quot;;

export default function Blog({ data, category }) {
const { blogs, offset, isEnd, initBlogs, addBlogs, initialized } = useBlogStore();
const [loading, setLoading] = useState(false);
const observerRef = useRef();</code></pre><h3 id="h6d0c35c5d5">4. ストアに初期データをセット(初回のみ)</h3><pre><code class="language-javascript">useEffect(() =&gt; {
    if (!initialized &amp;&amp; blogs.length === 0 &amp;&amp; data.length &gt; 0) {
      initBlogs(data);//← このdataはビルド時にgetStaticPropsで取得したデータ
    }
  }, [data, blogs.length, initBlogs]);</code></pre><h3 id="h04211d5294">5. 無限スクロールで新しく取得したデータをセット</h3><p>スクロールに合わせてデータを取得するfetchMore関数。ここで新しく取得したデータをnewBlogsに入れて、状態管理化にあるaddBlogs(newBlogs)に渡す。<br>useBlogStore.jsにあるaddBlogsがこのデータを受け取り、mergeして状態を更新する。</p><pre><code class="language-javascript">const fetchMore = useCallback(async () =&gt; {
    if (loading || isEnd) return;
    setLoading(true);

    try {
      const res = await fetch(`/api/blogs?offset=${offset}&amp;limit=10`);
      const newBlogs = await res.json();
      addBlogs(newBlogs);//← スクロールして取得したデータ
    } catch (error) {
      console.error(&quot;ブログの追加取得に失敗:&quot;, error);
    } finally {
      setLoading(false);
    }
  }, [offset, loading, isEnd, addBlogs]);

//... IntersectionObserverで無限スクロールの処理が続く</code></pre><h2 id="h3d98d76ffb">✅一覧ページから記事ページへ行き、戻るボタンで一覧に戻った際にデータを再取得しなくなった</h2><p>Zustandで状態を管理することで、一度取得したデータを保持しているため、無限スクロールの処理が走らなくなった。</p><p></p><h2 id="hda0fe6edde">⭐️次の課題は戻るボタンで一覧に戻った際に、元いた位置に戻ること</h2><p>無限スクロールで11件目以降の記事一覧を取得したけれども、記事を読んで戻るとスクロール位置はトップに戻ってしまう。<br>何かデータを探している時や、次は12件目の記事を読もうと思っていた時にTOPまで戻されてしまうのはとてもストレスを感じる。</p><p><a href="/blogs/howtoback-previous-scrollspot" target="_blank" rel="noopener noreferrer nofollow">Next.js｜ブラウザバックで元のスクロール位置に戻る方法</a></p><h2 id="h805544825f">❓ビルド時とスクロールで取得する時の処理を分ける必要があるのか？</h2><p>SSGで記事一覧ページ(10件分)を作成し、クライアント側のスクロールによってクライアント側でデータ取得と分けているから複雑に感じた。</p><p>はじめからクライアントサイドで、一覧ページにアクセスした際にapiルートでデータを取得して10件表示させる。<br>そこからスクロール値に合わせて、CSR無限スクロールにしたらシンプルな構成になるのではと思った。</p><h3 id="h4d6af5edd7">それぞれの構成とメリットデメリット</h3><p>chatGPTに聞いたところ下記返答が返ってくる。</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>SSG + CSR無限スクロール</p></td><td colspan="1" rowspan="1"><p>初速が速く、SEOにも強い</p></td><td colspan="1" rowspan="1"><p>記事整合性が崩れる可能性あり（revalidate依存）</p></td></tr><tr><td colspan="1" rowspan="1"><p>SSR + CSR無限スクロール</p></td><td colspan="1" rowspan="1"><p>データ整合性がある程度保証される</p></td><td colspan="1" rowspan="1"><p>表示速度やキャッシュ性は落ちる</p></td></tr><tr><td colspan="1" rowspan="1"><p>CSR完全切替</p></td><td colspan="1" rowspan="1"><p>自由で柔軟</p></td><td colspan="1" rowspan="1"><p>SEOが効きづらい、初速が遅い</p></td></tr></tbody></table><p>CSR完全切替だとデータ取得時に時間がかかりストレスがかかるのかもしれない…。<br>データの量や画像があるなしでどう変化があり、メリットデメリットがどこまで響くのかが実際に使ってみないと分からないと感じた。</p>

ブログ一覧に無限スクロールを設置したけれどページを離れるたびに、一度取得済みのデータを取り直さないでほしい！

Next.js×microCMS｜zustandを使用して無限スクロールで取得済みデータの再取得をしないようにする

<h2 id="he89b711621">🔁 状況整理（/blogs 一覧ページ）</h2><p>Next.js×microCMSでブログ一覧ページを作成中。<br>アクセス時はSSGで、スクロールでデータを取得する時はCSRと分けている。</p><h3 id="hffddeb7e52"><span class="highlight"> 1. /blogs にアクセス</span></h3><p>ブログページにアクセスしたら、最初に表示される記事10件はSSG化されており、静的HTMLが返ってくる。</p><ul><li><code>getStaticProps</code> が実行され、リミット指定をした10件分のブログ記事が事前にビルドされる。（SSG）</li><li><code>revalidate: 30</code> により、30秒経過すると次のアクセス時にバックグラウンドで最新化される。（ISR）</li></ul><h3 id="h90c5266d30"><span class="highlight"> 2. スクロールで記事の追加読み込み(無限スクロール)</span></h3><p>初期記事10件以降の記事は、ユーザーのスクロールで新たに取得する。</p><ul><li><code>useEffect</code> や <code>IntersectionObserver</code> により、ユーザーのスクロールアクションで <code>/api/blogs?offset=10</code> にリクエストが飛ぶ。</li></ul><h2 id="h926d7ce789">⚡️疑問に思ったこと</h2><p><strong>❓疑問１｜/blogsページはSSG化されているのになぜユーザーアクションで表示できる？</strong><br>ユーザーアクションのスクロールでさらに10記事取得してるけれど、/blogsページはSSG化されているので、30秒経過しないと一覧は更新されないのでは？</p><p><strong>💡無限スクロールでの追加取得はクライアントで描画されているので表示できる</strong><br>無限スクロールで追加取得は、クライアント側でAPIを経由してリアルタイムに取得している（CSR）。そのため、ページのSSG化関係なく記事は取得され、表示される。</p><hr><p><strong>❓疑問２｜ユーザー側でデータ取得（一覧更新）ができるならISRは必要ないのでは？</strong><br>ユーザー側でAPI経由で記事一覧を更新できるなら、SSG化した/blogsページを<code>revalidate</code>で30秒ごとに最新化（ISR）は必要ないのではないだろうか。二重で更新しているように感じる。</p><p><strong>💡ISRは/blogsページ初回表示の鮮度を保つために必要！</strong><br><code>revalidate</code> は /blogsページ<strong><span class="highlight">初回表示のために必要。</span></strong><br>無限スクロールで2ページ目以降の記事を取得しても、初回の10件はSSG化された静的HTMLなので、次にアクセスしてもキャッシュからページを返す。記事が増えたとしても/blogsのアクセス時のページは古いまま。</p><p><code>revalidate</code> をつけておけば、静的にビルドされた初期データも定期的に更新される。<br></p><p><strong>補足：ISRの更新タイミング</strong><br>ISR は次のアクセス時にバックグラウンドで再生成される。指定秒経ったら即座に新しくされるわけではない。</p><ul><li>アクセスがない場合は再生成されない。</li><li>指定秒経過後の最初のアクセス時：再生成が始まる（古いまま表示される可能性あり）</li><li>次のアクセス時：再生成されたページが表示される</li></ul><hr><p><strong>❓疑問３｜</strong><code>revalidate</code><strong>をつけていても、revalidate設定時間より短い間に、1回目アクセスと2回目アクセスの間に記事が増えたら？</strong></p><p><strong>💡APIの結果の整合性（順番ズレ問題）は更新頻度次第</strong></p><p><span class="highlight">【ブログ更新頻度：低〜中（月数回〜週数回）】</span><br>通常ユーザーは一覧ページを見たら、他の記事に飛んで、読んだ後に戻ってきたりする。その間にタイミングよく新記事が投稿されて、「初期で取得した10件の記事」と「スクロールで取得した記事」との間で日付のずれが生じて困るといったことはあまり起こることではない。<br>revalidate: 30 ~ 300秒でも設定可。</p><p><span class="highlight">【 ブログ更新頻度：高い（1日複数回、あるいは自動投稿等）】</span><br>新着記事が頻繁に追加されるようなサイトでは、初期表示の10件（SSG）とその後にCSRで取得するデータの順序がずれてしまい、ユーザーに違和感を与える可能性がある。</p><p>📝このようなケースでは、次のような対策が有効：</p><p>- 初期10件もCSRで取得し、常に最新に保つ<br>- <code>revalidate</code> の時間を短くして、できるだけ新鮮な静的ページにする<br>- サーバーサイドで順番を制御した中間APIなどを用意する（上級者向け）</p><p><strong>最適な設計は、「更新頻度」「インフラコスト」「ユーザー体験」のバランスによって決めるのがベスト。</strong></p><h2 id="ha214098e44">まとめ</h2><p><strong>SSGは初回アクセスの高速化、CSRは実際の使い心地と分けて考える</strong></p><p>SSGは初回アクセスの高速化をしてパフォーマンスを上げてくれる。<br>そしてCSRは、実装したかった「無限スクロール」というユーザー（私）の使い心地を良くしてくれる。</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>初回10件表示</p></td><td colspan="1" rowspan="1"><p><code>getStaticProps</code> + <code>revalidate</code></p></td><td colspan="1" rowspan="1"><p>指定秒ごとにバックグラウンドで最新化（ISR）</p></td></tr><tr><td colspan="1" rowspan="1"><p>追加読み込み</p></td><td colspan="1" rowspan="1"><p>API + CSR<code>useEffect</code></p></td><td colspan="1" rowspan="1"><p>毎回リアルタイム取得</p></td></tr></tbody></table><p>しかし、SSGは初回表示を高速化をするために静的HTMLを返す。ビルド後にデータ更新されてもデータは古いままキャッシュから返される。<br>それを改善してくれるのがISRの設定。</p><p>そしてCSRは私たちの好みの使い方やデータ取得のタイミングを選べるけれど、API取得にはタイムラグが生じるときがある。</p><p>上記二つのメリット/デメリットを、ページの目的によって使い分けていく必要がある。</p><p>【 実際の使い方の例 】</p><p>🚀 <strong>getStaticProps</strong> は「とりあえず表示を爆速にしたい」<br>→ Topページ、記事一覧の最初の10件などに最適</p><p>🌀 <strong>CSR（useEffect や fetch）</strong> は「ユーザー操作に合わせて変化したい」<br>→ 無限スクロール、検索、絞り込み、ボタンクリックでの表示切替などに◎</p><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>getStaticProps（SSG/ISR）</p></th><th colspan="1" rowspan="1"><p>CSR（クライアントサイドレンダリング）</p></th></tr><tr><td colspan="1" rowspan="1"><p>目的</p></td><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>初回のHTMLを生成（SEO・速度◎）</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>ビルド時 or <code>revalidate</code>で再生成</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><td colspan="1" rowspan="1"><p>基本リアルタイム（API呼び出し時）</p></td></tr></tbody></table><p>その他Next.jsのレンダリング方法は下記記事を参照。</p><p><a href="/blogs/nextjs-rendering" target="_blank" rel="noopener noreferrer nofollow">Next.js のレンダリング方式まとめ｜SSG・ISR・SSR・CSR の違いと使い分け</a></p>

一覧ページをSSG化後、ISR化やCSRでのデータ取得のメリット/デメリットがよく分からなくなったので、疑問に感じたことと併せてまとめてみた。

Next.js×microCMS｜ブログ記事一覧ページをSSG＋CSR(ユーザーアクション)の時のページ生成のまとめ

<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 の違いとは？どんな時に使うの？