CSR, SSR, SSG, ISR - CSR, SSR, SSG, ISR
CSR, SSR, SSG, ISR
In modern web development, CSR, SSR, SSG, and ISR represent four key rendering strategies, each optimized for different needs of performance, user experience, and content freshness.
CSR (Client-Side Rendering)
In CSR, the browser downloads a minimal HTML file along with JavaScript bundles. The JavaScript then dynamically generates and renders the full page. Frameworks like React often use CSR by default. It's great for highly interactive applications, but initial load time can be longer compared to server-rendered methods.
SSR (Server-Side Rendering)
In SSR, the server generates the full HTML page for each request. When a user accesses the site, the server prepares the page and sends it fully rendered. This can significantly improve the Time to First Byte (TTFB) and First Contentful Paint (FCP). Frameworks like Next.js support SSR to improve SEO and initial performance.
SSG (Static Site Generation)
With SSG, HTML pages are generated at build time, not per user request. Once built, the pages are served statically, resulting in incredibly fast load times. This method is ideal for blogs, documentation sites, and other content that doesn't change frequently.
ISR (Incremental Static Regeneration)
ISR blends the benefits of SSG and SSR. Pages are statically generated at build time but can also be updated after deployment without rebuilding the entire site. This enables developers to have the speed of static sites with the flexibility of dynamic updates, commonly seen in frameworks like Next.js.
Each strategy has its trade-offs, and often a modern application will mix multiple rendering strategies to achieve the best user experience.
CSR, SSR, SSG, ISR
現代のWeb開発において、CSR、SSR、SSG、ISRは、それぞれ異なるニーズ（パフォーマンス、ユーザー体験、コンテンツの鮮度）に最適化された4つの主要なレンダリング戦略を指します。
CSR（Client-Side Rendering）
CSRでは、最小限のHTMLファイルとJavaScriptバンドルがブラウザにダウンロードされ、JavaScriptが実行されてページ全体を動的に生成・表示します。Reactなどのフレームワークは、基本的にCSRを採用しています。高いインタラクティブ性を必要とするアプリケーションに適していますが、初回ロード時間が長くなることがあります。
SSR（Server-Side Rendering）
SSRでは、サーバー側でリクエストごとに完全なHTMLページを生成します。ユーザーがサイトにアクセスすると、サーバーはページをレンダリングして返します。これにより、**TTFB（Time to First Byte）やFCP（First Contentful Paint）**を大幅に改善できます。Next.jsのようなフレームワークでは、SEO対策や初期パフォーマンス向上のためにSSRが利用されます。
SSG（Static Site Generation）
SSGでは、ビルド時にHTMLページを生成し、リクエストごとではなく静的ファイルとして提供します。そのため非常に高速なロードが可能です。ブログやドキュメントサイトなど、コンテンツの更新頻度が低いサイトに最適です。
ISR（Incremental Static Regeneration）
ISRはSSGとSSRの良いところ取りをした手法です。ビルド時に静的生成される一方で、デプロイ後にページを個別に再生成することが可能です。これにより、静的サイトの高速性と動的サイトの柔軟性を両立できます。Next.jsなどでよく採用されています。
それぞれにメリット・デメリットがあり、現代のアプリケーションでは複数のレンダリング戦略を組み合わせて、最適なユーザー体験を目指すことが一般的です。
重要表現
CSR (Client-Side Rendering)
クライアントサイドレンダリング
ブラウザ側でページを生成する方式。高いインタラクティブ性を持つアプリ向きだが、初回表示が遅くなることも。
SSR (Server-Side Rendering)
サーバーサイドレンダリング
サーバーでページを生成し、ブラウザに配信する方式。初回表示が高速で、SEOにも効果的。
SSG (Static Site Generation)
静的サイト生成
ビルド時にすべてのページを生成し、静的ファイルとして提供する方式。高速なロードが可能だが、更新頻度が低いコンテンツ向き。
ISR (Incremental Static Regeneration)
インクリメンタル静的再生成
静的生成と動的更新を組み合わせた方式。特定のページだけを個別に再生成できる。
TTFB (Time to First Byte)
最初のバイトまでの時間
サーバーが最初のレスポンスを返すまでの時間。短いほど初期表示が速い。
FCP (First Contentful Paint)
最初のコンテンツ描画
ユーザーが最初に目にするコンテンツが表示されるまでの時間。