Jamstackのアーキテクチャパターン

Jamstackでは、そのHTMLレンダリング方式によって、アーキテクチャを4つに分けることができます。

• SPA
• SSG
• SSR
• ISR

ここでは、それぞれの違いについて解説します。

それぞれの比較

各アーキテクチャにおける相違点を以下にまとめて紹介します。

	SPA	SSG	SSR	ISR
レンダリングを実行する場所	クライアント	サーバー	サーバー	サーバー
ページレンダリングタイミング	クライアントがレスポンスを受け取った際	サーバーがリクエストを受ける前に事前にページを生成	サーバーがリクエストを受け取った際	サーバーがリクエストを受け取った際(キャッシュが無い場合)
ページ内容の新しさ	◎	△	◎	○
SEO	△	◎	◎	◎
表示の高速さ	○	◎	△	◎ (初回リクエスト時に生成)
各ページのOGP	×	◎	◎	◎
セキュリティ	△	◎	△	○
サーバー負荷	○	◎	△	○

SPA

SPAはSingle Page Applicationの略になります。CSR（Client Side Rendering）とも呼ばれます。CSRの名前の通り、クライアント側でHTMLをレンダリングするのが特徴になります。SPAの場合、最初のリクエスト時にHTMLを返却します。続いてHTML内に記述されているJavaScript/CSSをリクエストおよび返却します。HTMLの返却方法としては静的または動的のいずれもありますが、多くの場合静的にHTMLを返します。

そして、さらに表示するのに必要なデータもAPI経由で取得するケースが多いです。最初に取得したHTMLをレンダリングした後、APIリクエストなどで取得したデータを処理するため、初期表示は若干遅くなります。

画面遷移やボタンを押したりするイベントが発生した際には、必要に応じてクライアントがサーバーに対してリクエストを行います。リクエストは不要で、JavaScriptだけで画面遷移のような処理を行う場合もあります。サーバーはリクエストに対する最低限のデータだけを返却して、クライアントにて描画します。差分だけなので、2回目以降の表示処理は高速です。

SSG

SSGはStatic Site Generationの略になります。サーバー側で、あらかじめ静的なHTMLやJavaScript、CSSを生成しておくのが特徴です。あらかじめコンテンツを生成し、そのコンテンツをCDNに登録します。そのため、初回に限らず表示処理が高速です。

SSGの難点はコンテンツの生成頻度によっては、古いコンテンツのままになってしまう点でしょう。CDNのキャッシュを有効に使うためには、なるべく長いキャッシュを利用しつつも、頻繁にアップデートされるコンテンツを含まないようにするなど、古くならない工夫が必要です。

SSR

SSRはServer Side Renderingの略になります。CSRがクライアント側だったのに対して、SSRはサーバー側でHTMLを生成します。常にサーバー側で表示するHTMLを生成しますので、常に最新の状態に保てるのがメリットです。ただしコンテンツのキャッシュが難しく、CDNを使っている場合と比べて速度が遅かったり、サーバー側の負荷が大きくなります。

ISR

ISRはIncremental Static Regenerationの略になります。SSRのようにクライアントからのリクエスト時にページを生成するのですが、それをキャッシュして2回目以降のリクエスト時に利用します。SSGの場合、あらかじめすべてのページを生成しますので、ページ数が多いと生成に時間がかかります。ISRの場合、リクエストがあるまではページを生成しませんので、サーバーの立ち上げが高速です。

ISRではキャッシュの有効期限を決められます。キャッシュ生成から時間が経つと、再度サーバー側でページを生成します。