Nevermind

Официальный выпуск SvelteKit 1.0: новый способ создания Web-приложений

2 мин

SvelteKit 1.0 уже здесь!

В декабре 2022 года команда Svelte официально объявила о выпуске SvelteKit 1.0. Это стало важной вехой не только для сообщества Svelte, но и для всей фронтенд-разработки. SvelteKit больше нельзя считать всего лишь «Next.js или Nuxt.js для Svelte». Он обладает собственной уникальной философией и стремится предложить более простой, гибкий и производительный способ создания Web-приложений.

Что такое SvelteKit?

Если вы знакомы со Svelte, то, вероятно, знаете, что сам Svelte — это компонентный фреймворк. Его радикальный компилятор во время сборки преобразует файлы .svelte в эффективный императивный JavaScript-код, обеспечивая впечатляющую производительность и чрезвычайно малые накладные расходы во время выполнения.

SvelteKit же представляет собой фреймворк приложений, построенный поверх Svelte. Он берёт на себя всё необходимое для создания полноценного приложения: маршрутизацию, серверный рендеринг (SSR), загрузку данных, адаптацию к среде развёртывания и многое другое, позволяя сосредоточиться на бизнес-логике.

Обзор основных возможностей

1. Маршрутизация на основе файловой системы

Подобно Next.js, SvelteKit автоматически создаёт маршруты на основе структуры файловой системы. Структура файлов в каталоге src/routes напрямую соответствует URL приложения.

  • src/routes/+page.svelte -> /
  • src/routes/about/+page.svelte -> /about
  • src/routes/blog/[slug]/+page.svelte -> /blog/some-post

Такой подход «соглашения важнее конфигурации» значительно упрощает управление маршрутами.

2. Гибкие режимы рендеринга

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

3. Универсальная функция load

SvelteKit унифицирует модель загрузки данных. Рядом с каждой страницей или макетом можно создать файл +page.js либо +page.server.js и экспортировать из него функцию load.

  • В +page.js функция load выполняется и на сервере, и на клиенте.
  • В +page.server.js функция load выполняется только на сервере, поэтому там можно безопасно обращаться к базе данных или закрытому API.

Данные, возвращённые функцией load, автоматически передаются соответствующему компоненту +page.svelte.

// src/routes/blog/[slug]/+page.server.js
import * as db from '$lib/server/database';

export async function load({ params }) {
  const post = await db.getPost(params.slug);
  return { post };
}

4. Адаптеры

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

  • @sveltejs/adapter-node: Для развёртывания на традиционном сервере Node.js.
  • @sveltejs/adapter-vercel: Адаптация к платформе Vercel.
  • @sveltejs/adapter-static: Предварительный рендеринг всего приложения в статические файлы, подходящие для любого статического хостинга.
  • Существуют и другие официальные и созданные сообществом адаптеры для Netlify, Cloudflare Workers и прочих платформ.

Заключение

Выпуск SvelteKit 1.0 ознаменовал зрелость экосистемы Svelte. Он объединяет исключительную производительность компилятора Svelte с тщательно продуманным фреймворком приложений и даёт разработчикам мощный и приятный опыт работы. Если вам нужен универсальный фреймворк, способный создавать как простые статические страницы, так и сложные динамические приложения, SvelteKit определённо стоит попробовать.

Svelte SvelteKit Фреймворк Релиз