レンダリング (Rendering – CSR, SSR)

公開日：2025.04.10
更新日：2025.04.10

用語集

レンダリング（Rendering）とは、ウェブの文脈においては、HTML、CSS、JavaScriptといったコードを解釈し、ユーザーがブラウザで見ることができる視覚的なウェブページ（ピクセルの集まり）を生成・描画するプロセスのことを指します。ウェブサイトがユーザーのブラウザに表示されるまでの重要な工程の一つです。

特に、JavaScriptを多用する現代的なウェブサイト（シングルページアプリケーション(SPA)など）において、レンダリングの「方法」は、ページの表示速度、ユーザーエクスペリエンス、そしてSEOに大きな影響を与えます。主なレンダリング方式として、CSR（クライアントサイドレンダリング）とSSR（サーバーサイドレンダリング）があります。

CSR (Client-Side Rendering / クライアントサイドレンダリング)

仕組み: ユーザーがウェブページにアクセスすると、まず最小限のHTMLと、ページの描画に必要なJavaScriptファイルがブラウザ（クライアント）に送信されます。その後、ブラウザ側でJavaScriptを実行し、データを取得（API通信など）しながら動的にHTMLを生成し、ページを描画します。React, Vue, AngularなどのJavaScriptフレームワークで作られたSPAでよく採用される方式です。
メリット: 最初のページ読み込み後は、ページ遷移時に画面全体を再読み込みする必要がなく、差分だけを更新するため、アプリケーションのようなスムーズな操作感（ユーザーエクスペリエンス）を提供できます。サーバー側の負荷は比較的小さくなります。
デメリット: 最初のページ表示までに、JavaScriptのダウンロードと実行が必要になるため、初期表示速度（特にコアウェブバイタルのLCPなど）が遅くなる傾向があります。また、検索エンジンのクローラーがJavaScriptを実行してコンテンツを完全にレンダリングするまでに時間がかかったり、うまく実行できなかったりする場合があり、インデックス登録やSEO評価に影響が出る可能性があります（近年のGooglebotはJavaScriptのレンダリング能力が向上していますが、依然として課題は残ります）。

SSR (Server-Side Rendering / サーバーサイドレンダリング)

仕組み: ユーザーがウェブページにアクセスすると、要求に応じてサーバー側で必要なHTMLをすべて生成し、完成した状態のHTMLをブラウザに送信します。ブラウザは受け取ったHTMLを表示するだけでよいため、JavaScriptの実行を待たずに初期表示が可能です。従来の多くのウェブサイトや、一部のJavaScriptフレームワーク（Next.js, Nuxt.jsなど）で採用されています。
メリット: ブラウザはすぐに表示可能なHTMLを受け取るため、初期表示速度が速くなる傾向があります。検索エンジンのクローラーも、JavaScriptを実行しなくても最初からコンテンツが記述されたHTMLを取得できるため、インデックスされやすく、SEOに有利とされています。
デメリット: ページ遷移ごとにサーバーへのリクエストとHTMLの再生成が必要になるため、CSRのようなスムーズな画面遷移は実現しにくい場合があります。アクセスが集中するとサーバー側の負荷が高くなる可能性があります。

その他のレンダリング方式

SSG (Static Site Generation / 静的サイト生成): ビルド時（サイト構築時）に予めすべてのページのHTMLファイルを生成しておき、リクエストがあった際にはその静的なHTMLファイルを返す方式。非常に高速な表示が可能で、ブログやドキュメントサイトなど、頻繁な更新が不要なサイトに適しています。SEOにも有利です。
ISR (Incremental Static Regeneration): SSGの派生で、一定時間ごとや特定のトリガーによって静的ページをバックグラウンドで再生成する方式。SSGの高速性と動的な更新を両立しようとするアプローチです。
ダイナミックレンダリング: ユーザー（通常のブラウザ）と検索エンジンのクローラーに対して、異なるバージョンのページを提供する方式。ユーザーにはCSRでスムーズな体験を提供しつつ、クローラーにはSSRで生成した静的なHTMLを提供することで、UXとSEOの両立を図ります。ただし、設定が複雑で、クローキング（ユーザーと検索エンジンに異なる内容を見せる不正行為）と誤解されるリスクも考慮が必要です。