Why SvelteKit handles full-stack routing - Visual Breakdown

Concept Flow - Why SvelteKit handles full-stack routing

User requests URL

↓

SvelteKit checks routes folder

↓

Match route file?

No→404 Page

Yes↓

Is route endpoint?

Yes→Run server code (load, actions)

No↓

Render Svelte component

↓

Send HTML + data to browser

↓

Browser hydrates page

↓

User navigates client-side

↓

SvelteKit updates page without full reload

SvelteKit handles routing by matching URLs to files in the routes folder, running server code if needed, rendering components, and enabling smooth client-side navigation.

Execution Sample

Svelte

src/routes/+page.svelte
<script>
  export let data;
</script>
<h1>{data.title}</h1>

This code shows a SvelteKit page component that receives data from the server and displays a title.

Execution Table

Step	Action	Route Matched	Server Code Run	Component Rendered	Browser Behavior
1	User requests /	src/routes/+page.svelte	No	Yes	Browser loads HTML
2	User requests /api/data	src/routes/api/data/+server.js	Yes	No	Browser receives JSON
3	User clicks link to /about	src/routes/about/+page.svelte	No	Yes	Client-side navigation, no full reload
4	User requests /unknown	No match	No	No	404 page shown
5	User submits form to /contact	src/routes/contact/+page.server.js	Yes	Yes	Form handled server-side, page updates

💡 Routing stops when no matching route file is found or after rendering the matched route.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
currentRoute	null	/	/api/data	/about	null	/contact
serverCodeRun	false	false	true	false	false	true
componentRendered	false	true	false	true	false	true
browserState	initial	loaded HTML	received JSON	client nav	404 shown	form handled

Key Moments - 3 Insights

Why does SvelteKit run server code only for some routes?

Because only routes with server files like +server.js or +page.server.js have server code. Others just render components. See execution_table rows 2 and 3.

How does SvelteKit avoid full page reloads on navigation?

It uses client-side navigation by intercepting link clicks and updating the page with JavaScript. See execution_table row 3.

What happens if no route matches the URL?

SvelteKit shows a 404 page because it can't find a matching file. See execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'serverCodeRun' at Step 3?

A false

B true

C null

D undefined

💡 Hint

Check the 'serverCodeRun' column at Step 3 in the execution_table.

At which step does the browser perform client-side navigation without a full reload?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Browser Behavior' column for client-side navigation in the execution_table.

If the user requests a URL with no matching route, what does SvelteKit do?

A Runs server code

B Shows a 404 page

C Renders a component

D Reloads the browser

💡 Hint

See Step 4 in the execution_table for no match behavior.

Concept Snapshot

SvelteKit routing matches URLs to files in the routes folder.
Server code runs only if +server.js or +page.server.js exists.
Pages render Svelte components with data.
Client-side navigation avoids full reloads.
No match shows 404 page.
This enables full-stack routing in one framework.

Full Transcript

SvelteKit handles full-stack routing by matching the user's requested URL to files inside the routes folder. If a matching route file exists, it checks if there is server code to run, such as in +server.js or +page.server.js files. If so, it runs that code to fetch or process data. Then it renders the Svelte component for that route and sends the HTML and data to the browser. The browser loads the page and hydrates it for interactivity. When the user navigates within the app, SvelteKit intercepts link clicks and updates the page client-side without a full reload, making navigation smooth and fast. If no route matches the URL, SvelteKit shows a 404 page. This approach lets SvelteKit handle both server and client routing seamlessly in one system.

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