Типы проектов

Гибкий рендеринг в SvelteKit

SvelteKit предлагает настраиваемый рендеринг, позволяющий собирать и развёртывать проект различными способами. Вы можете создавать приложения всех перечисленных типов и не только. Настройки рендеринга не исключают друг друга — можно выбрать оптимальный способ для разных частей приложения.

Если вы ещё не определились с подходом — не беспокойтесь! Способ сборки, развёртывания и рендеринга контролируется выбранным адаптером и небольшой конфигурацией, которые всегда можно изменить позже. Независимо от типа проекта, структура проекта и маршрутизация остаются одинаковыми.

Рендеринг по умолчанию

По умолчанию при посещении сайта SvelteKit использует серверный рендеринг (SSR) для первой страницы и клиентский рендеринг (CSR) для последующих. SSR улучшает SEO и воспринимаемую скорость загрузки, а CSR ускоряет навигацию между страницами без перерисовки общих компонентов. Приложения, построенные с таким подходом, называют гибридными.

Генерация статических сайтов (SSG)

SvelteKit может работать как генератор статических сайтов (SSG) с полным пререндерингом через adapter-static. Также можно пререндерить только часть страниц, используя опцию prerender, а остальные рендерить динамически.

Для очень больших сайтов можно использовать постепенное обновление статики (ISR) в adapter-vercel для ускорения сборки. В отличие от специализированных SSG, SvelteKit позволяет гибко комбинировать разные типы рендеринга.

Одностраничное приложение (SPA)

Одностраничные приложения (SPA) используют исключительно клиентский рендеринг (CSR). SvelteKit поддерживает создание SPA с бэкендом на любом языке. Если бэкенд не требуется, можно игнорировать разделы документации о server-файлах.

Многостраничное приложение (MPA)

Хотя SvelteKit редко используется для традиционных MPA, можно отключить JavaScript на странице через csr = false (серверный рендеринг всех переходов) или использовать data-sveltekit-reload для выборочного SSR.

Отдельный бэкенд

При использовании бэкенда на Go, Java, PHP и других языках рекомендуется развёртывать фронтенд отдельно через adapter-node или serverless-адаптер. Альтернатива — SPA, но это ухудшает SEO и производительность. В этом случае можно игнорировать server-файлы и изучить FAQ по интеграции с внешним API.

Serverless-приложения

SvelteKit легко развернуть на serverless-платформах. Адаптер по умолчанию поддерживает множество платформ, а специализированные адаптеры (adapter-vercel, adapter-netlify, adapter-cloudflare) добавляют платформо-специфичные функции, включая edge-рендеринг. Сообщество разработало адаптеры для почти любых сред.

Собственный сервер

Для развёртывания на собственном сервере или VPS используйте adapter-node.

Контейнеризация

Приложения на adapter-node можно запускать в Docker/LXC.

Библиотеки

С помощью @sveltejs/package (опция library в sv create) можно создавать библиотеки для других Svelte-приложений.

Офлайн-приложения

Поддержка service workers позволяет создавать офлайн-приложения и PWA.

Мобильные приложения

SPA из SvelteKit можно преобразовать в мобильное приложение через Tauri или Capacitor с доступом к камере, геолокации и push-уведомлениям. Для оптимизации используйте bundleStrategy: 'single' (особенно для Capacitor с HTTP/1).

Десктопные приложения

SPA превращаются в десктопные приложения через Tauri, Wails или Electron.

Браузерные расширения

Для сборки расширений подходят adapter-static или специализированные адаптеры.

Встраиваемые устройства

Благодаря эффективному рендерингу Svelte работает на маломощных устройствах (микроконтроллеры, ТВ). Для снижения числа запросов используйте bundleStrategy: 'single'.