Why SvelteKit handles full-stack routing

Introduction

SvelteKit manages routing for both the frontend and backend in one place. This makes building web apps simpler and faster.

When you want to build a website that needs both pages and server actions.

When you want to avoid setting up separate servers for frontend and backend.

When you want your app to load pages quickly with server-side rendering.

When you want to handle API requests and page navigation in the same project.

When you want to keep your code organized by combining routes and server logic.

Syntax

Svelte

src/routes/
  +page.svelte       // Frontend page component
  +page.server.js    // Server-side code for that page
  +server.js         // API endpoints for backend logic

SvelteKit uses special files like +page.svelte for frontend pages and +server.js for backend routes.

This folder structure lets SvelteKit know what code runs on the client and what runs on the server.

Examples

This is a simple frontend page that users see when they visit /about.

Svelte

src/routes/about/+page.svelte
// This file shows the About page content to users.

This server file sends data to the About page before it loads.

Svelte

src/routes/about/+page.server.js
export function load() {
  return { info: 'About info from server' };
}

This backend route handles API requests at /api/data and sends JSON data.

Svelte

src/routes/api/data/+server.js
export function GET() {
  return new Response(JSON.stringify({ message: 'Hello from API' }), { status: 200 });
}

Sample Program

This example shows a main page that gets data from the server before showing it. It also has an API route that returns JSON data.

Svelte

// File: src/routes/+page.svelte
<script>
  export let data;
</script>
<h1>Welcome to SvelteKit</h1>
<p>Message from server: {data.message}</p>

// File: src/routes/+page.server.js
export function load() {
  return { message: 'Hello from server-side load!' };
}

// File: src/routes/api/hello/+server.js
export function GET() {
  return new Response(JSON.stringify({ greeting: 'Hello from API!' }), { status: 200 });
}

Important Notes

SvelteKit routing combines frontend and backend in one place, reducing setup time.

Server routes run only on the server, so they can safely handle secrets and databases.

Using full-stack routing helps keep your app organized and easier to maintain.

Summary

SvelteKit handles both frontend pages and backend routes using a simple folder structure.

This approach makes building full-stack apps easier and faster.

You can fetch data on the server and send it to pages before they load.

Practice

1. What is the main reason SvelteKit uses a folder structure for routing?

easy

A. To handle both frontend pages and backend routes in one place

B. To separate CSS files from JavaScript files

C. To force developers to write only client-side code

D. To disable server-side rendering by default

Solution

1. Step 1: Understand SvelteKit routing design

   SvelteKit uses a folder structure to organize routes, which includes both frontend pages and backend endpoints.

2. Step 2: Recognize the benefit of unified routing

   This design allows developers to build full-stack apps easily by managing frontend and backend routes together.

3. Final Answer:

   To handle both frontend pages and backend routes in one place -> Option A

4. Quick Check:

   Unified folder routing = C [OK]

Hint: Remember: SvelteKit folders map to both pages and APIs [OK]

Common Mistakes:

• Thinking routing only manages frontend pages
• Confusing routing with styling or scripts
• Assuming server-side rendering is disabled

2. Which file name in SvelteKit defines a backend API route?

easy

A. src/routes/styles.css

B. src/routes/page.svelte

C. src/routes/api/data.js

D. src/components/Button.svelte

Solution

1. Step 1: Identify backend API route files

   In SvelteKit, files inside src/routes/api/ with .js or .ts extensions define backend endpoints.

2. Step 2: Differentiate frontend and backend files

   Files with .svelte are frontend components, and CSS files are for styling, not routes.

3. Final Answer:

   src/routes/api/data.js -> Option C

4. Quick Check:

   Backend API file = D [OK]

Hint: Backend routes use .js/.ts inside routes folder [OK]

Common Mistakes:

• Choosing .svelte files as backend routes
• Confusing component files with routes
• Selecting CSS files as routes

3. Given this SvelteKit route file src/routes/blog/[slug].svelte, what does it do?

medium

A. Creates a dynamic page for each blog post based on the slug

B. Defines a static page named 'slug' inside blog folder

C. Creates a backend API endpoint for blog data

D. Imports a component named slug from blog folder

Solution

1. Step 1: Understand dynamic route syntax

   Square brackets like [slug] in filenames create dynamic routes matching any value in that position.

2. Step 2: Apply to blog route

   So src/routes/blog/[slug].svelte makes a page for each blog post URL like /blog/post1 or /blog/hello.

3. Final Answer:

   Creates a dynamic page for each blog post based on the slug -> Option A

4. Quick Check:

   Dynamic route with [slug] = A [OK]

Hint: Brackets in route names mean dynamic pages [OK]

Common Mistakes:

• Thinking it creates a static page named 'slug'
• Confusing frontend pages with backend APIs
• Assuming it imports a component

4. What is wrong with this SvelteKit backend route file src/routes/api/user.svelte?

medium

A. File must be named user.js instead of user.svelte

B. Backend routes should not use .svelte extension

C. API routes cannot be inside src/routes/api folder

D. Backend routes require a .css file alongside

Solution

1. Step 1: Check file extension for backend routes

   Backend routes in SvelteKit use .js or .ts files, not .svelte which is for frontend components.

2. Step 2: Confirm correct folder usage

   Placing backend routes inside src/routes/api/ is correct, but the extension must be .js or .ts.

3. Final Answer:

   Backend routes should not use .svelte extension -> Option B

4. Quick Check:

   Backend route file extension = A [OK]

Hint: Backend routes use .js/.ts, not .svelte [OK]

Common Mistakes:

• Using .svelte for backend routes
• Thinking API routes can't be in api folder
• Believing CSS files are required for backend

5. How does SvelteKit let you fetch data on the server before showing a page?

hard

A. By writing fetch calls inside the onMount lifecycle in .svelte files

B. By placing data files inside the static folder only

C. By importing data directly into the script tag of .svelte files

D. By exporting a load function in the page's .js or .ts file

Solution

1. Step 1: Understand server-side data fetching in SvelteKit

   SvelteKit uses a special load function exported from a page's .js or .ts file to fetch data on the server before rendering.

2. Step 2: Differentiate from client-side fetching

   Using onMount runs only on the client after page loads, so it doesn't fetch data server-side first.

3. Final Answer:

   By exporting a load function in the page's .js or .ts file -> Option D

4. Quick Check:

   Server data fetch = load function export [OK]

Hint: Use load() export for server-side data fetching [OK]

Common Mistakes:

• Using onMount for server data fetching
• Importing data directly in script tag
• Thinking static folder is for dynamic data