Функция загрузки +page.js
Экспортируйте функцию загрузки, чтобы получить или вычислить данные до отображения страницы
«Функция загрузки +page.js» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужны функции загрузки
SvelteKit должен знать, какие данные нужны странице, чтобы получить их до отображения. Для этого используется функция загрузки.
Расположение файла
Создайте +page.js рядом с +page.svelte в той же папке.
Экспорт функции загрузки
Экспортируйте функцию с именем load.
export async function load({ params, fetch }) {
const res = await fetch("/api/items");
return { items: await res.json() };
}Разрешены асинхронные функции
Функции загрузки могут быть асинхронными. SvelteKit дожидается их завершения перед отображением страницы.
Возвращаемые данные
Всё, что вы возвращаете, передаётся странице как свойство data.
Использование функции получения данных
Используйте fetch, предоставленный функции загрузки. Он корректно обрабатывает SSR и учётные данные.
Доступ к параметрам
Параметры динамического маршрута находятся в params.
export function load({ params }) { return { slug: params.slug }; }Сначала выполняется на сервере
При первоначальных запросах функция загрузки выполняется на сервере, а при последующей навигации — на клиенте.
Универсальный и только серверный
+page.js выполняется в обоих местах, а +page.server.js — только на сервере.
Кэширование
Используйте заголовки HTTP и кэш платформы, чтобы функции загрузки работали эффективно.
Потоковая передача
Возвращайте промисы во вложенных свойствах, чтобы передавать данные потоком, не блокируя начальный HTML.
Быстрая проверка
Что возвращает функция загрузки?
Итоги
Экспортируйте load из +page.js, чтобы получать или вычислять данные. Возвращаемое значение становится свойством данных страницы.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Функция загрузки +page.js» бесплатный?
Да — полный текст урока «Функция загрузки +page.js» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Функция загрузки +page.js»?
Экспортируйте функцию загрузки, чтобы получить или вычислить данные до отображения страницы Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Функция загрузки +page.js»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Функция загрузки +page.js
- Возврат данных и использование $page.data
- Обработка ошибок в загрузке
- +page.server.js для логики только на сервере