React.js や Vue.js など JavaScriptのフレームワークの解説記事を見ていると、 SPA, SSR, SSGなど見慣れない英単語をよく見かけます。 意味がイマイチ理解できず不安だったため、 いくつかの解説記事を確認してブログの記事としてまとめることにしました。 調査時に参考にさせていただいたページがありますので、 ページ下の「参考にさせていただいたページ」にリンクを貼りました。 <h3 id="hfb87ace3ee">CSR (Client Side Rendering)</h3>クライアント（ブラウザ側）で演算やレンダリングを行います。 JavaScriptのコード量が増えれば増えるほど処理に時間がかかり、 サーバーからのダウンロードにも時間がかかるため、 大規模なアプリケーションとなると、ページがなかなか表示されない問題が発生します。 <h3 id="hd9e10bcf81">SSR (Server Side Rendering)</h3>サーバー上でHTMLを作成し、クライアントに返却します。 ユーザーからのリクエストごとにサーバー側で演算やレンダリングを行うため、 クライアント側の負荷は減らせますが、サーバー側の負担が増えます。 <h3 id="hd1f9afee44">SPA (Single Page Application)</h3>レンダリングの手法ではなく概念となります。CSR と基本的な仕組みは同じで、 必要なデータを <code>json</code> で取得し、ページの一部をクライアント側で書き換えることで ネイティブアプリのような高速な動作が実現可能です。 <h3 id="heed7f2a467">SSG (Static Site Generation)&nbsp;</h3>あらかじめレンダリング済みのデータをビルドしておき、 ユーザーからのリクエスト時にHTMLを返却する手法です。 サーバー側はリクエスト時にHTMLを返却だけ行えばよいため、 余計な処理が行われず、表示が高速になります。 アプリケーションサーバーではなく、CDN から配信を行うことで更に高速な表示が可能です。 JavaScriptのフレームワークの Nuxt.js や Next.js にはこの機能が実装されています。 <h3 id="hd0c1c38ee0">ISR (Incremental Static Regeneration)</h3>SSG に自動更新機能を加えた手法です。 一定時間ごとにバックグラウンドでデータの再取得、 ページの再レンダリングを行い、HTML を再生成 (regenerate) します。 SSG はコンテンツの更新を反映させるために、 アプリ全体の再ビルドが必要なのに対し、 ISR はバックグラウンドでデータの更新を行うため、 アプリ全体の再ビルドが不要となります。 Next.js 9.4 から導入された実験的な新機能であり、Vercelにデプロイすることで利用できます。 <h2 id="ha214098e44">まとめ</h2>小難しい印象がありましたが、実際にまとめてみるとそれほど難しくはない概念でした。 記事にすることでより深く理解できました。

<ul><li><a href="https://qiita.com/akashixi/items/84cd79e090a283bb8c67" target="_blank" rel="noopener noreferrer">SSR、SSG、Client Side Renderingの違いをまとめた</a></li><li><a href="https://qiita.com/thesugar/items/47ec3d243d00ddd0b4ed" target="_blank" rel="noopener noreferrer">Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する</a></li><li><a href="https://mizchi.dev/202005182044-awesome-next-issg" target="_blank" rel="noopener noreferrer">Incremental Static Regeneration で実現する次世代のサーバーアーキテクチャ</a></li></ul>

カテゴリーが「技術調査」の記事

カテゴリ