はじめに
SSR、CSR、SSGなどのレンダリング手法についての認識を整理するために、本記事を作成しました。
この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。
CSR (Client Side Rendering)
クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。その後、ブラウザ上でJavaScriptが実行され、動的にHTMLを生成・レンダリングすることで画面が表示されます。
CSRの説明でよく「JavaScriptがHTMLをレンダリングしている」と言われるのは、最初に受け取るHTMLが空の状態であり、その後JavaScriptが実行されて画面が描画されるためです。
メリット
- 初回読み込み時にすべてのデータを一括取得するため、2回目以降の動作が高速になる
デメリット
- 初回読み込み時にすべてのデータを取得・処理する必要があるため、ページが表示されるまでの時間が長くなる
- 空の
HTMLが返されるため、Webクローラーがページの内容を認識できず、SEOに不利
SSR (Server Side Rendering)
クライアントからのリクエストに対して、サーバー側でHTMLを生成し、レンダリング済みの状態で返します。
メリット
- サーバー側でレンダリングを行うため、初回のページ表示が速い
- クライアント側で
JavaScriptを実行する必要がないため、デバイスのマシンスペックに依存しにくい - サーバーで
HTMLを生成するため、Web クローラーがページ内容を認識しやすく、SEOに有利
デメリット
- ページ遷移のたびにサーバーへリクエストを送り、
HTMLをレンダリングするため、2回目以降の動作がCSRより遅くなる
SSG (Static Site Generation)
ビルド時にサーバーでHTMLを生成し、静的ファイルとして提供します。
メリット
- 事前に
HTMLが生成されているため、高速なレンダリングが可能 -
SSRと同様にクライアントのマシンスペックに依存しない
デメリット
- ビルド時に
HTMLを生成するため、リアルタイムで更新されたデータをすぐに反映できない
終わりに
CSR、SSR、SSGにはそれぞれメリット・デメリットがあり、用途によって適切なレンダリング手法を選択することが重要です。今後も最新情報をキャッチアップしながら適切に活用していきたいと思います。
参考
『【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法』Qiita
『CSR,SSR,SSG,ISRについて理解する』Zen