SvelteKit – Full-Stack Framework

6 Kernkonzepte

Die wichtigsten SvelteKit-Konzepte für Full-Stack-Entwicklung: Routing · Load-Funktionen · Form Actions · API-Endpoints · Layouts · Hooks SvelteKit ist das Full-Stack-Framework für Svelte – mit Datei-basiertem Routing, serverseitigem Rendering, API-Endpoints und vielem mehr. Diese Cheatsheet fasst die grundlegenden Konzepte zusammen.

Routing – Datei-basiertes Routing

+page.svelte · +layout.svelte · [slug]

src/routes/ ├── +layout.svelte ├── +page.svelte // / ├── about/ └── +page.svelte // /about ├── blog/ ├── [slug]/ └── +page.svelte // /blog/hello-world

SvelteKit verwendet ein datei-basiertes Routing: Jede +page.svelte-Datei im routes/-Verzeichnis wird automatisch zu einer Route. Dynamische Segmente werden mit eckigen Klammern [slug] definiert.

Beispiele

// Zugriff auf den Slug-Parameter

export let data;

</script>

<h1>{ data.title }</h1>

<p>{ data.content }</p>

export function load({ params }) {

return {

title: `Blogpost: ${params.slug}`,

content: "Inhalt des Blogposts..."

};

}

// Gruppen für organisierte Struktur (ohne Einfluss auf URL)

src/routes/(auth)/login/+page.svelte → /login

Tipp: Verwenden Sie +page.js oder +page.server.js für die Load-Funktion. Client-seitige Load-Funktionen werden im Browser ausgeführt, serverseitige auf dem Server.

Load-Funktionen – Daten laden

load({ params, fetch, url, parent })

// +page.js oder +page.server.js export async function load({ params, fetch, url, parent }) { const res = await fetch(`/api/posts/${params.slug}`); const post = await res.json(); return { post }; }

Load-Funktionen werden vor dem Rendern einer Seite ausgeführt und laden die benötigten Daten. Sie können serverseitig (+page.server.js) oder client-seitig (+page.js) ausgeführt werden.

Load-Parameter

Parameter	Beschreibung
params	Dynamische URL-Parameter (z.B. { slug: 'hello' })
fetch	Gefetchte Funktion (mit Credentials)
url	Volle URL der aktuellen Seite
parent	Daten von Layout-Load-Funktionen abrufen
cookies	Zugriff auf Cookies (nur server)
request	Das Request-Objekt (nur server)

Beispiele

// +page.server.js (serverseitig)

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

export async function load({ params, fetch }) {

// Daten von einer API laden

const res = await fetch(`https://api.example.com/posts/${params.id}`);

if (!res.ok) {

throw error(404, 'Beitrag nicht gefunden');

}

const post = await res.json();

return { post };

}

// +layout.server.js – Daten für alle Unterseiten

export async function load({ cookies }) {

const user = await getUserFromCookies(cookies);

return { user };

}

Tipp: Serverseitige Load-Funktionen (+page.server.js) werden nur auf dem Server ausgeführt – ideal für Datenbank-Zugriffe oder API-Aufrufe mit Secret-Keys.

Form Actions – Formulare verarbeiten

actions · enhance · applyAction

// +page.server.js export const actions = { default: async ({ request }) => { const data = await request.formData(); return { success: true }; } };

Form Actions ermöglichen die Verarbeitung von Formulardaten auf dem Server. Sie werden in +page.server.js definiert und über die action-Attribute von Formularen aufgerufen.

Beispiele

import { enhance } from '$app/forms';

</script>

<button type="submit">Absenden</button>

</form>

// +page.server.js

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

export const actions = {

// Default-Action (wird verwendet, wenn kein action-Attribut gesetzt ist)

default: async ({ request }) => {

const data = await request.formData();

const email = data.get('email');

if (!email || !email.includes('@')) {

return fail(400, { email, missing: true });

}

// Email speichern...

return { success: true };

}

// Benannte Actions: /?/login

};

Tipp: Verwenden Sie use:enhance, um Formulare progressiv zu verbessern – das Formular wird ohne Seiten-Neuladung abgesendet und die Antwort wird automatisch verarbeitet.

API-Endpoints – REST-APIs mit +server.js

+server.js · GET · POST · PUT · DELETE

// src/routes/api/posts/+server.js import { json } from '@sveltejs/kit'; export async function GET() { return json({ posts: [] }); }

API-Endpoints werden mit +server.js-Dateien definiert. Exportierte Funktionen wie GET, POST, PUT, DELETE behandeln die entsprechenden HTTP-Methoden.

Beispiele

// src/routes/api/posts/[id]/+server.js

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

export async function GET({ params, url }) {

const id = params.id;

// Daten aus Datenbank laden...

const post = await getPost(id);

if (!post) {

throw error(404, 'Post nicht gefunden');

}

return json(post);

}

export async function POST({ request, params }) {

const data = await request.json();

// Daten validieren und speichern...

const updated = await updatePost(params.id, data);

return json(updated, { status: 200 });

}

// DELETE-Endpoint

export async function DELETE({ params }) {

await deletePost(params.id);

return new Response(null, { status: 204 });

}

Tipp: Verwenden Sie json() aus @sveltejs/kit für einfache JSON-Antworten. Für andere Formate können Sie new Response(body, options) verwenden.

Layouts & Error-Pages – Struktur und Fehlerbehandlung

+layout.svelte · +error.svelte · +layout.server.js

// +layout.svelte (Haupt-Layout) <script> import { page } from '$app/stores'; </script> <slot />

Layouts definieren die gemeinsame Struktur von Seiten. +layout.svelte wird automatisch von allen Unterseiten verwendet. +error.svelte wird bei Fehlern angezeigt.

Beispiele

import { page } from '$app/stores';

import Header from '$lib/Header.svelte';

import Footer from '$lib/Footer.svelte';

</script>

</main>

export async function load({ cookies }) {

const user = await getUser(cookies);

return { user };

}

import { page } from '$app/stores';

</script>

<h1>{ $page.status } - Fehler</h1>

<p>{ $page.error?.message }</p>

Tipp: Verwenden Sie +layout.svelte für Elemente, die auf allen Seiten erscheinen sollen (Header, Footer, Navigation). +error.svelte wird automatisch bei serverseitigen Fehlern angezeigt.

Hooks – Globale Funktionen

handle · handleFetch · handleError

// src/hooks.server.js export async function handle({ event, resolve }) { const response = await resolve(event); return response; }

Hooks sind globale Funktionen, die bei jeder Anfrage ausgeführt werden. Sie ermöglichen Authentifizierung, Logging, CORS-Konfiguration und Fehlerbehandlung.

Beispiele

// src/hooks.server.js

import { sequence } from '@sveltejs/kit/hooks';

// Authentifizierungs-Hook

export async function handle({ event, resolve }) {

// User aus Cookie laden

const user = await getUserFromCookie(event.cookies);

event.locals.user = user;

const response = await resolve(event);

return response;

}

// Multiple Hooks mit sequence

const logger = async ({ event, resolve }) => {

console.log(`${event.request.method} ${event.url.pathname}`);

return await resolve(event);

};

// src/hooks.client.js (client-seitig)

export async function handleError({ error, event }) {

console.error('Client Error:', error);

return {

message: 'Ein Fehler ist aufgetreten'

};

}

// CORS-Header setzen

export async function handle({ event, resolve }) {

const response = await resolve(event);

response.headers.set('Access-Control-Allow-Origin', '*');

return response;

}

Tipp: Verwenden Sie event.locals, um Daten zwischen Hooks und Load-Funktionen zu teilen – ideal für Benutzerinformationen oder Datenbankverbindungen.

SvelteKit im Überblick

+page.svelte Seitenkomponente
Datei-basiertes Routing

load() Daten laden
+page.js / +page.server.js

actions Formularverarbeitung
+page.server.js

+server.js API-Endpoints
GET, POST, PUT, DELETE

+layout Layouts & Fehler
+layout.svelte, +error.svelte

hooks Globale Funktionen
handle, handleError

Quick Summary

[slug]

Dynamisches Routing

load()

Daten laden

actions

Formularverarbeitung

+server.js

API-Endpoints

+layout

Layouts & Fehler

hooks

Globale Hooks

export async function load({ params }) { ... } · export const actions = { default: async ({ request }) => { ... } }