01 - What is SvelteKit?

The Big Picture

You've learned Svelte — how to create components with $state, $derived, $props, etc. But Svelte alone is just a UI library. It can build components, but it doesn't know how to:

• Show different pages when the URL changes (routing)
• Fetch data from a database or API before showing a page
• Handle form submissions on the server
• Render pages on the server for fast initial loads (SSR)

SvelteKit adds all of this. It's the official framework built on top of Svelte.

Analogy

Think of it like this:

Svelte = the bricks. SvelteKit = the house.

What Does SvelteKit Give You?

1. File-Based Routing

Instead of configuring routes manually, you create folders:

src/routes/about/+page.svelte  →  yoursite.com/about

The folder structure IS the URL structure.

2. Server-Side Rendering (SSR)

When someone visits your site, SvelteKit renders the page on the server first and sends ready-made HTML. This means:

• The page appears instantly (no blank screen while JS loads)
• Search engines can read your content (SEO)
• Then Svelte takes over in the browser for interactivity

3. Data Loading

Each page can have a load function that fetches data before the page renders:

+page.ts        →  fetches data
+page.svelte    →  displays it

The page never shows a loading spinner on first load — data is ready.

4. Server Code

You can write server-side code (database queries, API calls with secrets) right alongside your pages. SvelteKit keeps it separate from what gets sent to the browser.

5. Form Handling

Forms work without JavaScript by default. SvelteKit processes them on the server, then you can enhance them with JS for a smoother experience.

How a Request Works

When someone visits yoursite.com/about:

1. Browser requests /about
2. SvelteKit server receives the request
3. hooks.server.ts runs (auth, logging, etc.)
4. +page.server.ts or +page.ts load function runs (fetches data)
5. +layout.svelte wraps the page (nav, footer)
6. +page.svelte renders with the data
7. HTML is sent to the browser
8. Svelte "hydrates" — makes the page interactive
9. Further navigation happens client-side (no full page reloads)

SvelteKit vs Plain Svelte

When to Use SvelteKit

Almost always. Even for a simple SPA, SvelteKit gives you routing and tooling for free. The only time you'd use plain Svelte is for embedding a widget into an existing non-Svelte page.

Next Lesson

In the next lesson, we'll create a SvelteKit project and explore what each file does.