SvelteKitのページオプション（prerender・ssr・csr）を整理した話

SvelteKitはページごとにレンダリング方式を切り替えられます。実務でパフォーマンスやSEOの要件に応じて使い分けます。

3つのレンダリング方式

SSR（サーバーサイドレンダリング） → デフォルト。毎回サーバーでHTMLを生成
prerender（静的生成）            → ビルド時にHTMLを生成して静的ファイルとして配信
CSR（クライアントサイドレンダリング）→ ブラウザ側でJSが動いてページを描画

① prerender — 静的ページとして生成する

// src/routes/about/+page.ts
export const prerender = true;

ビルド時にHTMLが生成されるため、サーバー処理が不要になり高速です。

重要な挙動：開発中は404になる

開発中（wrangler dev / npm run dev）
  → prerender されていない → 404

ビルド後（npm run build）
  → about.html が生成される → ページが表示される

prerender = true のページはサーバーが毎回処理するのではなく、ビルド時に生成されたHTMLファイルをそのまま返すだけになります。DBへのアクセスも不要になるため、静的コンテンツとして最速で配信できます。

ビルド後に .svelte-kit/output/prerendered/pages/about.html が生成されていれば正しく動いています。

向いているページ：
  ✅ トップページ
  ✅ Aboutページ・プライバシーポリシーなど（静的な内容）
  ✅ 内容が変わらないブログ記事

向いていないページ：
  ❌ ログインが必要なページ
  ❌ リアルタイムデータを表示するページ
  ❌ URLパラメータで内容が変わるページ

② ssr — サーバーサイドレンダリングを無効化する

export const ssr = false;

サーバーでのHTMLレンダリングをスキップして、ブラウザのみで動かします。

向いているページ：
  ✅ localStorage・windowなどブラウザAPIを使うページ
  ✅ 認証後のダッシュボードなど（SEO不要なページ）

向いていないページ：
  ❌ SEOが必要なページ（検索エンジンに読まれない）
  ❌ 初期表示速度が重要なページ

③ csr — クライアントサイドのJSを無効化する

export const csr = false;

ページのJavaScriptを読み込まなくなります。HTMLとCSSだけで動く静的ページにできます。

向いているページ：
  ✅ 完全な静的コンテンツ（プライバシーポリシーなど）
  ✅ JSが不要なページ（ページ表示の高速化）

④ 組み合わせて使う

// ビルド時に生成 + ブラウザJS不要 → 最速の静的ページ
export const prerender = true;
export const csr = false;

// SSRなし + クライアントのみ → SPAページ
export const ssr = false;

+layout.ts に書くと配下全体に適用される

// src/routes/+layout.ts
export const prerender = true;  // サイト全体を静的生成

// src/routes/dashboard/+layout.ts
export const ssr = false;  // dashboard配下はSSR無効

まとめ