SvelteKit Data Loading Explained — Server Load Functions

In this tutorial, you will learn about SvelteKit Data Loading Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

SvelteKit load functions in +page.server.js and +layout.server.js fetch data on the server before rendering, passing results as the data prop to page and layout components.

What You'll Learn

• Server load functions
• Universal load functions
• Layout data inheritance
• Invalidation and refetching
• Streaming with deferred data

Why It Matters

Server load functions keep sensitive logic (database queries, API tokens) server-side while delivering fully-rendered HTML. Universal load functions run on both server and client for dynamic data.

// src/routes/dashboard/+page.server.js
import { redirect } from "@sveltejs/kit";

export function load({ cookies, url, params, fetch }) {
  const session = cookies.get("session");
  if (!session) throw redirect(302, "/login");

  const user = await db.getUser(session);
  const tasks = await db.getTasks(user.id);
  const projects = await db.getProjects(user.id);

  return {
    user,
    tasks,
    projects,
    title: `${user.name}'s Dashboard`,
    streamed: {
      analytics: new Promise((resolve) => {
        setTimeout(async () => {
          resolve(await db.getAnalytics(user.id));
        }, 2000);
      }),
    },
  };
}

<!-- src/routes/dashboard/+page.svelte -->
<script>
  export let data;
</script>

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

{#each data.tasks as task}
  <div>{task.title}</div>
{/each}

{#await data.streamed.analytics}
  <p>Loading analytics...</p>
{:then analytics}
  <p>Completed: {analytics.completed}</p>
{:catch}
  <p>Failed to load analytics</p>
{/await}

Expected output: Page loads user, tasks, projects on the server, streams analytics data, and handles loading/error states.