SvelteKit by Example: Server Scripts

Export a load function from a +page.server.js script to prepare or fetch data for the page component. Load functions may be async functions.

Data from the page script is passed to a data props on the page component.

src/routes/lists/+page.server.js

import { getListsFromDatabase } from './db.js';

/** @type {import('./$types').PageServerLoad} */
export async function load() {
  return {
    lists: await getListsFromDatabase(),
  };
}

src/routes/lists/+page.svelte

<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<h1>Lists</h1>
<ul>
  {#each data.lists as list}
    <li>
      <a href={`/lists/${list.id}`}>
        {list.name}
      </a>
    </li>
  {/each}
</ul>

resources://