Релиз SvelteKit 1.0. Что нового в SvelteKit?

Вышел релиз SvelteKit 1.0. На сегодняшний день это рекомендуемый способ создания приложений Svelte. Для создания проекта достаточно запустить npm create svelte@latest.

Что такое SvelteKit?

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

Особенности SvelteKit

По умолчанию SvelteKit использует навигацию на стороне клиента после начальной загрузки страницы, отображаемой сервером. Это обеспечивает более быстрые переходы между страницами, состояние, которое сохраняется между страницами (например, положение прокрутки боковой панели), и загрузку меньшего количества данных. Это также позволяет избежать повторного запуска сторонних скриптов, таких как аналитика, при каждой загрузке страницы. SvelteKit позволяет вам использовать один язык вместо двух тесно связанных приложений (одно для создания HTML, другое для обработки взаимодействия на стороне клиента). Поскольку SvelteKit работает везде, где работает JavaScript, вы можете развернуть свое приложение как традиционный NodeJS сервер или использовать serverless функции. С помощью SvelteKit можно создавать приложения с персонализированными данными без снижения производительности и без layout shift после запроса данных, который происходит после загрузки страницы.

Переходные приложения (transitional apps)

SvelteKit вводит такое понятие как переходное приложение (transitional apps). Что такое переходное приложение? В переходных приложениях представлены элементы как традиционной, так и современной архитектуры. Этот термин заимствован из понятия «переходный дизайн» в дизайне интерьера. Переходные приложения, как и многостраничные приложения, обрабатываются на стороне сервера для быстрой начальной загрузки, устойчивы, поскольку по умолчанию работают без JS, и обеспечивают согласованность благодаря встроенным функциям специальных возможностей. Но, как и одностраничные приложения, они также имеют единую кодовую базу, быструю навигацию, персистентность элементов и управление состоянием на стороне клиента.

В этой статье повнимательнее рассмотрим два новых хука: useTransition() и useDeferredValue(). Эти два хука дают возможность определять приоритет обновления состояния, или, скорее, указывать, является ли обновление менее важным, чем другие, и откладывать его в пользу более срочных.

Какое обновление можно считать срочным, а какое обычным?

• Срочные обновления: отражают прямое взаимодействие, такое как набор текста, клики, нажатия и т. д., т.е. то с чем взаимодействует пользователь. Когда вы вводите текст в поле ввода, вы хотите сразу увидеть введенный вами текст. В противном случае UI будет казаться медленным и подлагивать. Поэтому мы хотим сделать такие обновления приоритетным.
• Обычные обновления: переход пользовательского интерфейса из одного вида в другой. Пользователи знают, что представление должно измениться или обновиться (например, когда ожидается ответ на запрос данных). Даже если есть небольшая задержка, это можно рассматривать как ожидаемое поведение, и это не будет восприниматься как медлительность приложения.

Итак, теперь подробнее рассмотрим эти два новых хука, объясним, когда их можно использовать, и посмотрим на конкретные примеры того, как их реализовать.

Хук useTransition() и функция startTransition()

До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом. С помощью useTransition() теперь можно пометить некоторые обновления состояния как несрочные.

Когда использовать useTransition() ?

Одним из примеров может быть список товаров с параметрами фильтрации. Когда вы переключаете чекбоксы, чтобы выбрать размер или цвет одежды, вы ожидаете, что чекбоксы сразу же отобразят отмеченное или снятое состояние. А сам список товаров, которые необходимо обновить согласно фильтрам, может быть отдельным и менее срочным обновлением.

Как использовать useTransition() ?

function App() {
 const [isPending, startTransition] = useTransition();
 const [searchQuery, setSearchQuery] = useState('');
 
 // запрос данных, который занимает некоторое время
 const filteredResults = getProducts(searchQuery);
 
 function handleQueryChange(event) {
   startTransition(() => {
     // оборачивая setSearchQuery() в startTransition(),
     // мы помечаем эти обновления как менее важные
     setSearchQuery(event.target.value);
   });
 }
 
 return (
   <div>
     <input type="text" onChange={handleQueryChange} />
 
     {isPending && <span>Loading...</span>}
     <ProductsList results={filteredResults} />
   </div>
 );
}

Хук useDeferredValue()

useDeferredValue() очень похож на useTransition() в том, что он позволяет отложить несрочное обновление состояния, но применяется его к части дерева. Это похоже методы debounce и throttle, которые мы часто используем для отложенных обновлений. React будет работать с такими обновлениями, как только завершатся срочные обновления.

Когда использовать useDeferredValue()?

С помощью useTransition() вы сами решаете, когда конкретное обновление состояния может быть помечено как менее срочное. Но иногда такой возможности может и не быть, например, если фрагмент кода находится в сторонней библиотеке. В таких случаях можно воспользоваться хуком useDeferredValue(). С помощью useDeferredValue() вы можете обернуть значение и пометить его изменения как менее важные и, следовательно, отложить повторный рендеринг. useDeferredValue() будет возвращать предыдущее значение до тех пор, пока есть более срочные обновления для завершения и отображения дерева с обновленным значением.

Как использовать useDeferredValue() ?

function ProductsList({ results }) {
 // deferredResults получат обновленные данные
 // когда завершатся срочные обновления
 const deferredResults = useDeferredValue(results);
 
 return (
   <ul>
     {deferredResults.map((product) => (
       <li key={product.id}>{product.title}</li>
     ))}
   </ul>
 );
}

Итоги

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