Why load functions fetch data server-side in Svelte - See It in Action

Why load functions fetch data server-side

📖 Scenario: You are building a simple SvelteKit page that shows a list of books fetched from a server. You want to understand how the load function fetches data on the server side before the page renders.

🎯 Goal: Create a SvelteKit page that uses a load function to fetch book data server-side and display it in a list.

📋 What You'll Learn

Create a load function that fetches book data from a server endpoint

Use the load function to provide data to the page component

Display the list of books on the page using the data from load

Ensure the data fetching happens server-side before the page renders

💡 Why This Matters

🌍 Real World

Many web apps need to get data from servers before showing pages. Using server-side load functions ensures users see content quickly and improves SEO.

💼 Career

Understanding server-side data fetching with load functions is essential for building fast, user-friendly SvelteKit applications in professional web development.

1

Set up the initial book data array

Create a variable called books that is an array of objects. Each object should have id and title properties with these exact values: { id: 1, title: 'Svelte Basics' }, { id: 2, title: 'Advanced Svelte' }.

Svelte

# Create the books array with two book objects
# Your code here

Hint

Use an array with two objects. Each object has id and title.

2

Create a server endpoint to return the book data

Create a GET function that returns a JSON response with the books array. Use return new Response(JSON.stringify(books)) inside the function.

Svelte

export const books = [
  { id: 1, title: 'Svelte Basics' },
  { id: 2, title: 'Advanced Svelte' }
];

// Create a GET function that returns the books as JSON
// Your code here

Hint

Define a GET function that returns the books array as a JSON string in the response.

3

Write the load function to fetch books server-side

Create an async load function that fetches from '/books' and returns the JSON data as books. Use const res = await fetch('/books') and const books = await res.json() inside the function.

Svelte

export const books = [
  { id: 1, title: 'Svelte Basics' },
  { id: 2, title: 'Advanced Svelte' }
];

export function GET() {
  return new Response(JSON.stringify(books));
}

// Create an async load function that fetches '/books' and returns { books }
// Your code here

Hint

Use the fetch function inside load to get the books data from the server endpoint.

4

Display the books list in the Svelte component

Use the books data returned from load to display an unordered list. Use {#each books as book} and show {book.title} inside <li> tags.

Svelte

  export let data;
  // Use data.books to display the list
  // Your code here



  

Hint

Use Svelte's {#each} block to loop over data.books and display each title inside a list item.