Что такое SvelteKit и что он добавляет поверх Svelte?

1. Файловая маршрутизация

src/routes/
  +page.svelte          # GET /
  +layout.svelte        # общий layout для всех дочерних маршрутов
  about/
    +page.svelte        # GET /about
  blog/
    [slug]/
      +page.svelte      # GET /blog/my-post
      +page.server.ts   # серверный load для этого маршрута
  api/
    users/
      +server.ts        # REST API: GET /api/users, POST /api/users

Что такое SvelteKit

SvelteKit — это full-stack фреймворк на базе Svelte, аналог Next.js для React или Nuxt для Vue. Он добавляет серверную часть, маршрутизацию, загрузку данных и деплой.

Что Svelte делает сам по себе

• Компилирует .svelte компоненты в JavaScript без виртуального DOM.
• Реактивность, шаблоны, анимации.
• Нет маршрутизации, нет SSR, нет сборки приложения — только компоненты.

Что добавляет SvelteKit

2. Загрузка данных через load()

// src/routes/blog/[slug]/+page.server.ts
import type { PageServerLoad } from './$types';
import { error } from '@sveltejs/kit';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const post = await fetch(`/api/posts/${params.slug}`).then(r => r.json());
  if (!post) throw error(404, 'Пост не найден');
  return { post };
};

// src/routes/blog/[slug]/+page.svelte
<script lang="ts">
  import type { PageData } from './$types';
  let { data } = $props<{ data: PageData }>();
</script>

<h1>{data.post.title}</h1>

3. Серверные Actions (формы)

// +page.server.ts
import type { Actions } from './$types';

export const actions: Actions = {
  login: async ({ request, cookies }) => {
    const form = await request.formData();
    const email = form.get('email') as string;
    // ... логика логина
    cookies.set('session', sessionId, { path: '/', httpOnly: true });
    return { success: true };
  }
};

4. SSR, SSG, CSR

// +page.ts — управление рендерингом
export const prerender = true;  // SSG: генерируется при сборке
export const ssr = false;        // CSR: только в браузере

5. Адаптеры для деплоя

• @sveltejs/adapter-node — Node.js сервер
• @sveltejs/adapter-static — статические файлы (Netlify, GitHub Pages)
• @sveltejs/adapter-cloudflare — Cloudflare Workers
• @sveltejs/adapter-vercel — Vercel Edge Functions

6. Встроенные возможности

• Хуки (hooks.server.ts): глобальный middleware
• Env-переменные: $env/static/public, $env/dynamic/private
• Алиасы: $lib → src/lib/
• i18n через параметры маршрутов или paraglide-js

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

• Имена файлов строго регламентированы: +page.svelte, +layout.svelte, +server.ts — опечатка в имени молча игнорируется.
• +page.server.ts vs +page.ts: серверный — только на сервере (secrets безопасны), универсальный — и на клиенте (не хранить secrets).
• Данные из load() сериализуются через devalue — не все типы поддерживаются (нельзя передать функции, Map сериализуется корректно).
• Layout load() выполняется при каждой навигации, не только при первом рендере — осторожно с дорогими запросами.
• Адаптеры нужно выбирать до деплоя — миграция между ними требует изменения конфигурации сборки.
• +error.svelte должен быть в каждой директории, где нужна кастомная страница ошибки — без него используется корневой.

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

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