Next.jsの記事でReactはSPAとして単一のJavaScriptを生成する、という話をしました。

今回は改めてSPAとSSR、SSGのしくみや違いについてまとめてみようと思います。

レンダリングおさらい

ブラウザレンダリングのしくみの記事で簡単にまとめていますが、まずレンダリングのおさらいをしてみます。

レンダリングとは、サーバーから受け取ったHTML,CSS,JavaScriptをブラウザに表示させる一連の流れのことをいいます。

簡単にまとめると、

1.HTML、CSS、JavaScriptの順にParsing（ブラウザが理解できる形式に変換）

2.レンダーツリー（HTMLのDOM、CSSのCSSOM）と呼ばれるツリーオブジェクトを生成

3.画面にレイアウト

4.描画

の流れです。

SPA(Single Page Application)とは

SPAとは、名前のとおりページ遷移を行わず、１つのページでコンテンツを切り替えるアプリケーションのことをいいます。

それに対して、各ページごとにHTMLファイルが存在する従来のしくみをMPA(Multiple Page Application)といいます。

MPAでは、クライアント側からのリクエストごとにサーバーがHTMLファイルを返し、描画（レンダリング）します。

SPAのしくみ

SPAでは、クライアント側からの初回リクエストのみ、サーバーがほぼ空のHTMLファイルとすべてのファイルを返し、クライアント側で描画します。

具体的な流れは下記のとおりです。

1. アプリをビルドしてホスティングサーバーにあげる
2. 初回はクライアントからホスティングサーバーにリクエストし、サーバーはビルド済みのファイル（ほぼ空のHTMLファイルとすべてのファイル）を返す
3. 2回目以降は、クライアントからAPIサーバーに差分のみリクエスト
4. APIサーバーからjsonやXML形式のファイルを返す
5. クライアントが差分をレンダリング

クライアントでレンダリングを行うため、SPAのしくみは、CSR(Client Side Rendering)ともいいます。

SPAのメリット

• ページ遷移が早い（サーバーとの通信を最小限にすることでUI/UX向上）
• シンプルな構成（単一のHTMLファイルとJavaScriptで構成される）

SPAのデメリット

• 初期表示は遅い
• SEOに不利な可能性（HTMLはほぼ空で、GoogleクローラはJavaScript実行まで待たないのでコンテンツが認識できないと言われていましたが、現在はJavaScript実行後に認識されるので改善されつつあります）
• 動的なOGPは対応できない

SSR(Server Side Rendering)

SSRとは、サーバーでレンダリングを行ってHTMLを生成し、クライアント側では描写(Painting)のみを行う技術です。

SPAのデメリットであった初期表示の遅さやSEO問題を解消することができます。

SSRのしくみ

SSRでは、クライアント側からの初回リクエスト時にサーバーでHTMLを生成してクライアントに返し、クライアントは返されたHTMLを表示させます。

具体的な流れは下記のとおりです。

1. クライアントからNode.jsサーバーにリクエスト
2. Node.jsサーバーからAPIサーバーにアクセス
3. APIサーバーからNode.jsサーバーへ初回データを返す
4. Node.jsサーバーでレンダリング、クライアントへレンダリングされたファイルを返す
5. クライアントで表示
6. 2回目以降のリクエストは、SPAと同様に差分のデータのみAPIサーバーへリクエストしてクライアントでレンダリングを行う

SSRのメリット

• SPAの初期表示問題解消
• SPAのSEO問題解消

SSRのデメリット

• Node.jsサーバー実行環境が必要（Next.jsやNuxt.jsのフレームワーク利用可能）
• サーバーの負荷増加

SSG(Static Site Generation)

訳すと静的サイト生成とあるように、SSGはアプリのビルド時にAPIからデータを取得し、静的なHTMLファイルを生成するしくみです。

SSGのしくみ

SSGでは、ビルド時にHTMLファイルを生成し、クライアントからリクエストがあったら、サーバーは生成済みのファイルを返します。

具体的には

1. アプリのビルド時にNode.jsサーバーからAPIサーバーへアクセス、データ返却されたらさーばーでレンダリングしてHTMLファイル作成
2. クライアントからNode.jsサーバーにリクエスト
3. Node.jsはビルド時に生成したファイルを返す
4. クライアントで表示

SSGはリクエストより前にレンダリングを行って静的ファイルを生成しておくので、プリレンダリングともいいます。

SSGのメリット

• 表示速度が早い（事前にレンダリング済みなので）
• SEO向上

SSGのデメリット

• 更新頻度が高いサイトには不向き（更新のたびにビルドしなければ変更が反映されない）
• ページ数が多いとビルドに時間がかかる

まとめ

開発するアプリケーションによってSPA、SSR、SSGのどれを選択するべきか、最適な選択ができるようになりたいですね。