Why SvelteKit handles full-stack routing - See It in Action

Why SvelteKit Handles Full-Stack Routing

📖 Scenario: You are building a simple web app that shows a list of books and their details. You want to understand how SvelteKit manages routing for both the pages users see and the server-side data fetching.

🎯 Goal: Build a small SvelteKit app that demonstrates full-stack routing by creating a page that lists books and a server route that provides the book data.

📋 What You'll Learn

Create a SvelteKit page route to display book titles

Create a server route to provide book data as JSON

Use the load function in the page to fetch data from the server route

Understand how SvelteKit connects page routes and server routes for full-stack routing

💡 Why This Matters

🌍 Real World

Full-stack routing in SvelteKit lets you build apps where the server provides data and the client displays it seamlessly. This is common in blogs, shops, and dashboards.

💼 Career

Understanding full-stack routing is key for SvelteKit developers to build efficient, maintainable web apps that handle both server and client logic in one framework.

1

Set up the book data in a server route

Create a file called src/routes/api/books/+server.js and export a GET handler that returns a JSON response with this exact array of books: [{ id: 1, title: 'Svelte Basics' }, { id: 2, title: 'Advanced SvelteKit' }]. Use the json helper from @sveltejs/kit.

Svelte

// Your code here

Hint

Use export function GET() to create the server route handler and return the books array using json(books).

2

Create a page route to display books

Create a file called src/routes/books/+page.svelte. Add a <script> block with an exported load function that fetches data from /api/books and returns it as books. Use fetch inside load. Then, add markup to loop over books and display each book's title in a list.

Svelte

/* Add a  block with a load function fetching from '/api/books' */

Hint

Use export async function load({ fetch }) to get data from the server route, then loop over books with {#each} to show titles.

3

Add a configuration variable for the API path

In src/routes/books/+page.svelte, add a constant called apiPath set to '/api/books'. Then update the fetch call inside load to use this apiPath variable instead of the string literal.

Svelte

  // Add apiPath constant here

  export async function load({ fetch }) {
    // Use apiPath in fetch
  }



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

Hint

Define const apiPath = '/api/books' and use it in the fetch call inside load.

4

Complete the page with accessibility and semantic HTML

In src/routes/books/+page.svelte, wrap the list in a <section> with an aria-label of 'Book list'. Add a heading <h2> with the text 'Books Available' above the list.

Svelte

  const apiPath = '/api/books';

  export async function load({ fetch }) {
    const res = await fetch(apiPath);
    const books = await res.json();
    return { books };
  }

Hint

Use a <section> with aria-label="Book list" and add a <h2> heading before the list.