Guide du débutant sur les fonctions distantes dans SvelteKit

Vous avez créé des applications SvelteKit avec des endpoints +server.ts et des actions de formulaire. Elles fonctionnent, mais vous écrivez du code répétitif : analyse des corps de requête, validation manuelle des entrées et maintien de définitions de types séparées pour le client et le serveur. Les fonctions distantes SvelteKit offrent une approche différente : des appels serveur type-safe sans la cérémonie des endpoints API traditionnels.

Ce guide explique ce que sont les fonctions distantes, quand utiliser chaque type, et les compromis que vous devez comprendre avant de les adopter.

Que sont les fonctions distantes SvelteKit ?

Les fonctions distantes vous permettent d’écrire du code côté serveur que les clients appellent comme des fonctions régulières. En coulisses, SvelteKit compile ces fonctions en endpoints HTTP et génère des wrappers fetch pour le client. Vous obtenez une sécurité de type de bout en bout sans construire ni maintenir de routes API traditionnelles.

Considérez cela comme SvelteKit gérant la plomberie entre votre frontend et votre backend. Vous écrivez une fonction dans un fichier .remote.ts, et SvelteKit gère la sérialisation, la génération d’endpoints et l’inférence de types.

Si vous souhaitez la référence officielle, cette fonctionnalité est documentée dans la documentation SvelteKit sous Remote Functions : https://kit.svelte.dev/docs/remote-functions

Activation de la fonctionnalité expérimentale

Les fonctions distantes nécessitent une activation explicite via kit.experimental.remoteFunctions dans votre svelte.config.js :

const config = {
  kit: {
    experimental: {
      remoteFunctions: true
    }
  }
};

export default config;

Si vous souhaitez utiliser await directement dans les composants Svelte, vous devrez également activer séparément le support asynchrone expérimental de Svelte. Ce n’est pas obligatoire—les fonctions distantes fonctionnent sans cela—mais cela simplifie le code des composants.

Les quatre types de fonctions serveur SvelteKit

Les fonctions distantes se déclinent en quatre variantes, chacune conçue pour des cas d’usage spécifiques.

Query : récupération de données dynamiques

Utilisez query lors de la lecture de données depuis des bases de données, des API ou toute ressource serveur. Les queries peuvent s’exécuter pendant le rendu du composant et sont dédupliquées et groupées au sein du même cycle de vie de rendu.

import { query } from '$app/server';
import { db } from '$lib/db';
import { posts } from '$lib/schema';

export const getPosts = query(async () => {
  return await db.select().from(posts);
});

Pour les scénarios critiques en termes de performance, query.batch regroupe plusieurs appels simultanés en une seule requête—résolvant le problème n+1 sans optimisation manuelle.

Form : mutations de données avec amélioration progressive

La fonction form gère la soumission des entrées utilisateur. Son avantage clé est l’amélioration progressive. Les formulaires fonctionnent sans JavaScript, se repliant sur une soumission traditionnelle lorsque nécessaire.

Déployez l’objet retourné sur votre élément <form>, et SvelteKit gère automatiquement les soumissions améliorées et non améliorées.

Command : mutations flexibles

command fonctionne comme form mais n’est pas lié aux éléments de formulaire. Utilisez-le pour les clics de bouton, les actions de glisser-déposer ou toute mutation déclenchée en dehors d’un contexte de formulaire.

Contrairement aux formulaires, les commandes nécessitent JavaScript. Choisissez form lorsque l’amélioration progressive est importante. Choisissez command lorsque vous avez besoin de flexibilité.

Prerender : données statiques au moment du build

prerender récupère les données pendant le build, pas à l’exécution. Les résultats sont mis en cache au moment du build et servis via le cache de la plateforme ou le CDN. Utilisez cela pour la configuration, le contenu CMS qui ne change qu’au déploiement, ou toute donnée qui ne nécessite pas de mises à jour en temps réel.

Contrainte importante : vous ne pouvez pas utiliser query sur des pages entièrement prérendues, car les queries sont intrinsèquement dynamiques.

Sécurité : chaque fonction distante est un endpoint public

C’est essentiel à comprendre : chaque fonction distante devient un endpoint HTTP que n’importe qui peut appeler. La validation des entrées n’est pas optionnelle—elle est essentielle.

SvelteKit s’attend à ce que vous validiez les arguments en utilisant des bibliothèques Standard Schema comme Zod ou Valibot (l’initiative “Standard Schema” est documentée sur https://standardschema.dev) :

import { query } from '$app/server';
import * as v from 'valibot';
import { db } from '$lib/db';
import { posts } from '$lib/schema';

const Params = v.object({
  slug: v.string()
});

export const getPost = query(Params, async ({ slug }) => {
  return await db.select().from(posts).where(eq(posts.slug, slug));
});

Sans validation, les attaquants peuvent envoyer des données arbitraires à vos endpoints. SvelteKit retourne généralement des erreurs de niveau 400 pour les échecs de validation, évitant la fuite d’informations.

Maintenez SvelteKit à jour

Les versions précédentes présentaient des vulnérabilités de sécurité affectant les fonctions distantes, notamment des problèmes de déni de service (DoS). Restez à jour avec les versions, surtout tant que la fonctionnalité reste expérimentale (à partir de SvelteKit 2.x).

Compromis à considérer

Les fonctions distantes réduisent le code répétitif mais ne sont pas magiques. Considérez ces contraintes :

• L’emplacement du fichier compte : les fichiers .remote.ts vont n’importe où dans src sauf src/lib/server
• Mise en cache du prerender : la mise en cache du navigateur et du CDN signifie des données obsolètes jusqu’au redéploiement
• Statut expérimental : les API peuvent changer et des bugs sont attendus

Les fonctions distantes fonctionnent mieux lorsque vous souhaitez une communication client-serveur type-safe sans maintenir de définitions d’endpoints séparées. Elles ne remplacent pas tous les fichiers +server.ts—les flux d’authentification complexes ou les gestionnaires de webhooks tiers peuvent encore justifier des endpoints traditionnels.

Quand utiliser chaque type de fonction

Conclusion

Les fonctions distantes SvelteKit simplifient la frontière entre le code client et serveur. Elles éliminent la maintenance manuelle des endpoints tout en fournissant une validation et une sécurité de type intégrées. Commencez avec query pour la récupération de données, ajoutez form pour les entrées utilisateur, et utilisez command ou prerender lorsque ces modèles spécifiques correspondent à vos besoins.

La fonctionnalité est expérimentale—attendez-vous à des changements. Mais pour les développeurs SvelteKit fatigués du code répétitif des endpoints, les fonctions distantes offrent une alternative convaincante qui mérite d’être explorée.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.