Ранний взгляд на SvelteKit

SvelteKit является преемником Sapper, полнофункциональной платформы приложений предварительной отрисовки на стороне сервера для Svelte, аналогичной Next.js для React.

SvelteKit во многом похож на Sapper, но добавляет некоторые новые и амбициозные функции. В частности, SvelteKit позволяет использовать различные производственные среды, включая бессерверные среды. SvelteKit также использует Vite в качестве инструмента разработки, который использует модули ES для быстрого и детального HMR (горячей замены модулей) во время разработки.

Прочтите предварительный обзор SvelteKit, версия которого приближается к выпуску 1.0.

Обзор SvelteKit

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

Давайте начнем новый проект SvelteKit, чтобы получить конкретное представление о том, что это значит.

В командной строке введите команды, показанные в листинге 1, чтобы создать новый проект.

Листинг 1. Запуск нового проекта SvelteKit

npm init svelte@next test
cd test
npm install
npm run dev

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

Когда ты cd в /test каталог и запустите npm run devсервер разработки запустится, и вы сможете посетить демонстрационное приложение по адресу localhost:3000. Вы увидите что-то вроде рисунка 1.

ИДГ

Оставьте приложение работающим. В другом окне взгляните на содержимое созданного. Вы увидите, что типичный макет приложения на основе Node/npm находится в корневом каталоге, включая package.json и /node_modules.

Помимо этого, есть некоторые особенности SvelteKit: sveltekit.config.js и /src и /static каталоги.

sveltekit.config.js Поначалу файл очень короткий, но в нем вы можете настроить некоторые очень мощные функции. /static Каталог — это место, куда помещаются статические ресурсы, такие как изображения. Сердце приложения находится в /src.

Каталог SvelteKit /src

Загляните внутрь /src. Там вы найдете несколько стандартных файлов, включая hooks.js (для определения сквозного кода, который выполняется при каждом запросе) и app.html (который загружает переднюю часть). Вам не нужно беспокоиться об этом прямо сейчас.

Каталог SvelteKit /src/routes

Центральная часть вашего нового приложения содержится в файле /src/routes каталог. Открыть /src/routes, и вы увидите несколько файлов и каталог. Давайте рассмотрим каждый по очереди.

• about.svelte: это внешний маршрут, соответствующий странице, которая в настоящее время размещена по адресу localhost:3000/about. Это демонстрирует базовую концепцию внешних маршрутов на основе файловой системы.
• index.svelte: по соглашению этот внешний маршрут соответствует корневому URL-адресу, localhost:3000/.
• __layout.svelte: это специальный файл, определяющий общий макет, который будет применяться ко всем страницам. Если вы откроете его, вы увидите Slot компонент. Сюда будет вставлено содержимое страницы.
• /todos: Этот каталог содержит содержимое, которое управляет localhost:3000/todos страница. Внутри /todosвы найдете следующие файлы:
  • _api.js: В SvelteKit файлы, перед которыми стоит символ подчеркивания, нет маршруты. Вместо этого они используются вами, разработчиком, как внутренние модули. Вы можете видеть, что этот файл экспортирует модуль JS, который используется где-то еще.
  • index.svelte: Вы видели, что это применимо к пустому URL-пути, а также работает для вложенных каталогов. Таким образом, этот файл соответствует localhost:3000/todos/ страница.
  • index.json.js: Это задний маршрут. Он следует тому же соглашению, что и внешние маршруты, и, следовательно, предоставляет содержимое localhost:3000/todos.json. Если вы создадите несколько задач, вы увидите здесь выходные данные в формате JSON. Этот JSON используется внешними маршрутами. Короче говоря, он предоставляет RESTful API.
  • [uid].json.js: этот, казалось бы, странный синтаксис позволяет использовать параметры URL-пути. Токен внутри квадратных скобок становится доступным для кода на этом маршруте. В этом случае код использует uid переменная для ссылки на UID задачи, над которой ведется работа.

Несколько общих комментариев: во-первых, каждый внешний маршрут определяется маршрутами с .svelte расширение, и каждая из этих страниц представляет собой компонент Svelte, который создает эту страницу. Во-вторых, каждый внутренний маршрут представляет собой файл с .js расширение.

Интерфейсные маршруты — это стандартные компоненты Svelte со всеми вытекающими отсюда возможностями, включая возможность создавать сложные вложенные макеты на основе компонентов. Внутренние маршруты по своим API очень похожи на конечные точки Express, но они не совсем совпадают. Помните, что SvelteKit позволяет экспортировать ваше приложение в несколько рабочих сред. Node.js — лишь один из них.

Адаптеры SvelteKit

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

Это достигается с помощью адаптеров, среди которых есть несколько официальных адаптеров и несколько адаптеров сообщества. И ничто (кроме времени и воли) не помешает вам создать свой собственный адаптер.

Вы можете видеть, что несколько адаптеров предназначены для бессерверных сред, таких как Cloudflare Workers и Vercel, и есть два «стандартных» адаптера для Node.js и статических веб-сайтов. Обратите внимание, что статический адаптер означает именно это: он выводит нединамический веб-сайт.

Серверный рендеринг и SPA

Здесь суммированы самые фундаментальные концепции приложения SvelteKit, но это лишь поверхностное представление о том, на что способен SvelteKit. В частности, SvelteKit — это платформа SSR (серверный рендеринг). Это означает, что первый компонент клиентской страницы будет (по умолчанию) отображаться на сервере и доставляться в браузер в полной реализации. После этого страницы будут загружены в стиле SPA (одностраничное приложение) как компоненты, отображаемые на стороне клиента.

Это повышает производительность и преимущества SEO (аналогично Next.js) и означает, что ваши страницы должны быть написаны так, чтобы работать как на сервере, так и на клиенте.

На практике это означает, что компоненты Svelte не должны полагаться только на функции на стороне клиента (например, window объект). Однако есть способы обойти эту проблему, включая возможность определять, когда страница отображается в браузере.

Более того, это означает, что страницы могут получать доступ к удаленным API как с сервера, так и с клиента (через SvelteKit fetch функция, являющаяся заменой стандартного API выборки браузера).

Функция SvelteKit load()

Наконец, изоморфная природа страниц SvelteKit означает, что они обладают суперспособностью предварительного доступа к хранилищу данных. Это видно в Next.js как getStaticProps и getServerSideProps. В SvelteKit этот доступ осуществляется через load функция, которую можно экспортировать по страницам. (SvelteKit’s load похож на Сапера preload).

load Функция, экспортируемая страницами в SvelteKit, представляет собой уникальный подход к обработке загрузки данных в SSR. Вы можете думать об этом как о специальном блоке кода на стороне сервера, который передает данные на страницу перед ее отображением. Рассмотрим функцию загрузки, экспортируемую /src/routes/todos/index.svelte в листинге 2.

Листинг 2. Функция загрузки задач

<script context="module">
        import { enhance } from '$lib/form';

        // see https://kit.svelte.dev/docs#loading
        export const load = async ({ fetch }) => {
                const res = await fetch('/todos.json');

                if (res.ok) {
                        const todos = await res.json();
                        return {
                                props: { todos }
                        };
                }

                const { message } = await res.json();
                return {
                        error: new Error(message)
                };
        };
</script>

Обратите внимание, что функция предоставляется через аргумент со специальным fetch функция. Этот fetch Функция имеет тот же API, что и стандартный, с которым вы знакомы по браузеру, но позволяет SvelteKit запускать ее и на сервере.

Обратите также внимание на то, что load функция возвращает значение. Эти значения автоматически отображаются на странице при ее рендеринге. В данном случае это либо набор задач, либо сообщение об ошибке, если что-то пошло не так.

Next.js следующего поколения

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

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