サーバーサイドレンダリング とは
サーバー側レンダリング
**SSR(サーバーサイドレンダリング)**は、クライアントに送信する前にサーバー上でWebページをレンダリングする技術で、高速な読み込みとSEO最適化を実現します。
仕組み
- サーバーがブラウザからリクエストを受信
- 完全なHTMLページを生成
- 準備済みHTMLをクライアントに送信
- ブラウザがコンテンツを即座に表示
- JavaScriptがページを"ハイドレート"してインタラクティブに
メリット
- 高速な初回コンテンツ描画(FCP)
- 優れたSEO最適化
- JavaScriptなしで動作
- ソーシャルメディアメタデータの改善
- 低速デバイスに最適
デメリット
- サーバー負荷
- インタラクティブまでの時間(TTI)
- キャッシュの複雑さ
- インフラコストの増加
CSRとの比較
- SSR:HTMLはサーバーで生成
- CSR:HTMLはブラウザで生成
- SSG:HTMLはビルド時に生成
SSR対応フレームワーク
- Next.js(React)
- Nuxt.js(Vue)
- SvelteKit(Svelte)
- Angular Universal
- Remix
使用すべき場面
- コンテンツサイトとブログ
- Eコマース
- ニュースポータル
- SEO重視のウェブサイト