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.