TL;DR

ページの内容をサーバで生成すること。対になるのは、ブラウザ上の JavaScript でページを生成するクライアントサイドレンダリング(CSR)である。

仕組み

SvelteKit の用語集では、SSR を「サーバでページの内容を生成すること」、CSR を「Web ブラウザで JavaScript を使ってページの内容を生成すること」と定義している。また、ビルド時にページの内容を計算して HTML を保存しておくことは、プリレンダリングと呼んで区別している。

SSR で生成した HTML はそのままでは静的なので、ブラウザでハイドレーションしてイベントハンドラを結び付け、操作できるようにする。

例

SvelteKit はデフォルトで SSR と CSR を組み合わせる。初回アクセス時は SSR した HTML と最低限の JavaScript を送ってハイドレーションし、その後のページ遷移は CSR で処理する。

React Server Components では、RSC Payload とクライアントコンポーネントから初期表示の HTML を作る段階が SSR にあたる。

注意点

SSR 中には実行されない処理がある。たとえば Svelte の $effect は SSR 中には動かない。また、ランタイム CSS-in-JS のように、SSR と組み合わせると追加の設定が必要になったり、問題が起きたりするライブラリもある。

関連

出典