できない.dev

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 ならすべてサーバーで動く」わけではありません。
サーバーには windowdocument が存在しないため、これらを直接参照するコードは実行時に落ちます。
SSR と SSG(ビルド時生成)も別物で、リクエストごとに HTML を生成するのが SSR です。

関連

サーバーとクライアントの描画差は React のハイドレーションエラー、DOM 前提コードの扱いは window is not defined を参照してください。