Mit SvelteKit stellt das Svelte-Ökosystem ein umfassendes Meta-Framework bereit, das moderne Webstandards konsequent umsetzt: Datei-basiertes Routing, modulare Layouts, serverseitiges Rendering (SSR), Static-Site-Generation (SSG) und exzellente SEO-Unterstützung – alles direkt integriert und ohne zusätzliche Konfiguration.

📁 Datei-basiertes Routing – einfach und mächtig

SvelteKit nutzt ein dateibasiertes Routingsystem, das stark an Next.js erinnert. Jede Datei in src/routes wird automatisch zur Route.

Beispiele:

src/routes/
├── +page.svelte          → /
├── about/+page.svelte    → /about
├── blog/[slug]/+page.svelte → /blog/:slug

• +page.svelte: Definiert die Seite (komponentenbasiert)
• +page.ts/js: Optionaler Server- oder Client-Loader für Daten
• [param]: Dynamische Route (z. B. für Blogposts oder Produktseiten)
• [[optional]]: Optionaler Parameter

🧱 Layouts – wiederverwendbare Seitenstruktur

SvelteKit unterstützt nested Layouts – d. h. ein übergeordnetes Layout kann mehreren Unterseiten dienen.

Beispielstruktur:

src/routes/
├── +layout.svelte        → Basislayout (z. B. Header/Footer)
├── about/+page.svelte
├── dashboard/
│   ├── +layout.svelte    → eigenes Layout für Dashboard
│   └── stats/+page.svelte

In +layout.svelte:

<Header />
<main><slot /></main>
<Footer />

Layouts können eigene Scripts, Styles oder auch Stores enthalten – und so Logik und Struktur bündeln.

SEO mit SvelteKit

SvelteKit bietet alles, was moderne SEO braucht – und das direkt aus dem Framework heraus.

Vorteile:

• Server-side Rendering: Inhalte sind bei Seitenaufruf direkt verfügbar
• Page-Preloading: Schnelles Navigieren ohne harte Reloads
• Meta-Tags dynamisch setzen
• Zugriff auf Pfad, Params, Daten im <svelte:head>

Beispiel:

<svelte:head>
  <title>Mein Blog – {data.title}</title>
  <meta name="description" content={data.summary} />
</svelte:head>

Load-Funktion – Daten vorab laden

Mit load() lassen sich Daten für Seiten und Layouts vorab laden – auf Client oder Server.

Beispiel in +page.ts:

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

In der Komponente steht data.post dann direkt zur Verfügung.

Vorteile:

• Trennung von Datenlogik und UI
• SSR, SSG oder clientseitiges Laden möglich
• Voller TypeScript-Support

Internationalisierung (i18n) & dynamisches Routing

SvelteKit bietet viele Erweiterungsmöglichkeiten für internationale Projekte:

• Middleware zum Umschalten von Sprachen
• Dynamische Routen pro Sprache
• Integration mit Libraries wie svelte-i18n oder tolgee

Best Practices für Struktur & Routing

• Flache Routenstruktur mit sinnvollen Unterordnern
• Gemeinsame Komponenten und Stores in /src/lib/
• Layouts nutzen für konsistente Navigation & Struktur
• Separate +layout.ts Dateien zur Vorbereitung von Layout-Daten (z. B. Userstatus, Menüs)
• SEO-optimierte Titel & Meta-Tags pro Seite

Ein letzter Gedanke (Teil 5)

SvelteKit nimmt viele Hürden moderner Webentwicklung ab – mit durchdachtem Routing, flexiblen Layouts, schneller Datenverarbeitung und starker SEO-Basis. Die Kombination aus minimalistischem Code und maximaler Kontrolle macht es zu einer leistungsfähigen Plattform für moderne Single-Page- und Multi-Page-Anwendungen.