Что такое Svelte и SvelteKit и чем они отличаются от React

Коротко: что это такое

Svelte — инструмент для создания интерфейсов, как React или Vue. Главное отличие: большая часть работы происходит на этапе сборки. Компилятор читает ваши компоненты и генерирует обычный JavaScript, который точечно обновляет DOM. Виртуального DOM и сравнения деревьев в браузере нет.

SvelteKit — фреймворк поверх Svelte, примерно как Next.js поверх React. Он отвечает за роутинг, серверный рендеринг, загрузку данных, обработку форм и сборку под разные хостинги.

Компилятор вместо рантайма

React поставляет в браузер библиотеку, которая при каждом изменении состояния перерисовывает компонент и сравнивает результат с прошлым. Svelte заранее знает, какие куски разметки зависят от каких переменных, и пишет код, обновляющий только их.

Что это даёт на практике:

• меньше кода в бандле для небольших и средних приложений — нет крупного рантайма;
• меньше ручной оптимизации: не нужны аналоги useMemo и useCallback, чтобы избежать лишних перерисовок;
• компоненты ближе к HTML: разметка, <script> и <style> в одном .svelte-файле, стили изолированы по умолчанию.

Реактивность на рунах

В актуальных версиях Svelte реактивность описывается рунами — специальными функциями со знаком $:

<script>
  let count = $state(0);
  let double = $derived(count * 2);

  $effect(() => {
    console.log('count изменился:', count);
  });
</script>

<button onclick={() => count++}>
  {count} × 2 = {double}
</button>

• $state — реактивное значение, его можно менять обычным присваиванием;
• $derived — вычисляемое значение, пересчитывается само;
• $effect — побочный эффект, который запускается при изменении зависимостей;
• $props — получение пропсов компонента.

Для сравнения: в React то же самое потребует useState, а зависимости эффекта нужно перечислять вручную.

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

• Роутинг на файлах: папка src/routes/blog/[slug] становится страницей /blog/:slug.
• SSR, статическая генерация и SPA — режим можно выбирать для каждой страницы.
• Функции load для получения данных на сервере или клиенте.
• Form actions — обработка форм на сервере, которая работает даже без JavaScript в браузере.
• Адаптеры для деплоя на Node.js, статический хостинг и serverless-платформы.

Сравнение с React

Разница в размере бандла заметнее всего на лёгких страницах. В больших приложениях вес чаще определяют ваш собственный код и сторонние библиотеки, а не фреймворк.

Когда выбирать Svelte

Svelte разумен, если:

• важна скорость загрузки на слабых устройствах и медленном интернете;
• проект — лендинг, контентный сайт, виджет или встраиваемый интерфейс;
• команда небольшая и уже знает Svelte или готова его освоить;
• не нужны специфичные React-библиотеки (сложные таблицы, редакторы, дизайн-системы).

React надёжнее, если:

• проект большой и долгий, состав команды будет меняться;
• нужна мобильная версия на React Native;
• вы опираетесь на готовые компоненты и интеграции из экосистемы React.

Частые ошибки при выборе

• Выбирать фреймворк только по бенчмаркам, не проверив нужные библиотеки.
• Забывать про найм: через год проект придётся поддерживать новым людям.
• Смешивать старый синтаксис Svelte ($: и export let) с рунами без плана миграции.