Что такое SvelteKit

SvelteKit — это полноценный фреймворк приложений поверх Svelte: роутинг, серверный рендеринг, сборка и деплой из коробки.

«Svelte — это кисть. SvelteKit — это мастерская.» Один даёт компоненты, другой — всё, чтобы построить и выкатить приложение.

Svelte сам по себе — это слой компонентов. Чтобы построить настоящее приложение, нужно больше: маршрутизация между страницами, серверный рендеринг для скорости и SEO, загрузка данных, обработка форм, сборка под конкретный хостинг. Всё это даёт SvelteKit — официальный метафреймворк, аналог Next.js для React или Nuxt для Vue.

SvelteKit строится на двух китах: файловая маршрутизация и адаптеры. Маршруты определяются структурой папок в src/routes — не нужно вручную описывать таблицу путей. Адаптеры берут собранное приложение и готовят его под нужную платформу: Vercel, Netlify, Node-сервер, статический хостинг. Это значит, что один и тот же код можно развернуть почти где угодно, поменяв лишь адаптер.

SvelteKit гибок в режимах рендеринга. По умолчанию он использует серверный рендеринг (SSR): сервер отдаёт готовый HTML, что быстро и хорошо для поисковиков, а затем страница «оживает» на клиенте (гидратация). Можно включить статическую генерацию (SSG) с пререндерингом для контента, который не меняется, или оставить чистый клиентский рендеринг для отдельных страниц. Всё настраивается на уровне маршрута.

            SvelteKit
  +----------------+-----------------+
  |                |                 |
  Роутинг       Загрузка        Адаптеры
  (src/routes)  данных (load)   (vercel/node/static)
  |                |                 |
  файловая      SSR / SSG /       деплой куда угодно
  структура     CSR на выбор

Создаётся SvelteKit-проект тем же npx sv create — нужно лишь выбрать соответствующий шаблон в мастере. Дальше вы добавляете страницы, создавая папки и файлы по соглашению, о котором поговорим в следующих уроках.

Как это работает под капотом

SvelteKit — это сервер (или функция), который по входящему URL находит подходящий маршрут, запускает его загрузчик данных, рендерит компонент страницы в HTML и отдаёт браузеру. Смоделируем сопоставление URL с обработчиком — ядро любого роутера.

// Мини-роутер: URL -> обработчик маршрута
const routes = {
  '/': () => 'Главная',
  '/about': () => 'О нас',
  '/blog': () => 'Блог'
};
function handle(url) {
  const route = routes[url];
  return route ? route() : '404 — не найдено';
}

console.log(handle('/'));      // Главная
console.log(handle('/about')); // О нас
console.log(handle('/xyz'));   // 404 — не найдено

Попробуй сам ▶ — вставь код в консоль браузера (F12 → Console) и нажми Enter, чтобы увидеть вывод.

Частые ошибки

• Путать Svelte и SvelteKit. Svelte — компоненты; SvelteKit — приложение вокруг них.
• Думать, что SSR обязателен всегда. Режим рендеринга выбирается под задачу.
• Игнорировать адаптеры до деплоя. Правильный адаптер нужно выбрать заранее под хостинг.

Best practices

• Начинайте новое приложение сразу на SvelteKit, а не на чистом Svelte.
• Выбирайте режим рендеринга осознанно: SSR для динамики и SEO, SSG для статики.
• Определитесь с хостингом заранее, чтобы поставить нужный адаптер.

Почему метафреймворк, а не просто роутер

Можно спросить: зачем целый SvelteKit, если нужен всего лишь переход между страницами? Ответ в том, что настоящее приложение требует куда больше, чем роутер, и попытка собрать всё это вручную из разрозненных библиотек быстро оборачивается хрупкой самоделкой. SvelteKit даёт согласованные ответы на типовые вопросы любого веб-приложения: где брать данные для страницы и как не показать пустой экран, пока они грузятся; как отрендерить страницу на сервере для скорости и поисковиков, а затем оживить её на клиенте; как обработать отправку формы так, чтобы она работала даже без JavaScript; как собрать всё это под конкретный хостинг. Каждый из этих вопросов в SvelteKit решён продуманно и единообразно, а решения хорошо стыкуются друг с другом. Вы получаете не набор инструментов, которые надо самому подружить, а цельную мастерскую, где всё рассчитано на совместную работу. Именно это превращает компоненты Svelte в готовое к продакшену приложение.

Итог: SvelteKit — это метафреймворк над Svelte с файловой маршрутизацией, загрузкой данных, гибкими режимами рендеринга и адаптерами под разные платформы. Он превращает компоненты в готовое к деплою приложение.