SvelteKit

Qu’est-ce que SvelteKit ?

SvelteKit est le framework d’application officiel pour Svelte. Svelte vous apporte les composants et la réactivité ; SvelteKit ajoute le routage, le chargement de données côté serveur, la gestion des formulaires, les points de terminaison API et les adaptateurs de déploiement. C’est la méthode recommandée pour construire tout projet plus complexe qu’un simple widget, et il s’intègre naturellement avec Svelte 5.

Si vous avez déjà utilisé Next.js ou Nuxt, la structure vous semblera familière. La différence réside dans une forte orientation vers les standards du web : les formulaires, les requêtes et les réponses sont des primitives de la plateforme, et SvelteKit les améliore plutôt que de les remplacer.

Routage basé sur les fichiers

Tout se trouve dans src/routes. Les dossiers deviennent des segments d’URL, et des fichiers nommés spécifiquement définissent le comportement.

src/routes/
├── +layout.svelte          # shared shell for all routes
├── +page.svelte            # /
├── about/+page.svelte      # /about
├── blog/
│   ├── +page.svelte        # /blog
│   └── [slug]/
│       ├── +page.svelte    # /blog/:slug
│       └── +page.server.js # data for that page
└── api/
    └── posts/+server.js    # GET/POST /api/posts

Le préfixe + marque les fichiers spéciaux de SvelteKit. +page.svelte rend une page, +layout.svelte enveloppe les routes enfants, +page.server.js fournit des données côté serveur uniquement, et +server.js définit un point de terminaison API.

Fonctions de chargement (Load functions)

Les fonctions de chargement récupèrent les données avant le rendu d’une page. Elles peuvent s’exécuter sur le serveur, dans le navigateur, ou les deux.

// src/routes/posts/+page.server.js
export async function load({ fetch }) {
  const res = await fetch("/api/posts");
  if (!res.ok) throw error(500, "Failed to load posts");
  return { posts: await res.json() };
}

<!-- src/routes/posts/+page.svelte -->
<script>
  let { data } = $props();
</script>

<ul>
  {#each data.posts as post (post.id)}
    <li>{post.title}</li>
  {/each}
</ul>

Comme les données sont résolues avant le rendu, le premier affichage (first paint) contient déjà du contenu. Utilisez +page.server.js lorsque le code nécessite des secrets ou une base de données, et +page.js lorsqu’il peut s’exécuter aux deux endroits. Les layouts peuvent également posséder des fonctions de chargement, et les chargements enfants reçoivent les données du parent.

Actions de formulaire

Les formulaires sont des citoyens de premier plan. Une action de formulaire s’exécute sur le serveur et gère la soumission, sans qu’aucun fetch côté client ne soit nécessaire.

// src/routes/posts/new/+page.server.js
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const title = String(data.get("title") ?? "").trim();

    if (!title) {
      return { success: false, error: "Title is required" };
    }

    await db.post.create({ data: { title } });
    return { success: true };
  },
};

<!-- src/routes/posts/new/+page.svelte -->
<script>
  let { form } = $props();
</script>

<form method="POST">
  <input name="title" />
  {#if form?.error}<p class="error">{form.error}</p>{/if}
  <button>Create</button>
</form>

Le formulaire fonctionne avant même le chargement de JavaScript, et SvelteKit l’améliore une fois que le client est prêt. La valeur retournée est disponible dans la prop form de la page, ce qui rend le retour d’information sur la validation très simple.

Points de terminaison de l’API

Pour les API JSON, un fichier +server.js exporte des gestionnaires HTTP.

// src/routes/api/posts/+server.js
import { json } from "@sveltejs/kit";

export async function GET() {
  const posts = await db.post.findMany();
  return json(posts);
}

export async function POST({ request }) {
  const body = await request.json();
  const post = await db.post.create({ data: body });
  return json(post, { status: 201 });
}

Il s’agit d’objets Request et Response web standards, donc les mêmes connaissances sont transférables vers d’autres runtimes et frameworks.

Hooks

Un fichier hooks.server.js s’exécute à chaque requête. C’est l’endroit idéal pour gérer l’authentification, le logging et le remplissage de event.locals.

// src/hooks.server.js
export async function handle({ event, resolve }) {
  const session = await getSession(event.cookies);
  event.locals.user = session?.user ?? null;

  return resolve(event);
}

Tout ce que vous définissez sur locals est accessible aux fonctions de chargement (load functions) et aux actions, ce qui permet de centraliser les préoccupations transversales au lieu de les disperser dans les routes.

Rendu et adaptateurs

SvelteKit prend en charge plusieurs stratégies de rendu et vous permet de choisir celle qui convient pour chaque route :

• SSR effectue le rendu sur le serveur et l’hydratation dans le navigateur.
• Prerendering génère du HTML statique lors de l’étape de build.
• CSR effectue le rendu uniquement dans le navigateur pour les routes qui désactivent les autres options.
• Hybride mélange ces trois approches, permettant par exemple qu’une page marketing soit statique tandis qu’une route d’application soit rendue côté serveur.

Le déploiement est géré par des adapters. Installez l’adapter correspondant à votre cible — Node.js, static, Vercel, Netlify, Cloudflare et bien d’autres — configurez-le, et le même code source sera compilé pour cette plateforme. Changer d’hébergeur ne nécessite généralement qu’une seule ligne de modification.

Bonnes pratiques

• Utilisez les fonctions load +page.server.js pour les données qui doivent rester sur le serveur.
• Privilégiez les form actions aux requêtes POST côté client pour les mutations.
• Gérez l’authentification et les logs dans hooks.server.js.
• Choisissez le mode de rendu le plus restrictif possible pour chaque route.
• Utilisez +layout.svelte pour l’UI partagée afin que l’état persiste lors de la navigation.
• Typez les valeurs de retour de vos fonctions load lorsque vous utilisez TypeScript.
• Installez dès le départ un adapter correspondant à votre cible de déploiement.

Erreurs courantes

• Effectuer des appels fetch dans onMount et perdre le rendu serveur.
• Placer des secrets dans un +page.js load universel au lieu de +page.server.js.
• Recréer des formulaires avec des appels fetch côté client alors que les actions fonctionnent déjà.
• Oublier de mettre des clés dans les blocs {#each}, ce qui casse les mises à jour de listes.
• Prerender une route qui dépend de données utilisateur.
• Ignorer les hooks et dupliquer les vérifications d’authentification dans chaque fonction load.

Et après ?

SvelteKit est la solution complète pour construire des applications avec Svelte. Approfondissez vos connaissances en Svelte, ajoutez TypeScript, et comparez son architecture avec celle de Next.js, Nuxt et Astro. Ensuite, créez une petite application comprenant une fonction load, une action de formulaire et un point de terminaison API pour voir l’ensemble du modèle en action.