Svelte 5 et SvelteKit 2 en production : guide complet 2026

Sur le terrain, l’équipe d’une fintech de Dakar essayait depuis trois mois de faire baisser le LCP de son tableau de bord client. React + Vite, 380 Ko de JavaScript chargé, 2,8 secondes pour atteindre l’état utilisable sur un Tecno Camon 18 connecté en 4G médiocre du côté de Yoff. La même équipe a réécrit l’écran clé en Svelte 5 + SvelteKit 2 : 92 Ko, LCP à 1,1 seconde, et un seul développeur a livré la migration en deux semaines. Ce guide explique pourquoi Svelte 5 (sorti en stable en octobre 2024) et SvelteKit 2 sont devenus en 2026 l’option la plus pragmatique pour les SaaS B2B et B2C ouest-africains, comment migrer depuis Svelte 4, et comment déployer sur un VPS Hetzner FRA1 ou sur Cloudflare Pages avec une latence acceptable depuis Abidjan, Bamako ou Cotonou.

Cet article est le pilier du cluster Svelte 5 d’itskillscenter.io. Il couvre la vue d’ensemble. Les tutoriels pas-à-pas sont publiés en satellites séparés, listés en fin d’article.

Pourquoi Svelte 5 et SvelteKit 2 en 2026

Svelte 5 a atteint la stabilité (GA) le 20 octobre 2024. Le compilateur génère un bundle qui n’embarque pas de runtime virtuel-DOM et le code produit ressemble à du JavaScript impératif optimisé pour les hot paths. Pour un dashboard de complexité moyenne (10 routes, 30 composants, deux ou trois bibliothèques de graphiques), un projet React + Next.js 15 sort autour de 190 Ko gzippés ; le même périmètre en SvelteKit 2 oscille entre 60 et 95 Ko gzippés. Sur les marchés ouest-africains, cet écart de 100 Ko se traduit par 600 à 900 ms gagnés au First Contentful Paint sur un réseau 4G congestionné, mesuré sur des terminaux Tecno, Itel et Infinix d’entrée de gamme qui dominent les ventes au Sénégal et en Côte d’Ivoire.

Trois changements de fond expliquent l’adoption en production en 2026 : les runes (le nouveau modèle de réactivité), une intégration TypeScript plus prévisible, et un écosystème SvelteKit qui couvre désormais SSR, ISR, edge functions et form actions de bout en bout. Là où Vue 3 demande de choisir entre Composition API et Options API, et où React impose des hooks avec leurs règles de dépendances, Svelte 5 propose un modèle unique, lisible, et qui se compile sans surprise.

Le coût d’apprentissage reste le plus faible des trois grands frameworks frontaux. Une équipe qui maîtrise HTML/CSS/JS standard est productive en deux à trois jours. Les développeurs venant de jQuery ou de Laravel Blade s’y retrouvent particulièrement vite, ce qui en fait un bon choix pour les agences ouest-africaines qui doivent former rapidement un junior sur un projet client.

Les runes : le nouveau modèle de réactivité

Les runes remplacent l’ancienne syntaxe magique (let, $:, export let) par des fonctions explicites préfixées par un dollar. Ce qui ressemble à un détail cosmétique change profondément la maintenabilité : la réactivité est désormais visible dans le code, l’IDE peut typer correctement chaque valeur, et les patterns avancés (granularité fine, dérivations en cascade, effets) deviennent prévisibles.

Les cinq runes du quotidien :

• $state(initial) — déclare une valeur réactive. Lecture et écriture comme une variable normale, mais toute mutation déclenche les abonnés.
• $derived(expression) — calcul dérivé recalculé automatiquement quand ses dépendances changent. Pour des dérivations longues ou conditionnelles, utiliser $derived.by(() => { ... }).
• $effect(fn) — effet de bord exécuté après le rendu. Idéal pour synchroniser avec une API externe, un timer, une lib non-Svelte.
• $props() — récupère toutes les props d’un composant en une fois, avec destructuration et défauts.
• $bindable() — autorise un parent à utiliser bind: sur une prop, pour le pattern formulaire contrôlé.

<script>
  let { initial = 0 } = $props();
  let count = $state(initial);
  let double = $derived(count * 2);

  $effect(() => {
    document.title = `Compteur : ${count}`;
  });
</script>

<button onclick={() => count++}>{count} (×2 = {double})</button>

Trois pièges concrets que nous voyons en mission chez nos clients à Dakar et Abidjan : (1) muter un objet sans réassigner ne déclenche pas la réactivité si l’objet a été déclaré sans $state — les structures imbriquées doivent être créées via $state pour rester proxy-réactives ; (2) les $effect ne se relancent que sur les valeurs lues *synchroniquement* dans la fonction — un await coupe la chaîne de dépendances ; (3) $derived est paresseux : il ne se recalcule que quand on le lit, pas à chaque changement de dépendance.

SvelteKit 2 : routing, SSR, ISR

SvelteKit 2 rend le routing explicite via le système de fichiers : chaque dossier dans src/routes/ devient une URL, et chaque dossier peut contenir +page.svelte (vue), +page.server.ts (chargement et form actions côté serveur), +page.ts (chargement universel), +layout.svelte (layout partagé) et +server.ts (handler API REST). Cette convention impose un emplacement clair pour chaque type de logique, ce qui facilite la revue de code et l’arrivée de nouveaux développeurs.

Trois modes de rendu coexistent et se choisissent par route :

• SSR (par défaut) — le serveur rend le HTML, le client hydrate. Idéal pour les pages publiques d’un e-commerce ou d’un blog, où le SEO compte.
• SPA / CSR-only — désactiver le SSR sur une route via export const ssr = false. Utile pour un dashboard 100 % client après authentification.
• Pré-rendu / SSG — export const prerender = true génère un fichier HTML statique au build. Pour les pages institutionnelles, blogs, documentation.

L’ISR (Incremental Static Regeneration) est disponible sur les adapters Vercel et Cloudflare. Sur un VPS auto-hébergé, on l’imite avec un cache HTTP en amont (Caddy ou nginx avec proxy_cache) plus un cron qui invalide la clé.

Form actions et progressive enhancement

Les form actions sont la fonctionnalité qui change le plus la productivité au quotidien. On déclare des actions dans +page.server.ts, on les invoque depuis un <form method="POST"> classique, et on ajoute use:enhance côté client pour passer en AJAX sans changer la logique. Le formulaire fonctionne sans JavaScript (utile sur les terminaux bas de gamme à Bamako où la connexion coupe), puis se transforme automatiquement en interaction fluide quand le bundle est chargé.

// +page.server.ts
export const actions = {
  default: async ({ request, cookies }) => {
    const form = await request.formData();
    const email = form.get('email');
    if (!email) return fail(400, { email, missing: true });
    await sendMagicLink(email);
    return { success: true };
  }
};

La validation côté serveur reste la source de vérité — règle de sécurité de base. Pour la validation côté client (instantanée), on couple Svelte 5 avec Zod ou Valibot, qui partagent la même définition de schéma entre serveur et client. Le tutoriel satellite « Formulaires avec form actions et Zod » couvre ce pattern en détail.

Adapters : Node, Cloudflare, Hetzner self-hosted

SvelteKit produit du code agnostique du runtime. L’adapter détermine le format de sortie : adapter-node pour un serveur Node.js classique sur VPS, adapter-cloudflare pour Workers et Pages, adapter-vercel pour Vercel, adapter-static pour un site 100 % statique. Pour une PME ouest-africaine qui contrôle son budget et ses données, deux configurations dominent en 2026 :

1. Hetzner FRA1 + adapter-node + Caddy. CX22 (4 €/mois HT, environ 2 600 FCFA), Node 22 LTS via NVM, reverse proxy Caddy avec HTTPS automatique, déploiement par rsync et redémarrage systemd. Latence moyenne depuis Dakar : 90-120 ms en heure creuse, 150-180 ms en heure de pointe.
2. Cloudflare Pages + adapter-cloudflare. Plan Free, 500 builds/mois, edge global. Latence quasi nulle depuis Lagos, Accra, Abidjan grâce au PoP de Lagos. Limite : 1 Mo par worker, ce qui exclut les SaaS aux grosses dépendances.

Notre tutoriel satellite « Déployer SvelteKit sur Hetzner avec Caddy » détaille la configuration systemd, les sauvegardes, et la mise en place de Cloudflare devant le VPS pour absorber les pics. Pour la mise à jour zéro-downtime, l’unité systemd kestrel (ou un PM2 cluster mode) avec un drain de 30 secondes suffit pour la majorité des SaaS B2B.

Migration depuis Svelte 4

La migration n’est pas un big-bang. Svelte 5 reste compatible avec la syntaxe Svelte 4 par défaut : un projet existant continue de tourner sans modification. Le mode runes s’active fichier par fichier en ajoutant <svelte:options runes={true} /> ou en utilisant une rune dans le fichier (ce qui force le mode runes).

Plan de migration recommandé sur un projet de production :

1. Mettre à jour les dépendances : npm i svelte@5 @sveltejs/kit@2 @sveltejs/vite-plugin-svelte@4.
2. Lancer la suite de tests existante. Tous les composants Svelte 4 doivent encore passer.
3. Identifier 2-3 composants à fort trafic et les migrer en mode runes manuellement. Mesurer.
4. Activer la migration assistée : npx sv migrate svelte-5 sur des dossiers ciblés.
5. Renforcer les tests d’intégration sur les pages migrées.
6. Migrer le reste par lots de 5-10 composants par semaine.

Trois pièges récurrents : les stores legacy (writable, readable) coexistent avec les runes mais on perd l’avantage du compilateur — privilégier $state dans les nouveaux composants. Les directives $: qui mélangeaient dérivation et effet doivent être disambiguïsées en $derived ou $effect. Le slot par défaut est remplacé par {#snippet} ; la migration n’est pas automatique pour les patterns complexes.

Adaptation au contexte ouest-africain

Trois leviers donnent l’avantage décisif à Svelte 5 + SvelteKit 2 sur les marchés où la connectivité varie fortement entre Plateau (Abidjan), Yopougon, ou plus loin de Dakar comme Touba ou Saint-Louis :

1. Bundle minimal. Le code compilé n’embarque pas de runtime de framework. Pour une boutique e-commerce avec catalogue et panier, on tient sous les 80 Ko gzippés. Sur une 4G qui tombe à 0,5 Mb/s en heure de pointe, c’est 1,3 seconde de téléchargement contre 3,1 secondes pour un équivalent React. Cet écart change directement le taux de rebond et donc le CA d’une boutique Wave/OM.

2. Progressive enhancement par défaut. Les form actions fonctionnent sans JavaScript. Un client qui valide son panier au moment où la 4G coupe ne perd pas son action — le formulaire HTML standard s’envoie, l’API serveur traite, et la page suivante s’affiche. C’est gratuit avec SvelteKit, là où Next.js demande des contorsions et React Router 7 vient à peine d’introduire l’équivalent.

3. Hébergement abordable. Un VPS Hetzner CX22 (~2 600 FCFA/mois) tient un SaaS de 5 000 utilisateurs actifs en SvelteKit. La même charge en Next.js exige souvent un CX32 ou un déploiement Vercel à 20 $/mois. Pour une fintech à Abidjan qui paye ses serveurs en euros via Wave, l’écart est sensible.

Pour le paiement intégré, SvelteKit s’interface naturellement avec PayDunya, CinetPay, Wave Direct, et les API officielles d’Orange Money et Free Money. Les form actions côté serveur garantissent que le secret API ne fuit jamais côté client. Voir notre tutoriel « Intégrer Wave et Orange Money en SvelteKit » pour les patterns précis.

Erreurs fréquentes à éviter

FAQ

Faut-il migrer un projet Svelte 4 stable vers Svelte 5 maintenant ?
Oui si l’équipe ajoute des fonctionnalités régulièrement : le code en mode runes est plus lisible, plus typable, et la maintenance future en bénéficiera. Non si le projet est en mode « maintenance corrective uniquement » — Svelte 4 reçoit encore des correctifs.

SvelteKit 2 supporte-t-il React Server Components ?
Non, et c’est un choix de design. SvelteKit utilise son propre modèle SSR + form actions + load functions, qui couvre 90 % des cas d’usage des RSC sans la complexité associée. Pour le streaming de données, voir load avec promesses non-await.

Quel hébergeur choisir entre Hetzner, Vercel, Cloudflare et Render ?
Hetzner si le budget est serré et qu’on accepte d’administrer un VPS (idéal pour les agences ouest-africaines qui contrôlent les coûts). Cloudflare Pages si l’app tient sous 1 Mo et que la latence edge prime. Vercel pour le confort DX maximum mais avec une facturation plus élevée. Render comme intermédiaire : plus cher que Hetzner, plus simple, plan gratuit limité.

Peut-on utiliser Tailwind CSS, shadcn-svelte, Skeleton UI avec Svelte 5 ?
Oui pour Tailwind (configuration standard via postcss). Oui pour shadcn-svelte qui supporte les runes depuis sa v0.13. Skeleton UI v3 est compatible Svelte 5. Eviter les libs UI inactives depuis 2024.

Comment tester un composant Svelte 5 ?
Vitest + @testing-library/svelte v5+ pour les tests unitaires. Playwright pour les tests E2E qui valident le comportement form actions complet. Voir notre satellite « Tester SvelteKit avec Vitest et Playwright ».

Le mode runes casse-t-il les libs Svelte 4 existantes ?
Les libs Svelte 4 fonctionnent en mode legacy dans une app Svelte 5. Les libs publiées après mi-2024 supportent les deux modes. Vérifier le peerDependencies du package avant intégration.

Pour aller plus loin

Tutoriels du cluster Svelte 5 (satellites pas-à-pas) :

• Maîtriser les runes Svelte 5 : $state, $derived, $effect en pratique — patterns réels et pièges des dérivations en cascade.
• Formulaires SvelteKit 2 avec form actions et Zod — validation partagée client/serveur, progressive enhancement complet.
• Déployer SvelteKit sur Hetzner avec Caddy : zéro-downtime — VPS CX22, systemd, Cloudflare devant.
• Tester SvelteKit avec Vitest et Playwright — pyramide de tests et CI GitHub Actions.

Articles connexes sur itskillscenter.io :

• Bun en production 2026 : guide complet — runtime alternatif compatible avec SvelteKit.
• Hetzner Cloud depuis l’Afrique de l’Ouest 2026 — guide d’hébergement VPS.
• VPS hardening sécurité 2026 — durcir le serveur qui héberge SvelteKit.

Documentation officielle :

• svelte.dev/docs — référence Svelte 5
• kit.svelte.dev/docs — référence SvelteKit 2
• Annonce officielle Svelte 5

Comparatif détaillé Svelte 5 vs React 19 vs Vue 3.5

Pour bien choisir un framework en 2026, il faut comparer sur cinq axes pratiques : taille de bundle, courbe d’apprentissage, écosystème, maturité SSR, et coût d’hébergement. Le tableau ci-dessous synthétise les mesures que nous avons relevées sur trois projets clients comparables (CRM B2B, ~25 routes, ~15 000 lignes de code applicatif) déployés en parallèle pour un benchmark interne.

Pour une application interne d’entreprise (back-office, dashboard analytique), Svelte 5 gagne nettement sur le ratio simplicité/performance. Pour un produit qui doit absolument intégrer un grand nombre de bibliothèques tierces très spécifiques (graphiques médicaux, CAD 3D), React reste devant grâce à son écosystème. Vue se positionne comme le compromis confortable, particulièrement apprécié des équipes habituées au templating PHP.

Écosystème 2026 : ORM, auth, UI, paiement

Le choix de Svelte 5 ne signifie pas réinventer la roue. L’écosystème en 2026 couvre tous les besoins courants d’une app SaaS ouest-africaine.

ORM et base de données. Drizzle ORM est devenu le standard pour les nouveaux projets SvelteKit 2. Il est typé strictement, fonctionne avec PostgreSQL, MySQL, SQLite, et son syntaxe SQL-like rappelle ce que les développeurs venant de Laravel Eloquent connaissent déjà. Prisma reste valide mais ses migrations parfois capricieuses sur les VPS bas-coût et son client lourd l’écartent souvent. Pour un projet petit à moyen, SQLite + Litestream (réplication automatique vers S3) suffit largement et simplifie les sauvegardes.

Authentification. Lucia auth a été archivée en 2024 ; le pattern recommandé en 2026 est de l’implémenter manuellement avec oslo (cookies signés, hash Argon2id). Pour un MVP rapide, Better Auth ou Clerk fonctionnent bien et leurs SDK supportent SvelteKit. Pour un compte fintech ou santé soumis à compliance UEMOA, on garde la main : sessions en base, rotation, audit log.

UI et design system. shadcn-svelte (port de shadcn/ui) offre une base de composants accessibles et personnalisables. Bits UI fournit les primitives « headless » pour les composants complexes (combobox, dialog, accordion). Skeleton UI v3 est compatible Svelte 5 depuis l’été 2025 et propose un ensemble plus opinioné. Pour les graphiques, LayerChart ou unovis sont les choix actuels, légers et performants.

Paiement local. SDK officiels disponibles pour Wave Direct, Orange Money (CI, SN, BF), Free Money, MTN MoMo. PayDunya et CinetPay agrègent plusieurs moyens de paiement avec une seule intégration — pratique pour démarrer, mais commission plus élevée. L’intégration via form actions (voir notre satellite dédié) garantit que les clés API ne fuitent jamais côté client.

Stratégie de migration progressive sur 6 mois

Pour une équipe qui maintient une app React ou Vue en production et veut migrer progressivement vers Svelte 5 sans gel des features, voici une roadmap éprouvée sur trois projets clients (deux à Dakar, un à Abidjan) :

• Mois 1 — Audit et POC. Identifier 1-2 modules à fort trafic et faible couplage. Reproduire en SvelteKit 2 dans un repo séparé. Mesurer bundle, LCP, productivité de l’équipe sur 2 features comparables.
• Mois 2 — Coexistence par routes. Configurer un reverse proxy (Caddy ou nginx) qui route certaines URLs vers la nouvelle app SvelteKit, le reste vers l’ancien front. L’auth est partagée via cookie de session signé.
• Mois 3-4 — Migration des modules à fort trafic. Réécrire les pages publiques (accueil, catalogue, fiche produit) pour bénéficier du SEO et de la performance immédiatement.
• Mois 5 — Migration du dashboard interne. Plus tolérant à la lenteur, donc moins urgent — mais les gains de productivité de l’équipe sur les nouvelles features compensent vite.
• Mois 6 — Décommissionnement. L’ancien front passe en read-only, puis est éteint. Sauvegardes archivées.

Erreur classique à éviter : tenter une réécriture big-bang en parallèle du run. Sur un projet de Dakar, l’équipe a perdu six mois à maintenir deux versions sans jamais converger. La migration par routes avec coexistence est plus lente sur le papier mais finit toujours en avance.

Quand ne pas choisir Svelte 5

Trois cas où un autre framework reste préférable. Premièrement, si l’application doit absolument intégrer un SDK propriétaire qui ne livre que des composants React (rare mais possible dans la santé ou la finance régulée). Deuxièmement, si l’équipe est à 100 % constituée de seniors React qui ont déjà une bibliothèque interne mature — la cohérence du parc l’emporte. Troisièmement, pour un site marketing pur statique sans interactivité, Astro ou un CMS Hugo sont plus adaptés que SvelteKit qui apporte un overhead inutile.

Benchmarks de référence (sources primaires)

Les chiffres avancés dans ce guide proviennent de mesures cohérentes sur des projets réels et croisent les benchmarks publics suivants :

• JS Framework Benchmark (Krausest) — Svelte 5 figure dans le top 5 sur les opérations DOM massives.
• State of JS — taux de satisfaction Svelte autour de 90 % depuis trois ans, le plus élevé des frameworks frontaux.
• WebPageTest sur connexion « Slow 4G » Africa profile — disponible en config personnalisée.

Les ordres de grandeur sont conservés ; les chiffres exacts varient selon la complexité du projet et la qualité de la connexion mesurée. Pour un benchmark sur votre stack, voir notre tutoriel Bun vs Node.js benchmarks reproductibles qui s’applique aussi à SvelteKit en adapter-node.