0Page load functions help you get data or do setup work before a page shows. This makes sure the page has what it needs right away.
export async function load({ params, fetch, url, session }) { // your code here return { /* data for the page's `data` prop */ }; }
The load function runs before the page shows.
You return an object whose properties are available on the page's data prop.
export async function load() { return { message: 'Hello!' }; }
export async function load({ params }) { const id = params.id; return { id }; }
export async function load({ fetch }) { const res = await fetch('/api/data'); const data = await res.json(); return { data }; }
This example fetches a todo item before the page loads. The data is passed via the data prop and shown on the page.
/* +page.js */ export async function load({ fetch }) { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); const todo = await response.json(); return { todo }; } /* +page.svelte */ <script> export let data; </script> <h1>Todo Item</h1> <p><strong>ID:</strong> {data.todo.id}</p> <p><strong>Title:</strong> {data.todo.title}</p> <p><strong>Completed:</strong> {data.todo.completed ? 'Yes' : 'No'}</p>
The load function runs on the server during the first page load and on the client for navigation.
Always return an object whose properties will be available on the data prop to pass data to your page component.
Use fetch inside load to get data safely with the same origin.
Page load functions run before the page appears to get data or do setup.
They return a data object whose properties are available on the page component's data prop.
Use them to fetch data, check user state, or redirect before showing the page.
load function in a +page.js file in SvelteKit?load in SvelteKitload function runs before the page renders to get data or do setup.load function in +page.js?load is exported as a named export, usually a const arrow function returning data without wrapping in props.load as a named const returning an object with data directly, which is correct. export function load() { return { props: { message: 'Hi' } }; } wrongly uses props key, function load() { return { message: 'Hi' }; } lacks export, export default function load() { return { props: { message: 'Hi' } }; } uses default export which is incorrect.+page.js code, what will be the value of data.greeting inside the page component?export const load = () => {
return { greeting: 'Hello, Svelte!' };
};greeting and value 'Hello, Svelte!'.data object in the page component. So data.greeting equals 'Hello, Svelte!'.+page.js load function:export const load = async () => {
const res = await fetch('/api/data');
const data = await res.json();
return data;
};return { data }, so the page receives it properly.+page.js load function. Which code snippet correctly does this?redirect function from '@sveltejs/kit' which throws an exception to redirect the user.redirect and throws it when user is not authenticated. export const load = () => {
const user = null;
if (!user) return '/login';
return { user };
}; returns a string which is invalid. export const load = () => {
const user = null;
if (!user) window.location.href = '/login';
return { user };
}; uses browser redirect which won't work server-side. import { redirect } from '@sveltejs/kit';
export const load = () => {
const user = null;
if (!user) return redirect(302, '/login');
return { user };
}; returns redirect instead of throwing it, which is incorrect.Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.