Back to overview

Understanding SvelteKit load functions

▼ Post information

Author Jef Meijvis Publish date 30/11/2023
Title Understanding SvelteKit load functions Id 22
Source 022-Understanding-sveltekit-load-functions.md Render timestamp Feb 27, 2024, 03:37:41 AM (GMT+1)
Views 46 Tags Sveltekit, Frontend
Author Jef Meijvis
Publish date 30/11/2023
Title Understanding SvelteKit load functions
Id 22
Source 022-Understanding-sveltekit-load-functions.md
Render timestamp Feb 27, 2024, 03:37:41 AM (GMT+1)
Views 46
Tags Sveltekit, Frontend
opengraph

▼ Table of contents

Share this post:

Abstract

A SvelteKit page is defined by the content in its +page.svelte file, along with any +layout.svelte files that surround it. But before these Svelte files get rendered, data can be provided by load functions. In this article we further explore SvelteKit load functions and how to use them.

Basic usage

In our project's file structure, a +page.svelte file can have an associated +page.js file next to it.

Sveltekit folder structure

Image: Sveltekit folder structure

Imagine we want a webpage that uses data from the load function to show a title. Such scenario would look as follows.

The +page.svelte file:

1
<script>
2
    // This data object gets populated by the load function.
3
    export let data;
4
</script>
5

6
<h1>{data.title}</h1>

The +page.js file:

1
// The following load function returns a object with the 'title' property.
2
export function load() 
3
{
4
    return {
5
        title: "Understanding sveltekit load functions" 
6
    };
7
}

When the following structure gets rendered without any additional layout files, it becomes the following HTML:

1
<h1>Understanding sveltekit load functions</h1>

This load function runs on both the server and client, during the initial server load and on further clientside page hydration. If your particular use case requires it to run only on the client or server (e.g. when you want it to read from the local filesystem) we have to look a bit further to the +page.server.js file.

Note

This article assumes typeless javascript files. All of the content also holds true for page.ts files or page.js files with JSDoc annotations.

Server only load function

As mentioned above, if we want our load function to run on the server only, a +page.server.js file is the solution. Common use cases are reading from the local filesystem or accessing an external API which requires reading environment variables.

1
export async function load() 
2
{
3
    // Retrieve the correct URL from the environment variables
4
    let url = process.env.MY_PRODUCTION_API_URL
5

6
    // Fetch the data from the URL
7
    let data = await fetch(url);
8

9
    // Convert the data to a JSON object
10
    let response = await data.json();
11
    return 
12
    {
13
        // Read the title property of the response object
14
        title: response.title
15
    };
16
}

In such case, our +page.svelte file would look identical as above.

Accessing the page slug

When we design our page to make use of a slug, we want to access that slug data in the load function as well.

Sveltekit folder structure with a slug

Image: Sveltekit folder structure with a slug

1
export function load({ params }) 
2
{
3
    return 
4
    {
5
        title: `Our page has ${params.slug} as the slug`,
6
    };
7
}

Our +page.svelte file would still look identical as in the first example.

Loading data in a layout file

In a similar fashion, data can also be loaded in a +layout.js file and used in a +layout.svelte file. Likewise if you require the load function to only happen serverside, a +layout.server.js file is the solution.

Back to top