SvelteKit Refresher • luminary.blog

What is SvelteKit?

SvelteKit is the official application framework for Svelte, similar to Next.js for React or Nuxt for Vue. It’s a full-stack framework that provides everything you need to build production-ready web applications.

Key Features

File-based routing: Automatic routing from file structure
SSR/SSG: Server-side rendering and static site generation
API routes: Backend endpoints in +server.js or +server.ts files
Layouts: Shared UI across routes
Data loading: load functions for fetching data
Form actions: Server-side form handling with progressive enhancement
Adapters: Deploy to any platform (Vercel, Netlify, Node.js, etc.)
Code splitting: Automatic route-based code splitting
Zero config: Works out of the box with sensible defaults

Project Structure

1
my-app/
2
├── src/
3
│   ├── routes/
4
│   │   ├── +layout.svelte
5
│   │   ├── +page.svelte
6
│   │   ├── about/
7
│   │   │   └── +page.svelte
8
│   │   └── blog/
9
│   │       ├── +page.svelte
10
│   │       └── [slug]/
11
│   │           └── +page.svelte
12
│   ├── lib/
13
│   │   └── index.js
14
│   └── app.html
15
├── static/
16
├── package.json
17
└── svelte.config.js

Key Directories

src/routes/: File-based routing system
src/lib/: Reusable components and utilities (accessible via $lib)
static/: Static assets served at root
src/app.html: HTML template wrapper

Routing

Basic Routes

1
<!-- src/routes/+page.svelte (/) -->
2
<h1>Home Page</h1>

1
<!-- src/routes/about/+page.svelte (/about) -->
2
<h1>About Page</h1>

Dynamic Routes

1
<!-- src/routes/blog/[slug]/+page.svelte (/blog/hello-world) -->
2
<script>
3
  import { page } from '$app/stores';
4
</script>
5

6
<h1>Blog Post: {$page.params.slug}</h1>

Optional Parameters

1
<!-- Matches both /products and /products/electronics -->

Rest Parameters

1
<!-- Matches /docs/a, /docs/a/b, /docs/a/b/c, etc. -->

Special Files

+page.svelte: Page component
+page.js: Universal data loader
+page.server.js: Server-only data loader
+layout.svelte: Layout wrapper
+layout.js: Layout data loader
+server.js: API endpoint
+error.svelte: Error page
[param]: Dynamic route parameter
[[optional]]: Optional parameter
[...rest]: Rest parameters

Loading Data

Universal Load Functions (+page.js)

Universal loads run on both server and client:

1
export async function load({ fetch, params, url }) {
2
  const response = await fetch('/api/posts');
3
  const posts = await response.json();
4

5
  return {
6
    posts
7
  };
8
}

1
<script>
2
  let { data } = $props();
3
</script>
4

5
{#each data.posts as post}
6
  <article>
7
    <h2>{post.title}</h2>
8
    <p>{post.excerpt}</p>
9
  </article>
10
{/each}

Server-Only Load Functions (+page.server.js)

Server loads only run on the server:

1
import { error } from '@sveltejs/kit';
2
import { db } from '$lib/server/database';
3

4
export async function load({ params }) {
5
  const post = await db.getPost(params.slug);
6

7
  if (!post) {
8
    throw error(404, 'Post not found');
9
  }
10

11
  return { post };
12
}

When to use server-only loads:

Database access
Private API keys
Sensitive data
Server-only libraries

Load Function Parameters

1
export async function load({
2
  fetch,      // Fetch with SSR support
3
  params,     // Route parameters
4
  url,        // URL object
5
  route,      // Route info
6
  parent,     // Parent load data
7
  depends,    // Manual dependencies
8
  untrack     // Opt out of tracking
9
}) {
10
  // ...
11
}

Layouts

Root Layout

1
<script>
2
  import '../app.css';
3
</script>
4

5
<nav>
6
  <a href="/">Home</a>
7
  <a href="/about">About</a>
8
  <a href="/blog">Blog</a>
9
</nav>
10

11
<main>
12
  <slot />
13
</main>
14

15
<footer>
16
  <p>&copy; 2025 My Site</p>
17
</footer>

Nested Layouts

1
<div class="blog-layout">
2
  <aside>
3
    <h3>Categories</h3>
4
    <ul>
5
      <li><a href="/blog/tech">Tech</a></li>
6
      <li><a href="/blog/life">Life</a></li>
7
    </ul>
8
  </aside>
9

10
  <div class="content">
11
    <slot />
12
  </div>
13
</div>

Layout Data

1
export async function load({ fetch }) {
2
  const categories = await fetch('/api/categories').then(r => r.json());
3
  return { categories };
4
}

Resetting Layouts

1
<!-- src/routes/admin/+layout@.svelte -->
2
<!-- The @ resets to root layout, ignoring parent layouts -->

Form Actions

Basic Form Action

1
import { fail } from '@sveltejs/kit';
2

3
export const actions = {
4
  default: async ({ request }) => {
5
    const data = await request.formData();
6
    const email = data.get('email');
7
    const message = data.get('message');
8

9
    if (!email) {
10
      return fail(400, { email, missing: true });
11
    }
12

13
    // Send email logic here
14
    await sendEmail(email, message);
15

16
    return { success: true };
17
  }
18
};

1
<script>
2
  import { enhance } from '$app/forms';
3
  let { form } = $props();
4
</script>
5

6
<form method="POST" use:enhance>
7
  <label>
8
    Email:
9
    <input
10
      name="email"
11
      type="email"
12
      value={form?.email ?? ''}
13
      class:error={form?.missing}
14
    />
15
  </label>
16

17
  <label>
18
    Message:
19
    <textarea name="message"></textarea>
20
  </label>
21

22
  <button type="submit">Send</button>
23
</form>
24

25
{#if form?.success}
26
  <p class="success">Message sent successfully!</p>
27
{/if}
28

29
{#if form?.missing}
30
  <p class="error">Email is required</p>
31
{/if}

Named Actions

1
export const actions = {
2
  login: async ({ request }) => {
3
    // Login logic
4
  },
5

6
  register: async ({ request }) => {
7
    // Registration logic
8
  }
9
};

1
<form method="POST" action="?/login" use:enhance>
2
  <!-- Login form -->
3
</form>
4

5
<form method="POST" action="?/register" use:enhance>
6
  <!-- Registration form -->
7
</form>

Progressive Enhancement

The use:enhance directive provides:

Client-side validation
Loading states
Optimistic UI updates
Error handling
Works without JavaScript (progressive enhancement)

1
<script>
2
  import { enhance } from '$app/forms';
3

4
  let loading = $state(false);
5
</script>
6

7
<form
8
  method="POST"
9
  use:enhance={() => {
10
    loading = true;
11

12
    return async ({ result, update }) => {
13
      await update();
14
      loading = false;
15
    };
16
  }}
17
>
18
  <button disabled={loading}>
19
    {loading ? 'Sending...' : 'Send'}
20
  </button>
21
</form>

API Routes

Basic API Route

1
import { json } from '@sveltejs/kit';
2

3
export async function GET() {
4
  const posts = await getPosts();
5
  return json(posts);
6
}
7

8
export async function POST({ request }) {
9
  const data = await request.json();
10
  const post = await createPost(data);
11
  return json(post, { status: 201 });
12
}

Dynamic API Routes

1
import { json, error } from '@sveltejs/kit';
2

3
export async function GET({ params }) {
4
  const post = await getPost(params.id);
5

6
  if (!post) {
7
    throw error(404, 'Post not found');
8
  }
9

10
  return json(post);
11
}
12

13
export async function PUT({ params, request }) {
14
  const data = await request.json();
15
  const post = await updatePost(params.id, data);
16
  return json(post);
17
}
18

19
export async function DELETE({ params }) {
20
  await deletePost(params.id);
21
  return new Response(null, { status: 204 });
22
}

Request Handling

1
export async function POST({ request, cookies, locals }) {
2
  // Parse different content types
3
  const json = await request.json();
4
  const formData = await request.formData();
5
  const text = await request.text();
6

7
  // Access headers
8
  const auth = request.headers.get('authorization');
9

10
  // Set cookies
11
  cookies.set('session', sessionId, {
12
    path: '/',
13
    httpOnly: true,
14
    secure: true,
15
    maxAge: 60 * 60 * 24 * 7 // 1 week
16
  });
17

18
  // Access user data (set in hooks)
19
  console.log(locals.user);
20

21
  return json({ success: true });
22
}

SvelteKit Stores

Page Store

1
<script>
2
  import { page } from '$app/stores';
3

4
  $effect(() => {
5
    console.log('Current route:', $page.route.id);
6
    console.log('URL params:', $page.params);
7
    console.log('Search params:', $page.url.searchParams);
8
    console.log('Page data:', $page.data);
9
  });
10
</script>
11

12
<p>Current path: {$page.url.pathname}</p>

1
<script>
2
  import { navigating } from '$app/stores';
3
</script>
4

5
{#if $navigating}
6
  <div class="loading-bar">Loading...</div>
7
{/if}

Updated Store

1
<script>
2
  import { updated } from '$app/stores';
3
</script>
4

5
{#if $updated}
6
  <div class="toast">
7
    New version available!
8
    <button onclick={() => location.reload()}>
9
      Reload
10
    </button>
11
  </div>
12
{/if}

Environment Variables

Private Variables (Server-Only)

1
DATABASE_URL=postgresql://localhost:5432/mydb
2
SECRET_KEY=super-secret
3

4
// +page.server.js
5
import { env } from '$env/dynamic/private';
6

7
console.log(env.DATABASE_URL); // Works on server
8
console.log(env.SECRET_KEY);   // Never sent to browser

Public Variables (Client-Side)

Must be prefixed with PUBLIC_:

1
PUBLIC_API_URL=https://api.example.com
2
PUBLIC_SITE_NAME=My App
3

4
// Anywhere (client or server)
5
import { env } from '$env/dynamic/public';
6

7
console.log(env.PUBLIC_API_URL);  // Works everywhere

Static Environment Variables

For build-time constants:

1
import { PUBLIC_API_URL } from '$env/static/public';
2
import { SECRET_KEY } from '$env/static/private';

Hooks

Server Hooks (hooks.server.js)

1
// Run on every request
2
export async function handle({ event, resolve }) {
3
  // Check authentication
4
  const session = event.cookies.get('session');
5
  if (session) {
6
    event.locals.user = await getUserFromSession(session);
7
  }
8

9
  // Modify request/response
10
  const response = await resolve(event, {
11
    transformPageChunk: ({ html }) => html.replace('%lang%', 'en')
12
  });
13

14
  return response;
15
}
16

17
// Handle fetch requests
18
export async function handleFetch({ request, fetch }) {
19
  // Modify external requests
20
  if (request.url.startsWith('https://api.example.com/')) {
21
    request = new Request(
22
      request.url,
23
      {
24
        ...request,
25
        headers: {
26
          ...request.headers,
27
          'Authorization': `Bearer ${API_KEY}`
28
        }
29
      }
30
    );
31
  }
32

33
  return fetch(request);
34
}
35

36
// Handle errors
37
export async function handleError({ error, event }) {
38
  console.error('Error:', error);
39

40
  return {
41
    message: 'Something went wrong'
42
  };
43
}

Client Hooks (hooks.client.js)

1
export async function handleError({ error, event }) {
2
  // Log to error tracking service
3
  console.error('Client error:', error);
4

5
  return {
6
    message: 'An error occurred'
7
  };
8
}

Configuration

Basic Configuration

1
import adapter from '@sveltejs/adapter-auto';
2

3
export default {
4
  kit: {
5
    adapter: adapter(),
6

7
    // Path aliases
8
    alias: {
9
      $components: 'src/components',
10
      $utils: 'src/utils'
11
    },
12

13
    // CSP configuration
14
    csp: {
15
      directives: {
16
        'script-src': ['self']
17
      }
18
    },
19

20
    // Environment directory
21
    env: {
22
      dir: '.'
23
    }
24
  }
25
};

Adapters

Static Adapter (SSG)

1
import adapter from '@sveltejs/adapter-static';
2

3
export default {
4
  kit: {
5
    adapter: adapter({
6
      pages: 'build',
7
      assets: 'build',
8
      fallback: 'index.html',  // For SPA mode
9
      precompress: true
10
    })
11
  }
12
};

Node Adapter (SSR)

1
import adapter from '@sveltejs/adapter-node';
2

3
export default {
4
  kit: {
5
    adapter: adapter({
6
      out: 'build',
7
      precompress: true,
8
      envPrefix: 'MY_APP_'
9
    })
10
  }
11
};

Auto Adapter

1
import adapter from '@sveltejs/adapter-auto';
2

3
// Automatically detects platform:
4
// - Vercel → @sveltejs/adapter-vercel
5
// - Netlify → @sveltejs/adapter-netlify
6
// - Cloudflare Pages → @sveltejs/adapter-cloudflare

Prerendering

Page-Level Prerendering

1
// +page.js or +page.server.js
2
export const prerender = true;  // Prerender this page

Disabling Prerendering

1
export const prerender = false;  // Don't prerender

Configuration Options

1
export const prerender = true;
2
export const ssr = false;           // Client-side only
3
export const csr = true;            // Enable client-side rendering
4
export const trailingSlash = 'always';  // URL formatting

Error Handling

Custom Error Pages

1
<script>
2
  import { page } from '$app/stores';
3
</script>
4

5
<div class="error-page">
6
  <h1>{$page.status}</h1>
7
  <p>{$page.error.message}</p>
8

9
  {#if $page.status === 404}
10
    <p>Page not found</p>
11
    <a href="/">Go home</a>
12
  {:else}
13
    <p>Something went wrong</p>
14
  {/if}
15
</div>

Throwing Errors

1
// In load functions
2
import { error } from '@sveltejs/kit';
3

4
export async function load({ params }) {
5
  const item = await db.get(params.id);
6

7
  if (!item) {
8
    throw error(404, {
9
      message: 'Item not found'
10
    });
11
  }
12

13
  return { item };
14
}

Redirects

1
import { redirect } from '@sveltejs/kit';
2

3
export async function load({ locals }) {
4
  if (!locals.user) {
5
    throw redirect(302, '/login');
6
  }
7

8
  return { user: locals.user };
9
}

Deployment

Build for Production

1
npm run build

Preview Production Build

1
npm run preview

Platform-Specific Deployment

Vercel

1
npm install -D @sveltejs/adapter-vercel

Netlify

1
npm install -D @sveltejs/adapter-netlify

Cloudflare Pages

1
npm install -D @sveltejs/adapter-cloudflare

Docker (Node.js)

1
FROM node:18-alpine
2
WORKDIR /app
3
COPY package*.json ./
4
RUN npm ci --only=production
5
COPY . .
6
RUN npm run build
7
EXPOSE 3000
8
CMD ["node", "build"]

Best Practices

Component Organization

1
<!-- Use PascalCase for component names -->
2
<script>
3
  let {
4
    variant = 'primary',
5
    size = 'medium',
6
    disabled = false,
7
    onclick
8
  } = $props();
9
</script>
10

11
<button
12
  class="btn btn-{variant} btn-{size}"
13
  {disabled}
14
  {onclick}
15
>
16
  <slot />
17
</button>
18

19
<style>
20
  .btn {
21
    padding: 8px 16px;
22
    border: none;
23
    border-radius: 4px;
24
    cursor: pointer;
25
  }
26
</style>

Performance Tips

Use +page.server.js for server-only data
Implement proper loading states
Use form actions for mutations
Leverage prerendering for static pages
Use depends() for manual cache invalidation
Implement proper error boundaries
Use $lib for shared code

Security Best Practices

Never expose private env vars
Use CSRF protection (built-in with form actions)
Validate all user input
Use server-only loads for sensitive data
Implement proper authentication in hooks
Use CSP headers
Sanitize user-generated content

Interview Questions and Answers

Q1: What is SvelteKit and how does it relate to Svelte?

A1: SvelteKit is the official application framework for Svelte, similar to how Next.js relates to React:

Svelte: Component framework for building UIs SvelteKit: Full-stack framework that adds:

File-based routing: Automatic routing from file structure
SSR/SSG: Server-side rendering and static site generation
API routes: Backend endpoints in +server.js files
Layouts: Shared UI across routes
Data loading: load functions for fetching data
Form actions: Server-side form handling
Adapters: Deploy to any platform

SvelteKit is to production apps what Svelte is to components.

Q2: Explain SvelteKit’s file-based routing system.

A2: SvelteKit uses file structure to define routes:

1
src/routes/
2
├── +page.svelte           → /
3
├── about/+page.svelte     → /about
4
├── blog/
5
│   ├── +page.svelte       → /blog
6
│   └── [slug]/
7
│       └── +page.svelte   → /blog/:slug
8
└── api/
9
    └── posts/+server.js   → /api/posts

Special files:

+page.svelte: Page component
+page.js: Page data loader
+page.server.js: Server-only data loader
+layout.svelte: Layout wrapper
+server.js: API endpoint
[param]: Dynamic route parameter
[[optional]]: Optional parameter

Clean, intuitive, and powerful.

Q3: What is the purpose of load functions in SvelteKit?

A3: load functions fetch data before rendering a page. They run:

On the server during SSR
In the browser during client-side navigation

+page.js (universal):

1
export async function load({ fetch, params }) {
2
  const res = await fetch(`/api/posts/${params.slug}`);
3
  return { post: await res.json() };
4
}

+page.server.js (server-only):

1
export async function load({ params }) {
2
  const post = await db.getPost(params.slug);
3
  return { post };
4
}

Use server-only loads for:

Database access
Private API keys
Sensitive data

Data is available via $props() in the page component.

Q4: What is the difference between +page.js and +page.server.js?

A4:

+page.js (Universal loader):

Runs on server AND client
Can’t access server-only APIs
Code is sent to browser
Use fetch for external APIs

+page.server.js (Server-only loader):

Only runs on server
Can access databases, private keys
Code never sent to browser
More secure for sensitive operations

1
// +page.server.js - secure
2
export async function load() {
3
  const data = await db.query('SELECT * FROM users');
4
  return { data };
5
}

Choose server-only when you need security or server resources.

Q5: What are SvelteKit form actions and when would you use them?

A5: Form actions handle server-side form submissions progressively enhanced:

1
export const actions = {
2
  default: async ({ request }) => {
3
    const data = await request.formData();
4
    const email = data.get('email');
5

6
    // Process form
7
    await sendEmail(email);
8

9
    return { success: true };
10
  }
11
};

1
<script>
2
  import { enhance } from '$app/forms';
3
  let { form } = $props();
4
</script>
5

6
<form method="POST" use:enhance>
7
  <input name="email" type="email" />
8
  <button>Submit</button>
9
</form>
10

11
{#if form?.success}
12
  <p>Email sent!</p>
13
{/if}

Benefits:

Works without JavaScript (progressive enhancement)
Automatic revalidation
Built-in error handling
No API routes needed for forms

Q6: How do layouts work in SvelteKit?

A6: Layouts wrap pages and share UI across routes:

1
<!-- src/routes/+layout.svelte (root layout) -->
2
<nav>
3
  <a href="/">Home</a>
4
  <a href="/about">About</a>
5
</nav>
6

7
<main>
8
  <slot /> <!-- Page content goes here -->
9
</main>
10

11
<footer>© 2025</footer>

Nested layouts:

1
src/routes/
2
├── +layout.svelte           (applies to all)
3
└── blog/
4
    ├── +layout.svelte       (applies to /blog/*)
5
    └── +page.svelte

Layouts:

Persist across navigation (don’t re-render)
Can have their own load functions
Can be reset with @ syntax: +layout@.svelte
Enable shared state and UI patterns

Q7: How do you handle environment variables in SvelteKit?

A7: SvelteKit uses two types of environment variables:

Private (server-only):

1
DATABASE_URL=secret
2

3
// +page.server.js
4
import { env } from '$env/dynamic/private';
5
console.log(env.DATABASE_URL); // Works

Public (client-side): Must be prefixed with PUBLIC_

1
PUBLIC_API_URL=https://api.example.com
2

3
// anywhere
4
import { env } from '$env/dynamic/public';
5
console.log(env.PUBLIC_API_URL); // Works in browser

Static (compile-time):

1
import { PUBLIC_API_URL } from '$env/static/public';

Private vars never reach the browser. Public vars are bundled into client code. This prevents accidentally exposing secrets.

Q8: What are SvelteKit hooks and what are they used for?

A8: Hooks run on every request and allow you to modify behavior:

Server hooks (hooks.server.js):

1
export async function handle({ event, resolve }) {
2
  // Authentication
3
  event.locals.user = await getUserFromSession(event.cookies.get('session'));
4

5
  const response = await resolve(event);
6
  return response;
7
}

Use cases:

Authentication/authorization
Request logging
Response headers
Session management
API proxying

Client hooks (hooks.client.js):

1
export async function handleError({ error, event }) {
2
  // Client-side error tracking
3
  logToService(error);
4
}

Hooks provide centralized request/response handling.

Q9: What is the difference between SSR, SSG, and CSR in SvelteKit?

A9:

SSR (Server-Side Rendering):

Renders pages on each request
Dynamic content
Use for personalized/real-time data
Default in SvelteKit

SSG (Static Site Generation):

Pre-renders pages at build time
Static HTML files
Use export const prerender = true
Best for blogs, docs, marketing pages

CSR (Client-Side Rendering):

Renders in browser
Use export const ssr = false
For highly interactive apps

You can mix all three in one app!

Q10: How do you handle errors in SvelteKit?

A10: Multiple ways to handle errors:

Throwing errors in load:

1
import { error } from '@sveltejs/kit';
2

3
export async function load({ params }) {
4
  const item = await db.get(params.id);
5
  if (!item) throw error(404, 'Not found');
6
  return { item };
7
}

Custom error page:

1
<script>
2
  import { page } from '$app/stores';
3
</script>
4
<h1>{$page.status}: {$page.error.message}</h1>

Error hooks:

1
export async function handleError({ error, event }) {
2
  console.error(error);
3
  return { message: 'Something went wrong' };
4
}

Errors automatically bubble up to nearest error boundary.

This refresher covers the essential concepts of SvelteKit. SvelteKit’s file-based routing and seamless full-stack integration make it a powerful framework for building modern web applications.

← Svelte 5 Refresher with Runes