Glossaire

Le coeur de SvelteKit fournit un moteur de rendu hautement configurable. Cette section décrit certains des termes utilisés lorsque nous discutons de rendu. Une référence pour définir ces options est fournie dans les sections précédente.

CSR

Le rendu côté client (CSR) est la génération du contenu de la page dans le navigateur web en utilisant JavaScript.

Avec SvelteKit, le rendu côté client sera utilisé par défaut, mais vous pouvez désactiver JavaScript avec l’option de page csr = false.

Edge

Le rendu sur le réseau edge fait référence à effectuer le rendu de l’application sur un réseau de distribution de contenu (CDN) proche de l’utilisateur ou utilisatrice. Le rendu edge permet à la requête et à la réponse de parcourir une plus courte distance, et donc d’améliorer la latence.

Hydratation

Les composants Svelte stockent de l’état et mettent à jour le DOM lorsque cet état change. Lorsqu’il récupère des données lors du SSR, SvelteKit va par défaut stocker ces données et les transmettre au client avec le HTML rendu sur le serveur. Les composants peuvent ensuite être initialisés sur le client avec ces données sans avoir besoin d’appeler les mêmes endpoints d’API de nouveau. Svelte va ensuite vérifier que le DOM est dans l’état attendu et y attacher des gestionnaires d’évènement dans un processus appelée “hydratation”. Une fois que les composants sont complètement hydratés, il peuvent réagir aux changements de leurs propriétés tout comme tout composant Svelte nouvellement créé.

Avec SvelteKit, les pages sont hydratées par défaut, mais vous pouvez désactiver JavaScript avec l’option de page csr = false.

ISR

La régnération statique incrémentatle (ISR) vous permet de générer des pages statiques sur votre site au fur et à mesure que les utilisateurs et utilisatrices requêtent ces pages sans avoir besoin de redéployer. Cette stratégie peut aider à réduire les temps de compilation comparativement aux sites SSG possédant un très grand nombre de pages. Vous pouvez mettre en place l’ISR avec l’adaptateur adapter-vercel.

MPA

Les applications traditionnelles qui font le rendu de chaque page sur le serveur — comme celles écrites dans d’autres langages que JavaScript — sont souvent appelées des applications multi-pages (MPA).

Pré-rendu

Le pré-rendu signifie construire le contenu d’une page au moment de la compilation et garder le HTML ainsi généré pour l’afficher plus tard. Cette approche a les mêmes bénéfices que les applications rendues sur le serveur traditionnelles, mais évite d’avoir à reconstruire la page pour chaque visiteur ou visiteuse, et permet donc de absorber un nombre grandissant de visites presque sans coût. La contrepartie est que le processus de compilation est plus coûteux et le contenu pré-rendu ne peut être mis à jour qu’en recompilant et redéployant une nouvelle version de l’application.

Toutes les pages ne peuvent pas être prérendues. La règle d’or est la suivante : pour qu’un contenu puisse être candidat au pré-rendu, deux personnes lambda visitant ce contenu directement doivent obtenir exactement le même contenu du serveur, et la page ne doit pas contenir d’actions. Notez que vous pouvez toujours pré-rendre du contenu chargé en fonction des paramètres de page tant que toutes les personnes recoivent exactement le même contenu pré-rendu.

Les pages pré-rendues ne sont limitées au contenu staitque. Vous pouvez construire des pages personnalisées si les données spécifiques à l’utilisateur ou utilisatrice sont récupérées et rendues côté client. Cette stratégie va néanmoins apporter avec elles les inconvénients de ne pas faire de SSR sur le contenu personnalisé, comme discuté plus haut.

Avec SvelteKit, vous pouvez contrôler le pré-rendu avec l’option de page prerender et l’option de configuration prerender dans le fichier svelte.config.js.

PWA

Une application web progressive (PWA) est une application construite en utilisant les APIs et technologies web, mais fonctionnant comme une application mobile ou desktop. Les sites servis en tant que PWA peuvent être installés, vous permettant d’ajouter un raccourci vers ces applications sur votre écran d’accueil ou votre menu de démarrage, par exemple. Beaucoup de PWA utilisent des service workers pour permettre des fonctionnalités hors-ligne.

Routing

Par défaut, lorsque vous naviguez vers une nouvelle page (en cliquant sur un lien ou en utilisant les boutons “précédent” et “suivant” du navigateur), SvelteKit avec intercepter la tentative de navigation et la gérer lui-même au lieu de laisser le navigateur envoyer la requête vers la page de destination. SvelteKit va ensuite mettre à jour le contenu affiché sur le client en effectuant le rendu du composant de la nouvelle page, qui peut à son tour faire les appels vers les endpoints d’API nécessaires. Ce processus de mise à jour de la page sur le client en réponse aux tentatives de navigation est appelé “routing côté client”.

Avec SvelteKit, le routing côté client est utilisé par défaut, mais vous pouvez le désactiver avec l’option data-sveltekit-reload.

SPA

Une SPA (Single-page Application) est une application dans laquelle toutes les requêtes vers les serveur chargent un seul et unique fichier HTML qui effectue ensuite le rendu côté client des contenus demandés en fonction de l’URL requêtée. Toutes les navigations sont gérées côté client dans un processus appelé “routing côté client”, chaque page mettant à jour son contenu et les éléments de layout restant en grande majorité inchangés. Les SPA ne fournissent pas de SSR et ont en conséquence de moins bonnes performances et un moins bon référencement. Cependant, certaines applications ne sont pas grandement impactées par ces problématiques, comme par exemple une application orientée business avec des fonctionnalités complexes et n’étant accessible que derrière une authentification, réduisant l’importance du référencement, et dont on sait que les utilisateurs et utilisatrices y accèderont dans un environnement consistant et maîtrisé.

Avec SvelteKit, vous pouvez construire une SPA avec l’adaptateur adapter-static.

SSG

La génération de site statique (SSG) est une terminologie faisant référence à un site où toutes les pages sont pré-rendues. Un bénéfice de pré-rendre intégralement un site est que vous n’avez pas besoin de maintenir ou de payer des serveurs pour exécuter le SSR. Une fois généré, le site peut être servi depuis des CDN, apportant une excellente performante sur le “temps jusqu’au premier octet” (time to first byte). Cette stratégie est souvent appelée “JAMStack”.

Avec SvelteKit, vous pouvez faire de la génération de site statique en utilisant l’adaptateur adapter-static ou en configurant chaque page pour qu’elle soit pré-rendue grâce à l’option de page prerender ou à la configuration prerender du fichier svelte.config.js.

SSR

Le rendu côté serveur (SSR) est la génération du contenu d’une page sur le serveur. Le SSR est la stratégie généralement adoptée pour optimiser le référencement. Bien que certains moteurs de recherche soient capables d’indexer du contenu dynamiquement généré côté client, cela peut prendre plus de temps dans ces situations. Le SSR a également tendance à améliorer les performances perçues et rendent votre application plus accessible aux utilisateurs et utilisatrices si JavaScript n’est pas disponible (ce qui se produit plus souvent qu’on ne le pense).

Avec SvelteKit, les pages sont rendues sur le serveur par défaut. Vous pouvez désactiver le SSR avec l’option de page ssr.