Введение

Прежде чем мы начнем

Что такое SvelteKit?

SvelteKit — это фреймворк для быстрой разработки надежных и производительных веб-приложений с использованием Svelte. Если вы переходите с React, SvelteKit похож на Next. Если вы переходите с Vue, SvelteKit похож на Nuxt.

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

Что такое Svelte?

Коротко говоря, Svelte — это способ создания пользовательских интерфейсов (например, навигационной панели, раздела комментариев или контактной формы), с которыми пользователи взаимодействуют в браузере. Компилятор Svelte преобразует ваши компоненты в JavaScript-код, который рендерит HTML-страницу, и в CSS для её стилизации. Для понимания этого руководства знание Svelte не обязательно, но оно поможет. Если хотите узнать больше, изучите руководство по Svelte.

SvelteKit и Svelte: в чём разница?

Svelte отвечает за рендеринг UI-компонентов. Вы можете комбинировать эти компоненты и отрисовывать целые страницы, используя только Svelte, но для создания полноценного приложения Svelte недостаточно.

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

Он мгновенно отображает изменения кода в браузере, обеспечивая молниеносную и удобную разработку благодаря использованию Vite с плагином для Svelte, который поддерживает горячую замену модулей (HMR).