SPAs

Vous pouvez transformer n’importe quelle application SvelteKit, peu importe l’adaptateur, en une SPA (Single Page Application) entièrement rendue sur le client en désactivant le SSR au niveau du layout racine :

export const const ssr: falsessr = false;

Dans la plupart des situations ceci n’est pas recommandé : cela pénalise le référencement, tend à dégrader les performances perçues, et rend votre application inaccessibles si JavaScript échoue à se charger ou n’est pas disponible (ce qui se produit plus souvent que vous ne le pensez).

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 en ajoutant une page de secours (ou fallback).

Usage

Installez l’adaptateur avec npm i -D @sveltejs/adapter-static, puis ajoutez-le à votre fichier de configuration svelte.config.js avec les options suivantes :

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

export default {
	
kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			fallback: stringfallback: '200.html' // peut être différent selon l'hébergeur
		})
	}
};

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 index.html ou complètement autre chose — consultez la documentation de votre plateforme.

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.

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>

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 :

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