Types de projet

SvelteKit offre un rendu configurable, ce qui vous permet de construire et déployer votre projet de différentes manières. Avec SvelteKit vous pouvez construire tous les types d’application listés ci-dessous, et bien plus encore. Les paramètres de rendu ne sont pas mutuellement exclusifs, et vous pouvez tout à fait choisir de manière optimale comment rendre différentes parties de votre application.

Si vous n’avez vraiment réfléchi à la manière dont vous souhaitez construire votre application, ne vous inquiétez pas ! La façon dont votre application est construite, déployée et rendue est contrôlée par l’adaptateur que vous avez choisi et un peu de configuration, et tout ça peut être modifié plus tard. La structure de projet et le routing sont exactement les mêmes quelque soit le type de projet que vous choisissez.

Rendu par défaut

Par défaut, lorsque quelqu’un visite un site, SvelteKit va rendre la première page avec du rendu côté serveur (SSR) et les pages suivantes avec du rendu côté client (CSR). L’utilisation du SSR pour le rendu initial améliore le référencement (SEO) et la performance perçue du chargement de page initial. Le rendu côté client prend ensuite le relais et met à jour la page sans avoir besoin de re-rendre les composants en commun, ce qui est généralement plus rapide et évite un flash lorsque de la navigation entre les pages. Les applications construites avec cette approche de rendu hybride sont aussi appelée “applications transitionnelles”.

Génération de site statique

Vous pouvez utiliser SvelteKit comme un générateur de site statique (SSG) qui pré-construit entièrement votre site avec du rendu statique en utilisant l’adaptateur adapter-static. Vous pouvez aussi utiliser l’option de pré-rendu pour pré-construire uniquement certaines pages, et choisir un autre adaptateur avec lequel vous ferez du rendu dynamique côté serveur pour les autres pages.

Les outils servant uniquement à faire de la génération de site statique peuvent optimiser le processus de pré-rendu de manière plus efficace lorsque vous construisez un très grand nombre de pages. Lorsque vous travaillez sur des sites de grande taille générés de manière statique, vous pouvez réduire votre temps de compilation grâce à la méthode d’Incremental Static Regeneration (ISR) si vous vous utilisez l’adpateur adapter-vercel. Et à la différence d’outils de SSGs dédiés, SvelteKit permet de mélanger efficacement différents types de rendu pour différentes pages.

SPA

Les SPAs (applications sur une seule page) utilisent exclusivement du rendu côté client (CSR). Vous pouvez construire des SPAs avec SvelteKit. Comme pour tous les types d’application SvelteKit, vous pouvez écrire votre backend en SvelteKit ou avec un autre langage ou framework. Si vous construisez une application sans aucun backend ou avec un backend séparé, vous pouvez simplement ignorer les parties de cette documentation traitant des fichiers server.

MPA

SvelteKit n’est généralement pas utilisé pour construire des applications multi-pages au sens traditionnel. Toutefois, SvelteKit vous permet de supprimer tout le code JavaScript d’une page avec csr = false, ce qui déclenchera le rendu des pages suivantes sur le serveur, ou bien vous pouvez utiliser data-sveltekit-reload pour faire le rendu de liens spécifiques sur le serveur.

Backend séparé

Si votre backend est écrit dans un autre langage comme Go, Java, PHP, Ruby, Rust, ou C#, il y a plusieurs manières de déployer votre application. La méthode recommandée serait de déployer votre frontend SvelteKit séparément de votre backend en utilisant l’adaptateur adapter-node ou un adaptateur serverless. Certaines personnes préfèrent ne pas avoir à gérer un deuxième processus et décident de déployer leur application en tant que SPA servie par leur serveur de backend, mais notez tout de même que les SPAs ont un référencement et des performances dégradées.

Si vous utilisez un backend externe, vous pouvez simplement ignorer les parties de cette documentation traitant des fichiers server. Vous pouvez également vous référer à la FÀQ concernant les appels à un backend externe.

Application serverless

Les applications SvelteKit sont simples à lancer sur des plateformes serverless. L’adaptateur zéro config par défaut va automatiquement exécuter votre application sur un certain nombre de plateformes supportées, mais vous pouvez également utiliser les adaptateurs adapter-vercel, adapter-netlify, ou adapter-cloudflare pour avoir accès à des configurations spécifiques par plateforme. Des adaptateurs gérés par la communauté vous permettent de déployer votre application sur quasiment tous les environnements serverless existants. Certains de ces adaptateurs comme adapter-vercel et adapter-netlify offrent une option edge, afin de fournir du rendu sur edge pour améliorer la latence.

Votre propre serveur

Vous pouvez déployer sur votre propre serveur ou VPS en utilisant adapter-node.

Conteneur

Vous pouvez utiliser adapter-node pour exécuter votre application SvelteKit au sein d’un conteneur comme Docker ou LXC.

Librairie

Vous pouvez créer une librairie que d’autres applications Svelte peuvent consommer en utilisant l’add-on SvelteKit @sveltejs/package. Il vous suffit de choisir l’option librairie lorsque vous exécutez sv create.

Application hors-ligne

SvelteKit offre un support complet pour les service workers vous permettant de construire tout types d’applications comme des applications hors-ligne et des PWA (Progressive Web Apps).

Application mobile

Vous pouvez transformer votre SPA SvelteKit en application mobile grâce à Tauri ou Capacitor. Les fonctionnalités mobile comme la caméra, la géolocalisation et les notifications push sont disponibles via des plugins pour les deux plateformes.

Ces plateformes de développement mobile fonctionnent en lançant un serveur web local, puis en servant votre application comme un hôte statique sur votre téléphone. L’option bundleStrategy: 'single' peut vous être utile pour limiter le nombre de requêtes effectuées. Par ex. au moment où ces lignes sont écrites, le serveur local de Capacitor utilise HTTP/1, qui limite le nombre de connexions simultanées.

Application desktop

Vous pouvez transformer une SPA SvelteKit en application desktop grâce à Tauri, wails, ou electron.

Extension de navigateur

Vous pouvez construire des extensions navigateur en utilisant soit adapter-static ou des adaptateurs de la communauté spécialement conçus pour les extensions navigateur.

Appareil embarqué

Grâce à son rendu performant, Svelte peut être exécuté sur les appareils de faible puissance. Les appareils embarqués comme les micro-contrôlleurs et les télévisions peuvent limiter le nombre de connexions simultanées. Pour réduire le nombre de connexions simultanées, l’option bundleStrategy: 'single' peut vous être utile dans cette configuration de déploiement.