SSR (Server-Side Rendering)
別名: SSR / サーバーサイドレンダリング / server-side rendering
SSR(Server-Side Rendering)は、サーバー側で HTML を生成してからクライアントへ返すレンダリング方式。初期表示が速く SEO に有利な一方、window など DOM 前提のコードはサーバーで動かせない。
公開:
定義
SSR(Server-Side Rendering)は、サーバー側でページの HTML を生成してからクライアントへ返すレンダリング方式です。
ブラウザは完成済みの HTML を最初に受け取るため初期表示が速く、クローラも内容を読み取りやすいので SEO に有利です。Next.js や React で採用されています。
詳細
サーバーが HTML を返した後、クライアントで JavaScript を読み込み、イベントハンドラなどを紐付ける Hydration が走って対話可能になります。
すべてをビルド時に事前生成する SSG や、ブラウザ側だけで描画する CSR とは、HTML をいつ・どこで作るかが異なります。
よくある誤解
「SSR ならすべてサーバーで動く」わけではありません。
サーバーには window や document が存在しないため、これらを直接参照するコードは実行時に落ちます。
SSR と SSG(ビルド時生成)も別物で、リクエストごとに HTML を生成するのが SSR です。
関連
サーバーとクライアントの描画差は React のハイドレーションエラー、DOM 前提コードの扱いは window is not defined を参照してください。