SvelteKit overview - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you navigate between pages in SvelteKit?

Consider a SvelteKit app with multiple pages. What is the main behavior when you click a link to go from one page to another?

A The app shows a blank page until the new page fully loads from the server.

B The browser reloads the entire page from the server, losing all current state.

C The navigation is blocked unless the user refreshes the browser manually.

D SvelteKit intercepts the navigation and updates only the changed parts without a full reload.

💡 Hint

Think about how modern apps avoid full page reloads to feel faster.

SvelteKit uses client-side routing to update only the parts of the page that change, making navigation smooth and fast without full reloads.

📝 Syntax

intermediate

Which SvelteKit file defines a page route?

In a SvelteKit project, which file path correctly defines a page route for the URL /about?

A src/routes/about/+page.svelte

B src/pages/about.svelte

C src/components/about.svelte

D src/routes/about/index.js

💡 Hint

Routes are defined inside the src/routes folder with +page.svelte files for pages.

SvelteKit uses the src/routes folder where +page.svelte files correspond to routes. So src/routes/about/+page.svelte defines the /about page.

❓ lifecycle

advanced

When is the load function called in SvelteKit?

In SvelteKit, the load function can be exported from a page or layout. When does this function run?

A Only when the user refreshes the browser manually.

B Only once when the app first loads in the browser.

C Every time the page or layout is rendered on the server or client during navigation.

D Only when the page is built during deployment.

💡 Hint

Think about when data needs to be fetched for each page visit.

The load function runs on the server during initial page load and on the client during client-side navigation to fetch data needed for the page or layout.

🔧 Debug

advanced

Why does this SvelteKit page fail to load data?

Given this +page.server.js file in SvelteKit:

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

The page shows an error: fetch is not defined. Why?

A Because <code>fetch</code> is not available in server-side load functions by default.

B Because the API endpoint <code>/api/data</code> does not exist.

C Because the load function must be named <code>loadData</code> instead of <code>load</code>.

D Because the <code>load</code> function must return a Promise, not an object.

💡 Hint

Remember that server-side code may not have browser APIs like fetch globally.

In SvelteKit, server-side load functions receive a fetch function as an argument to make requests. The global fetch is not available by default on the server.

🧠 Conceptual

expert

How does SvelteKit handle server-side rendering (SSR) and client-side hydration?

Which statement best describes how SvelteKit combines server-side rendering and client-side hydration?

A SvelteKit renders pages on the server and disables all client-side JavaScript to improve performance.

B SvelteKit renders pages on the server to HTML, then sends them to the browser where Svelte hydrates the page to make it interactive.

C SvelteKit sends raw Svelte components to the browser and compiles them there for rendering.

D SvelteKit only renders pages on the client; server-side rendering is disabled by default.

💡 Hint

Think about how modern frameworks deliver fast initial loads and interactivity.

SvelteKit pre-renders pages on the server to HTML for fast loading and SEO, then the client-side Svelte code hydrates the HTML to add interactivity.

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