Загрузка данных: функция load

Странице обычно нужны данные ещё до показа: список статей, профиль пользователя. В SvelteKit их получают функцией load, которая лежит в файле рядом с +page.svelte. SvelteKit вызывает её перед отрисовкой страницы и передаёт результат в компонент.

Хранилище статей

Пока без базы данных — статьи лежат в массиве. Создайте файл src/lib/server/posts.js:

// src/lib/server/posts.js
const posts = [
  { slug: 'hello-svelte', title: 'Привет, Svelte', body: 'Svelte — это компилятор интерфейсов.' },
  { slug: 'runes', title: 'Что такое руны', body: 'Руны управляют реактивностью.' }
];
 
export function getPosts() {
  return posts;
}
 
export function getPost(slug) {
  return posts.find((post) => post.slug === slug);
}
 
export function addPost(post) {
  posts.push(post);
}

Папка src/lib/server особая: модули из неё можно импортировать только в серверном коде. Если случайно подключить такой модуль в компоненте, SvelteKit остановит сборку с ошибкой, и секреты не попадут в браузер.

Серверная функция load

Создайте src/routes/blog/+page.server.js рядом со страницей блога:

// src/routes/blog/+page.server.js
import { getPosts } from '$lib/server/posts.js';
 
export function load() {
  return {
    posts: getPosts()
  };
}

Функция возвращает объект — он станет данными страницы. Код из +page.server.js выполняется только на сервере, поэтому здесь можно обращаться к базе данных и секретным ключам.

Данные в компоненте

Страница получает результат load в свойстве data:

<!-- src/routes/blog/+page.svelte -->
<script>
  let { data } = $props();
</script>
 
<h1>Блог</h1>
<ul>
  {#each data.posts as post (post.slug)}
    <li><a href="/blog/{post.slug}">{post.title}</a></li>
  {/each}
</ul>

На http://localhost:5173/blog появится список из двух заголовков-ссылок. Сами страницы статей сделаем в уроке о динамических маршрутах.

Универсальная функция load

Файл +page.js (без .server) тоже может экспортировать load. Она выполняется и на сервере при первом открытии, и в браузере при переходах. Её используют, чтобы забрать данные из внешнего API:

// src/routes/about/+page.js
export async function load({ fetch }) {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return { author: await response.json() };
}

На странице /about данные доступны как data.author.name. Используйте fetch из аргумента функции, а не глобальный: SvelteKit передаёт cookies и не делает повторный запрос в браузере после серверной отрисовки.

Частая ошибка

Вернуть из серверной load то, что нельзя передать по сети: функцию, экземпляр класса с методами, соединение с базой. SvelteKit отправляет данные в браузер и выдаст ошибку о несериализуемом значении. Возвращайте обычные объекты, массивы, строки, числа и даты.