概要
フロントエンドの開発でよくSPA/SSR/SSG/ISRについて耳にする機会が結構あると思います。
特に、Next.jsの台頭によってSSG/ISRあたりがよく聞かれる様になってきたか名と思います。
今回はそれぞれどういった仕組みなのかを簡単にまとめてみました。
SPA
SPAはSingle Page Applicationの略で、その名の通りWebアプリケーションを1つのHTMLページで構築する手法となります。
ユーザーはブラウザで対象のWebアプリケーションに遷移した際、HTMLファイルとJavaScriptファイルを一気にロードして、以降画面遷移した際は必要なデータをAPIで取得するだけで、新たなHTMLの読み込みは行わず、JavaScriptの処理によって画面をスムーズに切り替えていく挙動をします。
メリット
操作しているユーザーから見ると画面がシームレスに遷移していく為、画面読み込みによる遅延がなくUXの向上につながります。
また、SPAはフロントエンドとバックエンドの処理を完全に分離することができる為、チームを分けた開発も可能となります。
デメリット
一方で、初回読み込みに時間がかかるため、SEOの観点からはデメリットになります。
また処理がユーザー側に寄る為、脆弱性が悪用される可能性が発生します。
また、私の個人的な感想としてGoogle認証などのサードパーティとのOAuth認証の実装がかなり大変です。
フレームワーク
SPAを実装するのに利用されるフレームワークとしてはReact、Angular、Vue.jsがあげられます。
SEO関係なく、ただただユーザーによる操作のパフォーマンスを考慮したWebアプリケーションを作りたい場合に利用を検討するのがよさそうです。
SSR
SSRはServer Side Renderingの略で、その名の通りページ遷移した際にサーバ側でHTMLのレンダリングを行い、生成したHTMLをブラウザに返す手法となります。
レンダリング処理をクライアント側で行わせるSPAとは全く異なるアプローチを取ります。
メリット
こちらはSPAに比べて初期表示の速度が速い為、SEOの観点で有効です。
また基本的にはサーバ側で処理する為に、クライアントのPCスペックやJavaScript環境に左右されることはありません（クライアント側で処理される機能は除く）。
デメリット
こちらはフロントエンド、バックエンドといった実装の切り離しが難しいため、開発人員の要件が高くなります。
また画面のキャッシュを利用する場合、その制御に気をつける必要があります。
フレームワーク
SSRを実装するのに利用されるフレームワークとしてはNode.jsやNext.jsがあげられます。
動きとしてはRailsやPHPもSSRであると考えれますが、こちらはMPAと呼ばれるそう。。（動きは一緒）
JavaScriptで処理するかどうかで言い方が違うと解釈してます。（違ってたらごめんなさい。。）
SSG
SSGはStatic Site Generatorの略で、静的なウェブサイトを予め生成しておく手法となります。ここで、それってただのHTMLファイルを作っておくこと？となったかと思いますが、違います。
SSRの様に、ページとページのレンダリング処理を実装したら、ビルドという作業を行います。その際、必要な情報をDBから取得し、画面をレンダリングしてHTMLを生成し、それをwebサーバーに配置するといったアプローチになります。
メリット
例えば、自社のホームページに社員紹介ページがあるして、データベースで保持する社員情報から画面生成しているとしてみましょう。
仮に、データベースの社員情報の更新頻度が1年に1回とした場合、社員紹介ページへの遷移の度にSSRでレンダリング処理を挟むのは非効率になります。
ビルド時にDBからデータを取得して、静的ページを生成しておくことで、確実にSSRより表示速度が速くなります。
デメリット
リアルタイムで更新されるデータからページを作る場合には使用できません。
あくまでも更新頻度の低いデータからページを生成する場合に有効です。
フレームワーク
SSGを実装するのに利用されるフレームワークとしてはNext.jsがあげられます。
ここでお気づきの方はNext.jsはSSRでも使われるじゃんと思われたかと思います。
なんとNext.jsはページ毎にSSRとSSGを使い分けることができるのです。
これがNext.jsが好まれる理由になっているのかなと感じます。
ISR
ISRはIncremental Static Regenerationの略で、上記SSGのページを定期的に生成しなおす仕組みとなります。
メリット
SSGだとページ生成に必要なデータに更新が入った場合に都度、ビルドをしなおす必要がありました。
が、ISRを利用することで定期的な自動ビルドを行い、webアプリケーションの運用がグッと楽になります。
デメリット
定期的にページを更新しますが、やはりリアルタイムで更新されるデータのページに対する利用は現実的ではありません。
また、ISRを利用する上でアプリケーションのデプロイ先としてVercelの使用が今のとろこ無難である様です。
AWSでデプロイする方法については、分かり次第記事にしようかと思います。
フレームワーク
SSGを実装するのに利用されるフレームワークとしてはNext.jsになります。
まとめ
今回、SPA/SSR/SSG/ISRについて解説しました！
上記説明において、Next.jsはかなり便利なフレームワークであることから、ぜひキャッチアップしておくことをお勧めします！