Как управлять SSR и CSR в SvelteKit? Что такое export const ssr = false?

Управление SSR и CSR в SvelteKit

SvelteKit поддерживает гибкий рендеринг: SSR (сервер), CSR (клиент), SSG (статика) и гибриды — настраивается на уровне каждого маршрута.

Режимы рендеринга

• SSR (по умолчанию): страница рендерится на сервере, HTML отправляется браузеру, затем гидрируется.
• CSR: export const ssr = false — отключает серверный рендеринг, страница рендерится только в браузере.
• SSG: export const prerender = true — страница генерируется на этапе сборки.

export const ssr = false

// +page.ts или +page.server.ts
export const ssr = false;

// Теперь страница рендерится только в браузере
// Серверный load() всё ещё работает, но HTML не генерируется на сервере

Когда использовать ssr = false:

• Страница использует браузерные API (canvas, WebGL, localStorage) напрямую в компоненте.
• Компонент использует библиотеку без SSR-поддержки (некоторые chart-библиотеки, редакторы кода).
• Страница за аутентификацией, которую не нужно индексировать.

Комбинирование настроек

// Статическая страница (SSG)
export const prerender = true;
export const ssr = true; // генерируется HTML-файл

// Только клиентская (SPA-режим)
export const ssr = false;
export const prerender = false;

// CSR без hydration overhead
export const csr = false; // без JS на клиенте вообще
export const ssr = true;

Глобальные настройки через svelte.config.js

// svelte.config.js
import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter(),
    // Отключить SSR глобально (полный SPA)
    // Лучше управлять на уровне маршрутов
  }
};

Динамическая загрузка компонентов без SSR

// +page.svelte — компонент загружается только в браузере
<script lang="ts">
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';
  import type { ComponentType } from 'svelte';

  let Chart: ComponentType | null = null;

  onMount(async () => {
    const module = await import('$lib/Chart.svelte');
    Chart = module.default;
  });
</script>

{#if Chart}
  <svelte:component this={Chart} />
{:else}
  <p>Загрузка...</p>
{/if}

load() при разных режимах

// +page.server.ts — работает только на сервере
export const ssr = false; // но load() всё равно выполняется на сервере!
// При ssr=false данные загружаются через fetch на клиенте

// +page.ts — работает и на сервере, и на клиенте
export async function load({ fetch }) {
  // fetch здесь — нативный на сервере, расширенный на клиенте
  const data = await fetch('/api/data').then(r => r.json());
  return { data };
}

Подводные камни

• При ssr = false поисковые роботы не видят контент — не использовать для SEO-важных страниц.
• +page.server.ts с ssr = false всё равно рендерит форму — серверный load выполняется при навигации через SvelteKit router.
• export const csr = false отключает весь JS на странице — формы работают нативно, но интерактивность теряется.
• При prerender = true нельзя использовать locals или cookies в load() — страница статична для всех.
• export const ssr = false в корневом +layout.ts отключает SSR для всего приложения — осторожно при частичном использовании.
• Разные адаптеры обрабатывают prerender по-разному: adapter-static требует prerender = true для всех маршрутов.
• Hydration mismatch при ssr = true и использовании Math.random() приводит к мерцанию UI — переносить в onMount.
• При ssr = false и медленном соединении пользователь видит пустую страницу дольше — добавляйте скелетоны.

• Путать SSR and CSR options с похожим API из соседнего фреймворка.
• Не объяснять, где код выполняется: сервер, клиент, build step или runtime.
• Игнорировать влияние на hydration, cache, bundle size или безопасность.

• Точно объясняет назначение механизма «SSR and CSR options».
• Показывает корректный минимальный пример без выдуманных API.
• Называет ограничения, failure modes и production-компромиссы.