Why SvelteKit handles full-stack routing - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a SvelteKit page component that exports a load function.

Svelte

export const load = async () => {
  return { message: 'Hello from [1]!' };
};

Drag options to blanks, or click blank then click option'

Acomponent

Bserver

Cclient

Dbrowser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'client' instead of 'server' for the load function context.

The load function runs on the server in SvelteKit, enabling full-stack routing.

2fill in blank

medium

Complete the code to define a SvelteKit endpoint that handles GET requests.

Svelte

export async function [1]() {
  return {
    status: 200,
    body: { message: 'Hello from API!' }
  };
}

Drag options to blanks, or click blank then click option'

ADELETE

BPUT

CPOST

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'POST' instead of 'GET' for fetching data.

The GET function handles GET requests in SvelteKit endpoints.

3fill in blank

hard

Fix the error in the SvelteKit route file to correctly export the POST handler.

Svelte

export async function [1](request) {
  const data = await request.json();
  return {
    status: 201,
    body: { received: data }
  };
}

Drag options to blanks, or click blank then click option'

Aload

BGET

CPOST

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' or 'load' instead of 'POST' for POST requests.

The POST handler must be exported as POST to handle POST requests in SvelteKit.

4fill in blank

hard

Fill both blanks to create a SvelteKit page that fetches data from an endpoint and displays it.

Svelte

<script>
  import { onMount } from 'svelte';
  let message = '';
  onMount(async () => {
    const res = await fetch('/api/message');
    const data = await res.[1]();
    message = data.[2];
  });
</script>

<p>{message}</p>

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cmessage

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text()' instead of 'json()' to parse the response.

Accessing a wrong property name from the data.

Use json() to parse the response and access the message property from the data.

5fill in blank

hard

Fill all three blanks to define a SvelteKit endpoint that handles POST requests and returns JSON.

Svelte

export async function [1](request) {
  const data = await request.[2]();
  return {
    status: 200,
    headers: { 'Content-Type': '[3]' },
    body: { success: true, received: data }
  };
}

Drag options to blanks, or click blank then click option'

APOST

Bjson

Capplication/json

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' instead of 'POST' for the handler.

Calling 'text()' instead of 'json()' on the request.

Setting wrong or missing content type header.

The POST handler uses request.json() to parse JSON data and returns a JSON response with the correct content type.

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