Why SvelteKit handles full-stack routing - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does SvelteKit unify frontend and backend routing?

SvelteKit uses a single routing system for both frontend pages and backend endpoints. What is the main benefit of this approach?

A It requires manual configuration of API routes outside the main app folder.

B It forces developers to write separate routing files for frontend and backend, increasing clarity.

C It disables server-side rendering to speed up client navigation.

D It allows developers to define UI and server logic in one place, simplifying code organization.

💡 Hint

Think about how having one routing system affects where you write code.

SvelteKit's unified routing means you can create pages and API endpoints using the same folder structure. This reduces complexity and keeps related code together.

❓ component_behavior

intermediate

What happens when you visit a SvelteKit route with a +server.js file?

If a folder contains both +page.svelte and +server.js files, what does SvelteKit do when you visit that route in a browser?

A It serves the +server.js file as a static JavaScript file to the browser.

B It ignores +server.js and only renders the UI from +page.svelte.

C It renders the UI from +page.svelte and uses +server.js to handle backend requests like form submissions or data fetching.

D It throws an error because both files cannot coexist in the same folder.

💡 Hint

Consider how frontend and backend parts work together in full-stack routing.

The +page.svelte file defines the visible page, while +server.js handles backend logic like API calls or form actions. Both work together to provide a full experience.

❓ lifecycle

advanced

How does SvelteKit handle server-side data loading with full-stack routing?

In SvelteKit, where should you place code that fetches data on the server before rendering a page, and why?

A In a +page.server.js file using the load function, so data is fetched securely on the server before the page renders.

B Directly inside the +page.svelte script tag, so data loads on the client after rendering.

C Inside the +server.js file, which only handles form actions and cannot load page data.

D In a separate API folder outside the routes, to keep data fetching isolated.

💡 Hint

Think about where server-side data fetching fits in the page lifecycle.

The +page.server.js file's load function runs on the server before the page renders, allowing secure and fast data fetching. This integrates backend logic with frontend rendering.

📝 Syntax

advanced

Which SvelteKit file handles backend POST requests for a route?

You want to handle a POST request on the /contact route in SvelteKit. Which file and function should you create?

A +page.svelte with an on:submit event handler that directly handles the POST request on the client.

B +server.js with an exported POST function that processes the request and returns a response.

C +page.js with a load function that intercepts POST requests.

D +server.js with an exported load function that handles POST requests.

💡 Hint

Consider which file handles backend HTTP methods in SvelteKit.

+server.js files export functions named after HTTP methods (GET, POST, etc.) to handle backend requests. The POST function processes form data or API calls on the server.

🔧 Debug

expert

Why does this SvelteKit route fail to handle form submission?

Given this folder structure and files: /contact/+page.svelte /contact/+server.js The +server.js file exports a POST function, but submitting the form in +page.svelte does not invoke the POST function. What is the most likely cause?

Svelte

export async function POST({ request }) {
  const formData = await request.formData();
  // process data
  return new Response('Success');
}

A The +page.svelte form is missing the 'method="POST"' attribute, so the POST function is never called.

B The POST function must be named 'post' in lowercase to be recognized by SvelteKit.

C +server.js is missing the 'export const actions' object; POST functions must be inside actions to handle form submissions.

D +server.js files cannot handle POST requests; you must use +page.server.js instead.

💡 Hint

Check the form attributes in the frontend component.

For SvelteKit to call the POST function in +server.js, the form must specify method="POST". Without it, the browser sends a GET request, so the POST function is never called.