概要
SSRとは、Webサイトやアプリケーションで使われる表示の仕組みの一つで、
「サーバー側でページのHTMLを生成してから、ユーザーに送る方式」のことです。
ユーザーがページにアクセスすると、サーバーがその場でページを作って送り返すため、
初回表示が速く、検索エンジンにも認識されやすいという特徴があります。
正式名称
Server-Side Rendering（サーバー・サイド・レンダリング）
略称
SSR（エス・エス・アール）
特徴
- ページのHTMLをサーバーで生成してから送信する
- 初回表示が速くなる（特に低スペック端末や遅い回線で有利）
- SEO（検索エンジン最適化）に強い
- サーバーに負荷がかかる場合がある
- リアルタイムのやり取りにはSPAより向いていない場合もある
- JavaScriptがオフでもある程度表示される
具体例
- ニュースサイトやブログ
→ 記事の内容をすぐ表示させたい。検索で見つけてもらいたい。 - ECサイトの商品ページ
→ 商品名や説明を検索でヒットさせたい。ページ表示も速くしたい。 - Next.jsの
getServerSideProps()関数
→ ReactでSSRを実装する際によく使われる。
関連用語
| 用語 | 解説 |
|---|---|
| SPA（Single Page Application） | クライアント側でページ表示を管理する方式。対義的な存在。 |
| CSR（Client-Side Rendering） | クライアント（ユーザーのブラウザ）でHTMLを生成する仕組み。 |
| SSG（Static Site Generation） | ビルド時にHTMLを生成しておく方式。SSRとよく比較される。 |
| Next.js | SSRやSSGが使えるReactベースのフレームワーク。 |