Jamstackを検討する上で欠かせない、CSR/SSG/SSR/ISRの知識とその違い

こんにちは。UPLIFT/合同会社 知的・自転車代表のしかたこうきです。

弊社は、動画制作と軽めのWeb開発の会社です。このnoteでは、弊社がWeb領域で注力しているJamstackについて説明しています。

Jamstackを利用することで、WebサイトやWebシステムを高速でスケーラブルなものにすることができます。 しかし、Jamstackを利用するためには、CSRやSSGやSSRやISRといった、異なる方式があります。 この記事では、これらの方式の違いについて解説します。

CSR (Client Side Rendering)

CSRは、クライアント側（ブラウザ）でHTMLを生成する方式です。 ページを表示するために、サーバーからHTMLやスタイルシートやJavaScriptなどのリソースを取得し、ブラウザで処理を行います。

この方式は、初期ロードに時間がかかるものの、その後の読み込みや遷移の速度は非常に高速です。一方で、HTMLは必要最小限しかかかれないため、SEOに弱いという側面があります。

そのため、いわゆる誰でも閲覧可能なWWW上で公開されるシステムとして採用されることは比較的少なく、ログインが必要な内部向けシステムとして採用されるケースが多いです。

SSG (Static Site Generator)

SSGは、サイトを静的HTMLに変換する方式です。

サイトをビルドするときに、HTMLやスタイルシートやJavaScriptなどのリソースを生成し、それらをサーバーに配置します。

ページを表示するときには、サーバーからHTMLを直接取得することになります。 既にレンダリングされて、ファイルとして生成されているため、読み込みが高速でありながら、SEO対策にも優れています。

ただし、コンテンツが変更されるたびにサイトを再ビルドする必要があるため、コンテンツの更新が頻繁な場合は適していません。１ページだけでも更新すると、全ページの更新が実行されるため、大量のページを持つサイトにも向いていません。

SSR (Server Side Rendering)

SSRは、サーバー側でHTMLを生成する方式です。
ページを表示するために、サーバーにリクエストを送信します。 サーバーでは、リクエストを受け、HTMLやスタイルシートやJavaScriptなどのリソースを生成し、それらをクライアントに返信します。

この方式では、サーバー側でHTMLを生成することで、動的なコンテンツを処理することが可能になります。また、SSGと同じく、SEO対策にも優れており、至れり尽くせりの方式です。

ただし、サーバー側での処理が必要であるため、SSR用のサーバーが必要になるのと、負荷に応じてサーバーのスケールを考慮する必要があります。

ISR (Incremental Static Regeneration)

ISRは、SSGとSSRの良いとこどりの方式です。

サイトを静的HTMLに変換するときに、変更されたページだけを再ビルドすることができます。

この方式では、コンテンツの更新が頻繁でもサイトを再ビルドする必要がなく、ページ遷移やデータの取得が高速です。

ただし、ISRを利用するには、サーバー側での処理が必要であるため、サーバーのスケールを考慮する必要があります。

まとめ

このように、CSRやSSGやSSRやISRは、サイトやWebシステムを実装する際に、異なる特徴を持っています。 どの方式を採用するかは、プロジェクトの特徴やニーズに合わせて検討する必要があります。 Jamstackを利用することで、WebサイトやWebシステムを高速でスケーラブルなものにすることができるでしょう。