<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="hcf83e1357e"></h2><h2 id="hdf77755a7f">JavaScriptのDOM操作できること</h2><p>JavaScriptを使うことで、HTMLの構造や中身を動的に変更することができる。<br>クリックで要素を追加したり、フォームの入力に応じて内容を書き換えたりすることが可能。</p><h2 id="h8f4c06a502">🔍 要素の取得</h2><p>要素の取得方法は<code>querySelector</code>と<code>getElementById</code>と<code>getElementsByClassName</code>の３種類がある。</p><p>それぞれ取得する際の（）の中に入れるID名やClass名の記述方法に違いがあるので要注意。間違えて入力すると要素を取得できない⚠️</p><h3 id="h14c6278578">✅ 【ID指定で1つの要素を取得】</h3><pre><code class="language-javascript">// getElementById：ID名をそのまま指定（#は不要）
const element1 = document.getElementById(&quot;my-id&quot;);

// querySelector：CSSセレクタ形式で指定（#が必要）
const element2 = document.querySelector(&quot;#my-id&quot;);</code></pre><p>✅ 【クラス名で複数の要素を取得】</p><pre><code class="language-javascript">// getElementsByClassName：配列っぽいHTMLCollectionが返る
const elements1 = document.getElementsByClassName(&quot;item&quot;);

// querySelectorAll：NodeListが返る。forEachが使える
const elements2 = document.querySelectorAll(&quot;.item&quot;);</code></pre><p>✅ 【タグ名で取得】</p><pre><code class="language-javascript">// getElementsByTagName：タグ名で全て取得
const divs1 = document.getElementsByTagName(&quot;div&quot;);

// querySelectorAll：CSSのようにタグ＋条件もOK
const divs2 = document.querySelectorAll(&quot;div.container&quot;);</code></pre><hr><h2 id="h486cb6e18d">➕ 要素の追加</h2><pre><code class="language-javascript">const newElement = document.createElement(&quot;タグ名&quot;);
newElement.textContent = &quot;テキスト内容&quot;;
親要素.appendChild(newElement);</code></pre><p>📝例文：</p><pre><code class="language-javascript">const list = document.querySelector(&quot;ul&quot;);
const li = document.createElement(&quot;li&quot;);
li.textContent = &quot;新しい項目&quot;;
list.appendChild(li);</code></pre><hr><h2 id="h5854d91049">❌ 要素の削除</h2><p>📝例文：</p><pre><code class="language-html">//HTML
&lt;ul id=&quot;todo-list&quot;&gt;
  &lt;li class=&quot;item&quot;&gt;やること① &lt;button class=&quot;delete-btn&quot;&gt;削除&lt;/button&gt;&lt;/li&gt;
  &lt;li class=&quot;item&quot;&gt;やること② &lt;button class=&quot;delete-btn&quot;&gt;削除&lt;/button&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre><pre><code class="language-javascript">// すべての削除ボタンを取得
const deleteButtons = document.querySelectorAll(&quot;.delete-btn&quot;);

// 各ボタンにクリックイベントを設定
deleteButtons.forEach((btn) =&gt; {
  btn.addEventListener(&quot;click&quot;, () =&gt; {
    // 親の &lt;li&gt; を削除
    btn.parentElement.remove();
  });
});</code></pre><hr><h2 id="hdbed4bb861">🔁 要素の変更</h2><ul><li>内容の書き換え：</li></ul><pre><code class="language-javascript">element.textContent = &quot;新しいテキスト&quot;;</code></pre><ul><li>属性の変更：</li></ul><pre><code class="language-javascript">element.setAttribute(&quot;class&quot;, &quot;new-class&quot;);</code></pre><ul><li>スタイルの変更：</li></ul><pre><code class="language-javascript">element.style.color = &quot;red&quot;;</code></pre><p></p>

JavaScriptでよく使うDOM操作。要素の取得方法が混乱するのでそれぞれの解説とまとめ。

JavaScript基礎｜よく使うDOM操作(HTML要素の取得・追加・削除・変更)

<h2 id="hcb9975e3c0"> API 通信</h2><p>JavaScriptでは、Web APIとの<strong>通信は非同期</strong>で行われる。Web API は、HTTPを使って通信するAPI のこと。</p><p>つまり、クライアント（ブラウザやアプリ）とサーバーの間でやりとりするAPI。</p><p style="text-align: start">通信は非同期のため、通信の結果（レスポンス）を使いたい場合は、<code>Promise</code> や <code>async/await</code> を使って、データ取得が完了した後に処理を行う」仕組みが必要となる。</p><p style="text-align: start">これをしないと、データ取得を待たずに次の処理に進んでしまうためデータを使う関数内で「undefined」のようにデータが見当たらないエラーとなる。</p><p style="text-align: start">データ取得には<code>Promise</code>チェーンと<code>async/await</code>がある。</p><h3 id="h147dda5722"><code>Promise</code>基本構文</h3><pre><code>const fetchPromise = fetch(
  &quot;https://api.example.com/data&quot;,
);

fetchPromise
  .then((response) =&gt; {
    if (!response.ok) {
      throw new Error(HTTP error: ${response.status});
    }
    return response.json();
  })
  .then((data) =&gt; {
    console.log(data[0].name);
  });</code></pre><p>Promiseチェーンの .then() の中で取得したデータを受け取っている。「.then((〇〇) =&gt; {...}) 」の 〇〇 の名前は <code>data</code> でも <code>info</code> でも <code>result</code> でも任意の名前をつけられる。</p><hr><h3 id="hc8659dff8b"><code>async/await</code>基本構文</h3><pre><code class="language-javascript">async function getData() {
  try {
    const res = await fetch(&quot;https://api.example.com/data&quot;);
    const data = await res.json();
 
  } catch (error) {
    console.error(&quot;データ取得エラー:&quot;, error);
  }
}

getData(); // 関数を呼び出して通信を実行</code></pre><h2 id="h1058755d1e">webAPIを叩くとは？</h2><p>「webAPIを叩く」とはプログラミング上から外部とデータのやり取りをすることを指す。</p><h3 id="h91351e23da">APIを叩いてみる</h3><p>fetch( )メソッドを使用してAPIを叩く。<br>fetch( )はWindowオブジェクトにあるメソッドで、サーバー上にあるデータを取得することができる。非同期でリクエストを発行し、そのレスポンスを取得する。</p><p><span class="highlight">fetch( )をしたらpromiseオブジェクトが返ってくる。</span></p><p>promiseオブジェクトはそのままでは使用できないので、async関数を使用する。（asyncをつけたらfetchの前にawaitを置く必要がある。）</p><pre><code class="language-javascript">async function getData() {
    const res = await fetch(&quot;https://api.example.com/data&quot;);</code></pre><p>async/awaitを使用すると、受け取るデータがpromiseオブジェクトからresponseオブジェクトに変わる。</p><p>responseオブジェクトにはデータの中身と、asyncが成功したか失敗したかが含まれる。</p><p>受け取ったResponseオブジェクトを、json( )メソッドを使用してJSON形式に変換する。</p><pre><code class="language-javascript">async function getData() {
    const res = await fetch(&quot;https://api.example.com/data&quot;);
　　 const data = await res.json();
  }
}</code></pre><p>※上記ではデータ取得エラー時が入っていないため、文頭の<code>async/await</code>基本構文のtry/catchを使用する。</p><h2 id="h141674c6fb">async/await以外のAPIの叩き方</h2><h3 id="h7713a652cf">①.then( )メソッドを使う</h3><pre><code class="language-javascript">function getData(){
  fetch(&quot;https://api.example.com/data&quot;)
    .then(function(res){
      return res.json();
    })
    .then(function(users){
      console.log(users);
    })
}

getData();</code></pre><h3 id="h82d00767b1">②XMLHttpRequest()</h3><pre><code class="language-javascript">XMLHttpRequest() 

function getData() {
  const xhr = new XMLHttpRequest();
  xhr.open(&quot;GET&quot;,&quot;https://api.example.com/data&quot;);
  xhr.responseType = &quot;json&quot;;
  xhr.send();
  xhr.onload = function(){
    console.log(xhr.response);
  }
}

getData();
</code></pre><p>⚠️XMLHttpRequestは古いのであまり使用されていない。</p><h2 id="h063460226d">⭐️練習：イベント発火でAPIを叩いて取得したデータを<strong>forEachで表示させる</strong></h2><p><u>📝やりたいこと</u></p><p>・ボタンをクリックしたら、json公式サイトのusersデータの中からユーザーネームのみ取得する</p><pre><code class="language-javascript">// DOM
const button = document.getElementById(&quot;addBtn&quot;);
const lists = document.getElementById(&quot;lists&quot;);

//関数（メソッド）
function addList(user) {
  const list = document.createElement(&quot;li&quot;);
  list.innerText = user.name;
  lists.appendChild(list);        
}

async function getUsers(){
  const res = await fetch(&quot;https://jsonplaceholder.typicode.com/users&quot;);
  const users = await res.json();
  return users;
}

async function listUsers(){
  const users = await getUsers();
  users.forEach(addList);
}

//イベント
button.addEventListener(&apos;click&apos;, listUsers);</code></pre><p></p>

JavaScriptのAPI通信について。API叩くとよく聞くがその内容は？

API通信

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

JavaScript基礎｜よく使うDOM操作(HTML要素の取得・追加・削除・変更)

JavaScript基礎｜API通信「webAPIを叩く」とは