load Function
Pages and layouts can export a load()
function that runs before the component is created.
- This function runs both during server-side rendering and in the client
- An example of its usage would be to allow us to get page data without showing a loading spinner and fetching data in
onMount
. load
is similar togetStaticProps
orgetServerSideProps
in Next.js, except that it runs on both the server and the client.
If load returns nothing, SvelteKit will fall through to other routes until something responds, or will respond with a generic 404.
SvelteKit's load receives an implementation of fetch, which has the following special properties:
- it has access to cookies on the server
- it can make requests against the app's own endpoints without issuing an HTTP call
- it makes a copy of the response when you use it, and then sends it embedded in the initial page load for hydration
code inside load
blocks should never reference window
, document
, or any browser-specific objects
code inside load
blocks should not directly reference any API keys or secrets, which will be exposed to the client, but instead call an endpoint that uses any required secrets
spec: If we want to make HTTP calls in our load
function, we will have to import a created API endpoint (export async function get()...
) and use it in load
.
The load
function is reactive, and will re-run when its parameters change, but only if they are used in the function.
- Specifically, if page.query, page.path, session, or stuff are used in the function, they will be re-run whenever their value changes.
- Note that destructuring parameters in the function declaration is enough to count as using them.
If you return a Promise
from load, SvelteKit will delay rendering until the promise resolves.
Signature of load()
The load
function receives an object containing four fields — page
, fetch
, session
and stuff
page
interface page: {
host: string;
path: string;
params: PageParams;
query: URLSearchParams;
};
So if the example above was src/routes/blog/[slug].svelte
and the URL was https://example.com/blog/some-post?foo=bar&baz&bizz=a&bizz=b
, the following would be true:
page.host === 'example.com'
page.path === '/blog/some-post'
page.params.slug === 'some-post'
page.query.get('foo') === 'bar'
page.query.has('baz')
page.query.getAll('bizz') === ['a', 'b'
]
stuff
stuff
is passed from layout components to child layouts and page components and can be filled with anything else you need to make available. For the root __layout
.svelte component, it is equal to {}
, but if that component's load function returns an object with a stuff
property, it will be available to subsequent load functions.
export interface LoadInput<
PageParams extends Record<string, string> = Record<string, string>,
Stuff extends Record<string, any> = Record<string, any>,
Session = any
> {
page: {
host: string;
path: string;
params: PageParams;
query: URLSearchParams;
};
fetch(info: RequestInfo, init?: RequestInit): Promise<Response>;
session: Session;
stuff: Stuff;
}
export interface LoadOutput<
Props extends Record<string, any> = Record<string, any>,
Stuff extends Record<string, any> = Record<string, any>
> {
status?: number;
error?: string | Error;
redirect?: string;
props?: Props;
stuff?: Stuff;
maxage?: number;
}