SvelteKit overview - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is SvelteKit?

SvelteKit is a framework built on top of Svelte that helps you build fast, modern web apps with routing, server-side rendering, and more.

beginner

How does SvelteKit handle routing?

SvelteKit uses a file-based routing system where the folder and file names inside the src/routes folder define the app's pages and routes automatically.

intermediate

What is server-side rendering (SSR) in SvelteKit?

SSR means SvelteKit can generate HTML on the server before sending it to the browser, making pages load faster and improving SEO.

beginner

Name one way SvelteKit improves developer experience.

SvelteKit offers hot module replacement (HMR), so changes you make in code update instantly in the browser without a full reload.

intermediate

What is the role of endpoints in SvelteKit?

Endpoints in SvelteKit let you create server-side functions to handle API requests, like fetching or sending data, directly inside your app.

What folder defines routes in a SvelteKit app?

A public

B src/components

C src/routes

D src/assets

In SvelteKit, the src/routes folder controls the app's routing by file and folder names.

Which feature helps SvelteKit apps load pages faster by generating HTML on the server?

A Server-side rendering

B Hot module replacement

C Static site generation

D Client-side rendering

Server-side rendering (SSR) creates HTML on the server before sending it to the browser, speeding up page loads.

How does SvelteKit update the browser when you change code during development?

A Full page reload

B Hot module replacement

C Manual refresh

D No update until restart

Hot module replacement (HMR) updates only the changed parts instantly without a full reload.

What can you create inside SvelteKit to handle API requests?

A Endpoints

B Components

C Stores

D Actions

Endpoints are server-side functions in SvelteKit to handle API requests.

Which of these is NOT a feature of SvelteKit?

A Hot module replacement

B File-based routing

C Server-side rendering

D Built-in CSS framework

SvelteKit does not include a built-in CSS framework; styling is up to the developer.

Explain how routing works in SvelteKit and why it is helpful.

Think about how folder and file names become URLs.

Describe the benefits of server-side rendering in SvelteKit.

Consider what happens before the page reaches the browser.

Practice

1. What is the main purpose of SvelteKit in web development?

easy

A. To manage databases and server hardware

B. To create mobile apps using native code

C. To design static images and graphics

D. To build fast, modern web apps with minimal setup

Solution

1. Step 1: Understand SvelteKit's role

   SvelteKit is a framework designed to help developers build web applications quickly and efficiently.

2. Step 2: Identify the main feature

   It focuses on fast performance and less setup compared to traditional methods.

3. Final Answer:

   To build fast, modern web apps with minimal setup -> Option D

4. Quick Check:

   SvelteKit = fast web apps with less setup [OK]

Hint: Remember SvelteKit is for fast web apps, not mobile or graphics [OK]

Common Mistakes:

• Confusing SvelteKit with mobile app frameworks
• Thinking it manages databases directly
• Assuming it is for graphic design

2. Which file naming pattern does SvelteKit use to create routes automatically?

easy

A. Files inside the src/routes folder

B. Files inside the src/components folder

C. Files inside the public/assets folder

D. Files inside the src/styles folder

Solution

1. Step 1: Recall SvelteKit routing system

   SvelteKit uses file-based routing, where files in a specific folder define pages.

2. Step 2: Identify the correct folder

   The src/routes folder contains files that become routes automatically.

3. Final Answer:

   Files inside the src/routes folder -> Option A

4. Quick Check:

   Routes = files in src/routes [OK]

Hint: Routes come from src/routes folder files [OK]

Common Mistakes:

• Choosing components folder for routes
• Confusing public assets with routes
• Thinking styles folder controls routing

3. Given this SvelteKit page code, what will be rendered?

 <script>
  export let data;
</script>

<h1>User: {data.name}</h1>
<p>Age: {data.age}</p>

<!-- Assume load function returns { name: 'Alice', age: 30 } -->

medium

A. Error: data is undefined

B. User: AliceAge: 30

C. User: Age:

D. User: {data.name}Age: {data.age}

Solution

1. Step 1: Understand data passing in SvelteKit

   The load function provides data as props to the page component.

2. Step 2: Substitute data values in template

   Given { name: 'Alice', age: 30 }, the template renders those values inside the tags.

3. Final Answer:

   <h1>User: Alice</h1><p>Age: 30</p> -> Option B

4. Quick Check:

   Data props render actual values [OK]

Hint: Load data appears as props, so values show in template [OK]

Common Mistakes:

• Thinking template shows raw {data.name} text
• Assuming data is undefined without load
• Confusing syntax with missing data

4. What is wrong with this SvelteKit load function?

export async function load() {
  const res = await fetch('/api/data');
  const data = await res.json();
  return data;
}

medium

A. The function must not be async

B. It should return an object with data as a property, not just data

C. The load function is missing the `{ fetch }` argument

D. It should return a Promise, not data directly

Solution

1. Step 1: Recall load function signature

   SvelteKit load functions receive an argument object containing `fetch`, `params`, `parent`, etc.

2. Step 2: Identify the mistake in the function definition

   The function `load()` takes no arguments, so `fetch` inside is undefined, causing a runtime error.

3. Final Answer:

   The load function is missing the `{ fetch }` argument -> Option C

4. Quick Check:

   load({ fetch }) required [OK]

Hint: Always destructure { fetch } in load function args [OK]

Common Mistakes:

• Thinking load functions cannot be async
• Believing load must return { data: data }
• Thinking async functions need explicit Promise return

5. How can you create a dynamic route in SvelteKit to show user profiles by ID?

hard

A. Create a file named [id].svelte inside src/routes/users/

B. Create a file named id.svelte inside src/routes/users/

C. Create a folder named id inside src/routes/users/ with index.svelte

D. Create a file named users.svelte with a parameter inside

Solution

1. Step 1: Understand dynamic routing syntax

   SvelteKit uses square brackets in filenames to define dynamic route parameters.

2. Step 2: Apply to user ID route

   To capture user IDs dynamically, create [id].svelte inside the users folder.

3. Final Answer:

   Create a file named [id].svelte inside src/routes/users/ -> Option A

4. Quick Check:

   Dynamic routes use [param].svelte [OK]

Hint: Use square brackets in filename for dynamic routes [OK]

Common Mistakes:

• Omitting brackets for dynamic params
• Using folder names instead of file names
• Placing params in wrong folder