Что такое SvelteKit?

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

Если вы знакомы с другими JS-фреймворками, то можете смело сравнить SvelteKit с Next.js или, например, с Remix. Эти продукты, являются наборами инструментов, которые упрощают работу c React. В свою очередь SvelteKit примерно таким же образом относится к Svelte. SvelteKit использует веб-платформу и принципы прогрессивного улучшения для создания отказоустойчивых сайтов.

SvelteKit - это плагин Vite¹, который использует Vite в качестве сервера и, как любой другой сервер, отвечает за преобразование запроса в ответ. Он может адаптироваться к любой платформе, что означает, что SvelteKit запускается везде, где может быть запущен JavaScript.

Между двух миров

SvelteKit стирает грань между интерфейсом и серверной частью сайта и делает интеграцию между ними плавной, поскольку контролирует и то, и другое. Можно использовать SvelteKit для создания API точно так же, как это делает Express.

import { json } from '@sveltejs/kit'

export function GET() {
  // get posts from database
  const posts = [
    {
      slug: 'sveltekit',
      content: `
        <h1>SvelteKit</h1>
        <p>This data came from the server. 🔥</p>
    `,
    },
  ]

  return json(posts)
}

SvelteKit великолепен, когда дело доходит до выборки данных для ваших страниц, из-за того, насколько плавной является интеграция между серверной частью и внешним интерфейсом. При этом обеспечивается должный уровень безопасности запросов.

export function load() {
  // get post from database
  const post = {
    slug: 'sveltekit',
    content: `
      <h1>SvelteKit</h1>
      <p>This data came from the server. 🔥</p>
    `,
  }

  return { post }
}

<script>
  export let data
</script>

{@html data.post.content}

Меньше возни

SvelteKit практически сразу после создания приложения будет готов к работе. Он решает за пользователя целый ряд возможных проблем:

• Маршрутизация;
• Рендеринг на стороне сервера;
• Выборка данных;
• Нулевая конфигурация (ESLint, Prettier, TypeScript);
• Разделение кода (загрузка данных по запросу);
• Обработка переменных среды;
• Настраиваемый рендеринг (SSR, SSG, CSR);
• Развертывание.

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

// делаем SPA
export const ssr = false

// делаем статический сайт
export const prerender = true

// делаем сайт, без клиентской части
export const csr = false

Установив для параметра ssr значение false, а для параметра prerender значение true в нашем корневом макете, мы автоматически все приложение делаем отображаемым на стороне клиента, то есть SPA или статичным сайтом (SSG). Точно также вы можете полностью отключить клиентскую часть приложения. При этом внутри ваших страниц, или групп страниц, вы можете переопределять данные значения, по необходимости.

Выбор не по необходимости

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

Традиционные одностраничные приложения полагаются на JavaScript при своей первой загрузке, прежде чем начнется извлечение каких-либо данных, что приводит к ненужному ожиданию и просмотру спиннеров загрузки контента.

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

От веб-платформы отправляется…

SvelteKit использует Wеб-Платформу², что позволяет ему быть понятным даже тем людям, у которых нет специальных знаний технологий, специфичных для Svelte. К примеру, ссылка в SvelteKit не имеет странных оберток, вроде <Link>, потому что это просто обычный HTML.

То есть если вы совсем не знаете SvelteKit, то все равно сможете написать хотя бы одну простую страницу, потому что в ее основе будет обыкновенный HTML. SvelteKit использует веб-платформу, что означает, что вам не придется использовать какую-то специфичную для фреймворка абстракцию. Вы будете использовать веб-стандарты, такие как Fetch API, FormData и так далее.

Посмотрите, как просто выглядит работа с формой на странице авторизации:

<h1>Login</h1>

<form method="POST" action="?/login">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <button>Login</button>
</form>

export const actions = {
  login: async ({ request, cookies }) => {
    const data = await request.formData()

    const credentials = {
      name: data.get('name'),
      password: data.get('password'),
    }

    // do whatever you need
    console.log(credentials)
  },
}

Прогресс улучшения

Приложения SvelteKit более устойчивы, потому что они включаются в работу раньше JavaScript, если вы используете прогрессивное улучшение³. Вместо отключения поведения формы по умолчанию и реализации того, что браузер делает самостоятельно, SvelteKit упрощает использование веб-платформы и постепенно улучшает пользовательский интерфейс, когда на странице становится доступен JavaScript.

<script>
  import { enhance } from '$app/forms'
</script>

<h1>Login</h1>

<form method="POST" action="?/login" use:enhance>
  <input type="text" name="name" />
  <input type="password" name="password" />
  <button>Login</button>
</form>

Обратите внимание, что вам не нужно использовать ни одного fetch-запроса и форма работала бы без JavaScript, но с помощью экшена enhance из SvelteKit вы можете включить прогрессивное улучшение.

Адаптация и компоненты

SvelteKit по умолчанию использует Node.js, но может запускаться везде, где выполняется JavaScript, и при этом не требовать настроек, благодаря адаптерам.

Вы можете написать свой собственный адаптер в дополнение к одной из поддерживаемых сред вроде Cloudflare Pages, Netlify, Vercel или static, а также можете найти адаптеры, созданные сообществом, такие как адаптер для Deno.

SvelteKit помогает создавать и публиковать пакеты для NPM, если вы работаете над библиотеками компонентов с использованием svelte-package. Библиотека компонентов похожа на приложение SvelteKit по структуре, но она использует папку src/lib в качестве корневой, и при запуске svelte-package принимает содержимое src/lib и генерирует package каталог, который вы можете опубликовать на npm.

Вперед в будущее

SvelteKit - это проект с открытым исходным кодом, которым руководит Рич Харрис и команда основных авторов. Разработка финансируется Open Collective⁴ и Vercel, но ею не управляют корпорации с неясными целями и амбициями. Если вы переживаете, что крупный бизнес съедает все вокруг, то насчет Svelte можете не переживать. По крайней мере пока.

Будущее у SvelteKit светлое, и я надеюсь, что все больше людей будет его использовать в работе. Если и вы попробуете его в деле, то имейте в виду, что возможно больше никогда не захотите использовать что-либо еще.