調査背景
フロントエンドでよく耳にするこれらの単語について、開発された技術動向や特徴についてあまり理解していなかったので、調べてみた。
SPA
シングルページアプリケーションの略
CSR（クライアントサーバーサイドレンダリング）と同義。
ページとしてのロードは1回で他のページも表現できる。
→ページ遷移していなくてもURLを書き換えることができ、内容を変えられる。
SPAが開発された背景
従来のページ遷移では全てのリソースをロードする必要があったため、ユーザーを待たせることがあった。
また、新しくロードされた場合データが消えてしまう。※Local Storageに保存する必要があった。
SPAの課題
SPAはページ遷移などを含めて動的に表示する必要があり、
JavaScriptでHTMLをレンダリングする。
よって、JavaScriptが使えないクローラーだと何も表示されず、SEOが弱い。
そのため、SEOが必要ある場面はHTMLを記述し、SEOが必要ない場面でSPAを使用することが多かった。
SSR
サーバーサイドレンダリングの略
SPAをサーバーサイドでレンダリングする技術。
SSRが開発された背景
SPAでは、一つのフロントファイルで色々なページを表示する性質上、HTMLはほぼ空でJavaScriptによってレンダリングしている。
一方で、SSRは、最初にロードするときだけ、先にサーバーサイドで該当ページのHTMLをレンダリングする。その結果、クローラーがJavaScriptを実行できなくてもHTMLを解釈できる。最初にロードされた後はSPA同様に動く。
各ページごとにレンダリングするからSEOに強い。
最初にロード以外はページロードが発生しないからSPAのように動作が早い。
SSRの課題
サーバーを必要とする点
サーバーサイドでレンダリングしていると遅い（APIなど多くの情報を含むと）
SSG
スタティックサイトジェネレーションの略
静的サイトの生成
SSGが開発された背景
SSRでは初めにサーバーの処理が必要なためユーザーを待たせていたが、
SSGでは事前に静的ページを生成しておき、アクセスがあったときに生成したページを表示する。APIについては、静的ページを生成するビルド時に叩いておく。これにより、サーバーでの処理がなくなるので処理が早くなる。
SSGの課題
APIをビルド時に叩くため、更新のあるAPIについて最新の情報を取得できない。これに対してはページの更新があるたびに静的ページを生成し直す必要があった。
ISR
インクリメンタルサイトリジェネレーションの略
SSG同様全てのページをビルド時に生成する。次に各ページに有効期限を設ける。そして、アクセスがあるたびに有効期限が切れているかのチェックをする。有効期限が切れていれば、ページの再生成を行う。この際生成されたページは次のアクセス時から渡されるようになる。
ISRが開発された背景
SSGの問題点（更新が多いサイトでは何度もビルドしなおす必要がある。)を解消する。