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.