SPA CSR SSR SSG ISR × React

ざくざくーっと書いていこうと思います。

間違えたことを書いてたらすいません。

SPA

シングルページアプリケーション（Single Page Application）のことです。

ざっくり書くと html ファイルが 1 枚で完結しているアプリケーションのことです。

SSG でない SPA の状態でネストされた URL のパスを含むアプリケーションを組む場合、Nginx などに設定が必要となります。

Create React App（以下 CRA）も Next.js も Gatsby.js も基本は以下の DOM 以下で SPA となります。

• CRA の場合: <div id="root"></div>
• Next.js の場合: <div id="__next"></div>
• Gatsby.js の場合: <div id="___gatsby"></div>

CSR

クライアントサイドレンダリング（Client Side Rendering）のことです。

クライアント側、つまりユーザー側の端末でレンダリングが実行される方式のことです。

CRA と Gatsby.js は CSR しか行うことができないです。

Next.js の場合はコンポーネントを Dynamic Import で呼び出し、かつオプションを設定することで一部 CSR が実現が可能です。

SSG でない CSR の場合、すべてのルーティングに関わるレンダリングがクライアント側かつファーストアクセス時に行われるため、ファーストビューの描画が遅くなる傾向にあります。

ファーストビューの速度改善を行う場合、コードスプリッティングなどの手法が挙げられます。

SSR

サーバーサイドレンダリング（Server Side Rendering）のことです。

サーバー側の端末でレンダリングが実行される方式のことです。

Next.js では基本的に SSR が用いられます。

ほとんどのケースで CSR よりも描画が早いらしいですが、サーバーの負荷が高い状態では遅くなる可能性もあると思われます。

SSG

静的サイトジェネレーター (Static Site Generator) のことです。

ビルド時にネストした URL のパスに対応した html ファイル（もしくは html の文字列）を生成することで実現されます。

ネストしたパスごとに html ファイルが生成されるため、プロジェクトの規模によってはファイルサーバーの容量を食うことになります。

CRA および Gatsby.js の場合

Gatsby.js はデフォルトの状態で SSG が組まれています。

CRA の場合 react-snap を導入することで実現が可能です。

ただしビルド後に動的に生成されるページについては対応ができないです。

Next.js の場合

ビルド時に動的に生成されるページについては getStaticProps および場合によっては getStaticPaths という関数を実装することで実現が可能です。

ただし html ファイルの内容が古くなることも起き得るため、場合によっては ISR にする必要があります。

ISR

Incremental Static Regeneration のことです、日本語訳はそれっぽいものが見つからず。

Next.js のみ実装が可能です。

ビルド後に動的に生成されるページにおいて getStaticPaths 関数の戻り値の fallback に true を設定することで実現が可能です。（再生成でないため ISR ではなく SSG ？）

また getStaticProps 関数の戻り値に revalidate を設定することで html ファイルの再生成も可能です。

また SSG 以上にファイルが生成されるため、使いどころは要注意です。

大体あっていると思っているのですが、どうでしょうか。

個人的によく勘違いしがちだよなーと思うポイントとしては以下のとおりです。

• CRA も Next.js も Gatsby.js も基本は SPA
• CRA でも SSG は可能

そのため CRA と Gatsby.js って挙動自体はかなり似ている印象があります。

一方で Next.js は SSR や ISR が強みだなあぁと。

そんな感じです、間違っているところがありましたらこそっとおしえてもらえると幸いです。