<h2 id="h58fdde1ddc">🌀無限スクロール便利だと思ったら、見落としていた不便さが</h2><p>無限スクロールで記事をたくさん一覧表示できるので、スムーズに知りたい情報に辿り着けそうと設置直後はワクワクしました。</p><p>しかし実際使ってみたところ、すごく不便な部分が発覚。</p><p>一覧ページから子ページ（記事詳細ページ）に飛んで、内容を確認してやっぱり違う記事を読もうと思いブラウザバックすると、記事一覧のトップページに出戻ってしまった…⚡️</p><p>これではスクロールで記事をたくさん探せても、読むたびに振り出しに戻る「無限スクロール地獄」になってしまう。</p><h2 id="h32bfc70864">✅スクロールY位置をセッション保存して解決</h2><p>目的は 「現在のページから子ページへ遷移 → 戻ってきたときのみスクロール位置を復元」 を実現すること。<br>まずはカスタムフックを作成していく(hooks/useScrollRestoration.jsx)。</p><h3 id="hdf44798eca">① <code>useRouter</code> で現在のページのルート情報を取得</h3><pre><code class="language-javascript">const router = useRouter();</code></pre><p>これにより、現在のパス（pathname）などの情報にアクセスでき、ルーティングイベントにも対応可能に。</p><h3 id="hdff25eeb0f">② 親ページでマウント時にスクロール位置を保存する処理を設置</h3><pre><code class="language-javascript">useEffect(() =&gt; {
  const handleRouteChangeStart = () =&gt; {
    const currentY = window.scrollY;
    sessionStorage.setItem(key, currentY);
  };

  router.events.on(&quot;routeChangeStart&quot;, handleRouteChangeStart);
  return () =&gt; {
    router.events.off(&quot;routeChangeStart&quot;, handleRouteChangeStart);
  };
}, [router, key]);</code></pre><ul><li>router.events.<span class="highlight">on</span><code>routeChangeStart</code> イベントでページ遷移直前に実行されるように設定。</li><li>router.events.<span class="highlight">off</span><code>routeChangeStart</code> イベントのクリーンアップ。</li><li><code>window.scrollY</code> で現在の縦スクロール位置を取得し、<code>sessionStorage</code> に保存。</li></ul><h3 id="h3100973a14">③ ページがマウントされたときにスクロール位置を復元</h3><pre><code class="language-javascript">useEffect(() =&gt; {
  if (!isReady) return;
  const savedY = sessionStorage.getItem(key);
  if (savedY !== null) {
    const y = parseInt(savedY, 10);
    if (!isNaN(y)) {
      window.scrollTo(0, y);
      sessionStorage.removeItem(key); // ✅ 一度復元したら消す
    }
  }
}, [key, isReady]);</code></pre><ul><li><code>sessionStorage</code> に保存されているスクロール位置を取得し、<code>window.scrollTo</code> で復元。</li><li>一度復元したら、値を即座に削除することで <strong>リロードや他のページ遷移で再度適用されるのを防ぐ</strong>。</li></ul><h3 id="ha5dc5f56d5">🎉 <strong>結果</strong></h3><ul><li><strong>「親ページ → 子ページ → 戻る」</strong>というルートでのみスクロール位置が復元される。</li><li><strong>「他ページに行く、リロードする、URL直打ちする」</strong> などでは復元されず、初期状態に。</li></ul><p>これで安心して記事を読んだら一覧ページに戻ってくることが可能に🙌</p><h2 id="hd337dd8605">⚡️元のスクロール値に戻った時に、「Loading」UIが一瞬見える…？</h2><p>一難去ってまた一難…予期せぬことばかり。</p><p>子ページから元のページに戻った時、一瞬「Roading」と表示されてその後に記事一覧が表示される。これはスクロール値に合わせてデータ取得させている「無限スクロール」の処理が再度走っているということ。</p><p>一瞬なのであまり気にならないかもしれないけれど、一度取得したデータをもう一度取得するのは手間に感じます。</p><p>対応する方法は次の記事に。</p><p><a href="/blogs/stop-rendering" target="_blank" rel="noopener noreferrer nofollow">zustandを使用して無限スクロールで取得済みデータの再取得をしないようにする</a></p>

記事一覧を無限スクロールにしたけれど、記事から一覧に戻ったらスクロールがTOPに戻るのを解決

Next.js×microCMS｜ブラウザバックや戻るボタンで元のスクロール位置に戻る方法

<h2 id="h5ab13b7315">⚡️新しく取得した記事にアクセスしたら404エラーに</h2><p>ブログ記事一覧ページに無限スクロールを設置。</p><p>最初のアクセス時、10件分はSSGで静的HTMLを生成して表示して、11件目以降はユーザーのスクロールで取得する機能を実装。</p><p><span class="highlight">しかし、11件目以降の記事にアクセスすると404が表示された。</span></p><h2 id="hdf9bc7d661">✅原因はfallbackの設定</h2><p>getStaticPathsの設定で<code>fallback: false</code>にしていたことが原因。<br>ビルド時getStaticPathsで取得したデータに存在しなかったページは作られず、アクセスしても404になるとのこと。</p><pre><code class="language-javascript">export const getStaticPaths = async () =&gt; {
  const data = await getBlogDetail();

  const paths = data.contents.map((content) =&gt; `/blogs/${content.id}`);

  return { paths, fallback: false};
};</code></pre><p>ビルド後に動的ページにアクセスしたいなら<strong><span class="highlight">fallbackの設定が重要</span></strong>。</p><p>fallbackは、まだ生成されていないページにアクセスされたときの挙動を決めるオプション。</p><h2 id="hede87d6ba4">fallbackの設定を変えて解決🎉</h2><p><code>fallback: false</code>→<code>fallback: &quot;blocking&quot;</code>に変更すると初回アクセスでも表示された。</p><p><u>🔵blockingの挙動</u><br>ユーザーがアクセスするとサーバーがアクセスしたページをSSG化してくれる。<br>SSG化している間画面には何も表示されず、完了しだい該当ページが表示される。</p><pre><code class="language-javascript">export const getStaticPaths = async () =&gt; {
  const data = await getBlogDetail();

  const paths = data.contents.map((content) =&gt; `/blogs/${content.id}`);

  return { paths, fallback: &quot;blocking&quot; };
};</code></pre><h2 id="h4d13ded214">🔁fallback の3つの設定</h2><p>fallbackには下記3つの設定があり、それぞれの挙動が異なる。</p><table><tbody><tr><th colspan="1" rowspan="1"><p style="text-align: center">設定</p></th><th colspan="1" rowspan="1"><p style="text-align: center">挙動</p></th><th colspan="1" rowspan="1"><p style="text-align: center">特徴</p></th><th colspan="1" rowspan="1"><p style="text-align: center">注意点</p></th></tr><tr><td colspan="1" rowspan="1"><p>false</p></td><td colspan="1" rowspan="1"><p>ビルド時に定義されたパスのみSSG化。存在しないページは<strong>404</strong></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>true</p></td><td colspan="1" rowspan="1"><p><strong>ユーザーがアクセスした時に初めてSSG化</strong>。ローディングUIが必要</p></td><td colspan="1" rowspan="1"><p>初回アクセス時に動的に生成</p></td><td colspan="1" rowspan="1"><p><code>useRouter().isFallback</code> による分岐が必要</p></td></tr><tr><td colspan="1" rowspan="1"><p>blocking</p></td><td colspan="1" rowspan="1"><p>アクセス時にサーバーでSSG化。完了するまで<strong>何も表示されない</strong></p></td><td colspan="1" rowspan="1"><p>SSRのような挙動。ローディング不要</p></td><td colspan="1" rowspan="1"><p>初回アクセスがやや遅い可能性あり</p></td></tr></tbody></table><p>blockingの設定にした場合、もし取得するデータ量が多いと表示までにタイムラグがある。<br>表示されるまで画面は真っ白な状態になってしまうため、その場合は「ローディング中です」などのローディングUIを準備すると良い💡</p><h2 id="h7b7bf1c3af">⭐️fallback:trueにしてローディングUIを作る場合</h2><p><code>useRouter</code> の <code>router.isFallback</code> を使ってローディングUIを表示させる。</p><p>fallback: true のときは、まだ静的に生成されていないページにアクセスされると、<strong>最初はpropsが渡ってこない</strong>状態でページが表示され始める。</p><p style="text-align: start">その間は router.isFallback が true になるので、それを使って「ローディング中」のUIを表示させる仕組み。</p><pre><code class="language-javascript">const CommentID = (props) =&gt; {
  const { fallback } = props;
  const router = useRouter();

  if (router.isFallback) {
    return &lt;div&gt;ローディング中&lt;/div&gt;;
  }</code></pre><h2 id="h1635ddce6f">⚠️Static Generationのfallbackは開発環境と本番環境で挙動が異なる</h2><p><strong>開発環境 (</strong><code>npm run dev</code>) では、getStaticPropsは常に再実行されるとのこと⚡️<br>そのため、新たに記事を投稿すると即座に一覧ページに表示される。</p><p>しかし本番環境では、初回ビルド時に取得したデータしか表示されない。</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>本番（<code>next build &amp;&amp; next start</code>）</p></td><td colspan="1" rowspan="1"><p>getStaticPropsは<strong>ビルド時のみ1回</strong></p></td><td colspan="1" rowspan="1"><p>❌ 表示されない（revalidateなしなら）</p></td></tr><tr><td colspan="1" rowspan="1"><p>開発環境（<code>npm run dev</code>）</p></td><td colspan="1" rowspan="1"><p>毎回getStaticPropsが走る</p></td><td colspan="1" rowspan="1"><p>✅ 表示される</p></td></tr></tbody></table><h3 style="text-align: start" id="h02e6fe86c8">✅ ISR（Incremental Static Regeneration）の設定をしてSSG記事一覧が古くなるのを防ぐ</h3><p style="text-align: start"><code>revalidate</code> オプションを使うことで、一定時間ごとに静的HTMLを再生成可能にしてくれる。<br>設定した時間経過後、最初のアクセス時に<strong>バックグラウンドで再生成</strong>が走る。</p><pre><code class="language-javascript">return {
  props: {
    articles: data.contents,
  },
  revalidate: 60, // ← 60秒ごとに再生成OK
};</code></pre><p style="text-align: start">これで、ビルド後も定期的に「自動更新」されるようになった🎉</p><p style="text-align: start"></p><p style="text-align: start"></p>

CSRで新しく取得した記事が404になる原因とその解決方法。fallbackの設定で解決！

ルーティング

Next.js×microCMS｜ブラウザバックや戻るボタンで元のスクロール位置に戻る方法

Next.js × microCMS｜SSGで記事を10件のみ生成。ユーザーアクションで取得した11件目へのアクセスは404になる原因と解決方法