Server load functions (+page.server.js) in Svelte - Mini Project: Build & Apply

Server Load Functions with +page.server.js in SvelteKit

📖 Scenario: You are building a simple SvelteKit page that shows a list of books fetched from the server. The server will provide the data using a load function in +page.server.js. This simulates getting data from a database or API before the page renders.

🎯 Goal: Create a +page.server.js file with a load function that returns a list of books. Then use that data in the Svelte page to display the book titles.

📋 What You'll Learn

Create a books array with exact book objects in +page.server.js

Add a load function named load that returns the books array

Use the load function data in the Svelte page to display each book title

Ensure the Svelte page uses the export let data syntax to receive server data

💡 Why This Matters

🌍 Real World

Server load functions in SvelteKit are used to fetch data on the server before the page renders. This improves performance and SEO by sending fully prepared pages to the browser.

💼 Career

Understanding server load functions is essential for building modern web apps with SvelteKit. It helps developers create fast, data-driven pages and handle server-side logic cleanly.

1

Create the books data array in +page.server.js

In +page.server.js, create a constant array called books with these exact objects: { id: 1, title: 'Svelte for Beginners' }, { id: 2, title: 'Advanced SvelteKit' }, and { id: 3, title: 'JavaScript Essentials' }.

Svelte

# Your code here

Hint

Use export const books = [...] to create the array with the exact book objects.

2

Add the load function to return the books array

In +page.server.js, add an exported async function called load that returns an object with the key books set to the books array.

Svelte

export const books = [
  { id: 1, title: 'Svelte for Beginners' },
  { id: 2, title: 'Advanced SvelteKit' },
  { id: 3, title: 'JavaScript Essentials' }
];

// Your code here

Hint

Write export async function load() { return { books } } to send the books data to the page.

3

Receive the server data in the Svelte page

In the Svelte page file (e.g., +page.svelte), write export let data; at the top to receive the server data. Then create a {#each} block to loop over data.books and display each book's title inside a <li> element.

Svelte

export let data;

Hint

Use export let data; to get the data, then {#each data.books as book} to loop and show titles.

4

Complete the Svelte page with semantic HTML and accessibility

Wrap the list of books inside a <section> with an aria-label of Book list. Add a heading <h2> with the text Available Books above the list.

Svelte

export let data;




  {#each data.books as book}
    {book.title}
  {/each}

Hint

Use a <section aria-label="Book list"> and a heading <h2>Available Books</h2> above the list.