【Next.js】CSR, SSR, SSGの違いについて

業務でCSRアプリの開発に携わる機会があったので、これを機にSSRやSSGとの違い等について整理しておこうとおもいます。

CSR

概要

1. client side rendering
2. 名前の通り、クライアント側（ブラウザ）でレンダリングする

処理の流れ

1. 初回アクセス時に、ほぼ空っぽのHTML, CSS, JavaScriptをレスポンスとして受け取る
2. 受け取ったブラウザは、HTML, CSS, JavaScriptをもとにレンダリングする

メリット

1. 静的ファイルを返せるホストサーバーであれば、(S3でも可)デプロイができる
2. ページ遷移のたびに、サーバにリクエストする必要がない
3. 処理がブラウザ内で完結するのでページ遷移が速い
4. サーバーは初回リクエスト時にHTML, CSS, JavaScriptを返すだけなので、負荷が軽い

デメリット

1. 初期ロードが重くなる
2. 初期ロードのHTMLは空っぽなので、SEOに不利

SSR

概要

1. server side rendering
2. 名前の通り、サーバー側でレンダリングする

処理の流れ

1. 初回アクセス時に、ほぼ空っぽのHTML, CSS, JavaScriptをレスポンスとして受け取る
2. 受け取ったブラウザは、HTML, CSS, JavaScriptをもとにレンダリングする

メリデメは基本的にCSRの逆になる。

メリット

1. 初期ロードが軽い
2. SEOに有利

デメリット

1. デプロイするのに、Node.jsを必要とする
2. ページ遷移のたびに、サーバにリクエストする必要があるので、CSRより遅い
3. リクエストのたびにサーバーでレンダリングするため、CSRより負荷が高い

SSG

概要

1. static site generator
2. 静的サイトジェネレーター
3. CSRもSSRもリクエスト後にレンダリングするが、SSGはビルド時にプリレンダリングしておく点がCSR、SSRと異なる

処理の流れ

1. アプリケーションのビルド時に、APIなどからデータを取得し、HTMLをプリレンダリングしておく
2. サーバーにリクエストがきたら、このHTMLファイルを返す

メリット

1. CSR同様、静的ファイルを返せるホストサーバーであれば、(S3でも可)デプロイができる
2. プリレンダリングされたHTMLを返すだけなのでSSRより表示速度が早い

デメリット

1. データ量が多いと、ビルドに時間がかかる
2. コンテンツのリアルタイム性がない

メリデメまとめ

この観点でみると、SSG最強に見えますが、SSGの利用範囲は限定的ですし、用途に応じて適切に使い分けできるとよいですね！

	CSR	SSR	SSG
初期表示速度	×	○	◎
ページ遷移速度	○	△	○
デプロイ	○	×	○
SEO	×	○	○
サーバー負荷	○	×	○
リアルタイム性	○	○	×