Постепенная гидратация
Гидратируйте только части страницы, которым нужна интерактивность, чтобы ускорить TTI.
«Постепенная гидратация» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что такое гидратация
Гидратация — это процесс добавления поведения JS к HTML, отрендеренному сервером, в браузере.
Зачем нужна постепенность
Полная гидратация больших страниц требует ресурсов CPU. Постепенная гидратация сначала расставляет приоритеты для критически важной интерактивности.
Настройки SvelteKit по умолчанию
SvelteKit выполняет гидратацию для каждой страницы, а не для каждого компонента. Маршруты гидратируются независимо, когда это необходимо.
Архитектура островов
Сочетайте статическую предварительную генерацию с выборочной гидратацией только интерактивных компонентов.
Ленивая загрузка компонентов
Используйте динамический import() для некритичных компонентов, чтобы отложить их загрузку.
const Comments = await import("./Comments.svelte");Наблюдатель пересечения
Гидратируйте виджеты ниже видимой области, когда они прокручиваются в область просмотра.
Используйте действия
Оберните ленивую загрузку в действие Svelte для повторного использования.
Преимущества для производительности
Более низкий TTI, меньший первоначальный объём JS, более быстрая первоначальная интерактивность.
Компромиссы
Отложенная гидратация может задержать интерактивность отложенных частей. Планируйте это тщательно.
SSR и гидратация
SSR обеспечивает первоначальную отрисовку, а гидратация добавляет поверх неё поведение JS.
Сравнение фреймворков
Astro и Qwik популяризировали подходы с островами и возобновлением, а SvelteKit вручную предоставляет похожие инструменты.
Быстрая проверка
Что такое постепенная гидратация?
Повторение
Откладывайте гидратацию некритичных компонентов с помощью динамических импортов и наблюдателей пересечения, чтобы ускорить TTI.
Часто задаваемые вопросы
Урок «Постепенная гидратация» бесплатный?
Да — полный текст урока «Постепенная гидратация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Постепенная гидратация»?
Гидратируйте только части страницы, которым нужна интерактивность, чтобы ускорить TTI. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Постепенная гидратация»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Потоковая передача данных с промисами в load
- Отложенная загрузка и интерфейс по типу Suspense
- Потоковая передача с сервера через +server.js
- Постепенная гидратация