Next.js 学習中に出てきた CSR, SSR, SSG について理解を深める

はじめに

前回の記事で、Next.jsについて学習した内容をまとめてみたのですが、その中で出てきたCSR、SSR、SSGについて、もう少しまとめて理解を深めていきたいと思います。

それぞれの違い

それぞれの違いは、いつ、どこでHTML(画面に表示させるページ)を生成するか、という点が異なります。その違いによって何が変わるのかを含めてまとめます。

SSR (Server-Side Rendering)

• ユーザーがアクセスした際に、サーバーサイドでHTMLを生成します。そのため、クライアントサイドの負荷を減らせ、表示が高速になる（サーバーサイドの方が処理速度が速いことが多いため）。
• ユーザーがアクセスした際にHTMLを組み立てるため、常に最新情報を表示できる
• SEO対策が必要で、かつ更新頻度の高いページを作る際に有効（ニュースサイトやSNSなど）。

CSR (Client-Side Rendering)

• ユーザーがアクセスした際に、クライアントサイドでHTMLを生成する。
• ブラウザで直接レンダリングされるため、ユーザーのインタラクションに対する応答が迅速。ページ全体を再レンダリングする必要がなく、必要な部分だけを更新できる。
• サーバーサイドでは空のHTMLが用意され、クライアントサイドでページを描画するので、SEO的にはマイナス（検索結果などで上位に表示されにくくなります）。
  • クローラーがHTML生成前にアクセスするため、空のページ＝無意味なページと判断されてしまう。
• Reactはデフォルトでこの方式を採用している。
• SEOを捨てた動的なページを作る際に有効（B2B向けの管理画面や、個人向けのダッシュボードなど、SEOが不要なページ）。

SSG (Static Site Generation)

• ビルド時に、サーバーサイドでHTMLを生成します。ビルド時に作成され、CDNによってキャッシュされるため、3つの中で最も画面表示が高速。
• ただし、ビルドのタイミングで生成されるため、更新頻度が高いページや動的にページを変更させたい場合には向かない。
• SEO対策が必要で、かつ更新頻度の低いページに有効（ブログ、ランディングページなど）。

まとめ

これらの概念を意識してフレームワークなどを選択することで、パフォーマンスやSEO対策に有効なアプリケーションやWebページを作ることができます。

ちなみにNext.jsでは、上記それぞれをページごとに使い分けられるため、非常に便利なフレームワークとなっています。