SvelteKitCompiler et déployer

SPAs

Vous pouvez transformer une application SvelteKit en une SPA (Single Page Application) entièrement rendue sur le client en définissant une page de fallback. Cette page sera servie pour toute URL ne pouvant pas être servie par d’autres moyens, comme par exemple l’utilisation d’une page pré-rendue.

Le mode SPA a un impact négatif significatif sur les performances en forçant plusieurs aller-retours réseau (pour le document HTML vide, puis pour le code JavaScript, et enfin pour toute donnée nécessaire à la page) avant que le contenu puisse être affiché. À moins que vous ne serviez votre application depuis un serveur local (par ex. une application mobile qui embarque une SPA servie localement) cette stratégie va retarder le démarrage de l’application, particulièrement si l’on considère la latence des appareils mobiles. Ce mode détériore également le référencement en provoquant le déclassement dû aux performances (les SPA ont plus de chances de ne pas satisfaire les métriques Core Web Vitals), en excluant les moteurs de recherche qui n’exécutent pas JavaScript, et en rendant votre application inaccessible aux personnes si JavaScript échoue à s’exécuter ou est désactivé (ce qui se produit plus souvent que vous ne le pensez).

Vous pouvez éviter ces inconvénients en pré-rendant autant de pages que possible lorsque vous utilisez le mode SPA (particulièrement votre page d’accueil). Si vous pouvez pré-rendre toutes vos pages, vous pouvez alors simplement utiliser la génération de site statique plutôt qu’une SPA. Autrement, vous devriez sérieusement envisager d’utiliser un adaptateur qui supporte le rendu côté serveur. SvelteKit supporte officiellement des adaptateurs pour différents hébergeurs proposant des offres gratuites généreuses.

Usage

D’abord, désactivez le SSR pour les pages que vous ne voulez pas pré-rendre. Ces pages seront servies via la page de fallback. Par ex. pour servir par défaut toutes vos pages via la page de fallback, vous pouvez mettre à jour le layout racine comme montré ci-dessous. Vous devriez réactiver le pré-rendu individuel de pages et de dossiers lorsque c’est possible.

Si vous n’avez aucune logique purement serveur (c-à-d des fichiers +page.server.js, +layout.server.js ou +server.js), vous pouvez utiliser l’adaptateur adapter-static pour créer votre SPA. Installez adapter-static avec npm i -D @sveltejs/adapter-static et ajoutez-le à votre fichier svelte.config.js avec l’option fallback:

svelte.config

import import adapteradapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const const config: {
    kit: {
        adapter: any;
    };
}@type{import('@sveltejs/kit').Config}config = {
	kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			fallback: stringfallback: '200.html' // peut être différent selon l'hébergeur
		})
	}
};

export default const config: {
    kit: {
        adapter: any;
    };
}@type{import('@sveltejs/kit').Config}config;

La page fallback est une page HTML créée par SvelteKit à partir de votre gabarit de page (par ex. app.html) qui charge votre application et navigue vers la route appropriée. Par exemple Surge, un hébergeur de sites statiques, vous permet d’ajouter un fichier 200.html permettant de gérer toute requête ne correspondant pas aux assets statiques ni aux pages pré-rendues.

Sur certains hébergeurs, ce fichier peut être complètement autre chose — consultez la documentation de votre plateforme. Nous recommandons d’éviter index.html lorsque c’est possible, car ce nom pourrait rentrer en conflit avec des pages pré-rendues.

Notez que la page de secours (fallback) va toujours contenir des chemins d’assets absolus (c-à-d commençant par / plutôt que par .) peu importe la valeur de paths.relative, puisque cette page est utilisée pour répondre aux requêtes vers des chemins arbitraires.

Pré-rendre des pages individuelles

Si vous souhaitez que certaines pages soient pré-rendues, vous pouvez ré-activer l’option ssr en plus de prerender uniquement pour ces parties de votre application :

src/routes/my-prerendered-page/+page

export const const prerender: trueprerender = true;
export const const ssr: truessr = true;

Vous n’aurez pas besoin d’un serveur Node ou même d’un serveur capable d’exécuter JavaScript pour déployer cette page. SvelteKit ne va rendre votre page que lors de la compilation de votre application dans le but de créer une page .html pouvant être rendue par n’importe quel hébergeur web statique.

Apache

Pour exécuter une SPA sur Apache, vous devriez ajouter un fichier static/.htaccess pour diriger les requêtes vers la page de secours :

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	RewriteRule ^200\.html$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /200.html [L]
</IfModule>

Modifier cette page sur Github llms.txt

précédent suivant

Génération de site statique Cloudflare