SvelteKitAdvanced

Options de lien

Dans SvelteKit, les éléments <a> sont utilisés pour naviguer entre les routes de votre application (plutôt que des composant <Link> spécifiques à un framework). Si l’utilisateur ou l’utilisatrice clique sur un lien dont l’attribut href “appartient” à l’application (c-à-d pas un lien menant à un site externe), SvelteKit va alors naviguer vers la nouvelle page en important son code puis en exécutant toute fonction load nécessaire pour récupérer les données de la nouvelle page.

Vous pouvez personnaliser le comportement des liens avec les attributs data-sveltekit-*. Ceux-ci peuvent être appliqués aux éléments <a> eux-mêmes, ou à un élément parent.

Ces options peut également être appliquée à des éléments <form> ayant l’attribut method="GET".

data-sveltekit-preload-data

Avant que le navigateur n’enregistre que l’utilisateur ou l’utilisatrice a cliqué sur un lien, nous pouvons détecter qu’il ou elle a survolé ce lien (sur desktop) ou qu’un évènement touchstart ou mousedown a été déclenché. Dans les deux cas, nous pouvons supposer qu’un évènement click est imminent.

SvelteKit peut utiliser cette information pour anticiper l’import du code concerné et récupérer les données de la page, ce qui nous économise quelques centaines de millisecondes — la différence entre une interface qui a l’air d’être à la traîne et une interface qui semble réagir instantanément.

Nous pouvons contrôler ce comportement avec l’attribut data-sveltekit-preload-data, qui peut avoir l’une de ces deux valeurs :

"hover" signifie que le pré-chargement va démarrer si la souris vient s’arrêter au-dessus d’un lien. Sur mobile, le pré-chargement commence au moment de l’évènement touchstart
"tap" signifie que le pré-chargement va démarrer dès qu’un évènement touchstart ou mousedown est détecté

Le template de projet par défaut possède un attribut data-sveltekit-preload-data="hover" appliqué à l’élément <body> du fichier src/app.html, ce qui implique que tous les liens sont pré-chargés au survol par défaut :

<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
</body>

Parfois, appeler load lorsque quelqu’un survole un lien peut être indésirable, soit parce que des faux positifs sont possibles (un clic ne survient pas après le survol), soit parce que les données se mettent à jour très vite, et tout décalage pourrait entraîner l’affichage de données “périmées”.

Dans ces cas-là, vous pouvez préciser la valeur "tap", qui va impliquer que SvelteKit n’appellera load que lorsque l’utilisateur ou l’utilisatrice appuie ou clique sur un lien :

<a data-sveltekit-preload-data="tap" href="/stonks">
	Récupérer les valeurs actuelles
</a>

Vous pouvez également invoquer programmatiquement preloadData importé depuis $app/navigation.

Les données ne seront jamais préchargées si l’utilisateur ou l’utilisatrice a choisi de réduire l’usage de données, impliquant que navigator.connection.saveData vaut true.

data-sveltekit-preload-code

Même dans les cas où vous ne souhaitez pas pré-charger les données d’un lien, il peut être bénéfique de pré-charger son code. L’attribut data-sveltekit-preload-code fonctionne de manière similaire à l’attribut data-sveltekit-preload-data, à l’exception du fait qu’il peut prendre l’une des quatre valeurs suivantes, classées par “agressivité” descendante :

"eager" signifie que le code des liens sera pré-chargé immédiatement
"viewport" signifie que le code des liens sera pré-chargé lorsque ceux-ci entrent dans le viewport
"hover" — comme plus haut, sauf que seulement le code est préchargé
"tap" — comme plus haut, sauf que seulement le code est préchargé

Notez que viewport et eager s’appliquent seulement aux liens qui sont présents dans le DOM immédiatement après la navigation — si un lien est ajouté plus tard (dans un bloc {#if ...}, par exemple), il ne sera pas préchargé avant d’être déclenché par hover ou tap, et ce afin d’éviter des problèmes de performances découlant de l’observation agressive des changements au sein du DOM.

Puisque le pré-chargement du code est un pré-requis pour précharger les données, cet attribut ne peut avoir d’effet que si il précise une valeur plus “agressive” que tout attribut data-sveltekit-preload-data qui s’appliquerait.

Comme pour data-sveltekit-preload-data, cet attribut sera ignoré si l’utilisateur ou l’utilisatrice a choisi de réduire l’usage de données.

data-sveltekit-reload

Occasionnellement, nous pouvons avoir besoin de dire à SvelteKit de ne pas gérer un lien, mais de laisser le navigateur s’en charger. L’ajout d’un attribut data-sveltekit-reload sur un lien...

<a data-sveltekit-reload href="/path">Chemin</a>

... va provoque une navigation de page complète lors du clic sur le lien.

Les liens possédant un attribut rel="external" recevront le même traitement. De plus, ils seront ignorés lors du pré-rendu.

data-sveltekit-replacestate

Parfois, vous ne souhaitez pas que la navigation crée une nouvelle entrée dans l’historique de session du navigateur. Ajouter l’attribut data-sveltekit-replacestate sur un lien...

<a data-sveltekit-replacestate href="/path">Chemin</a>

... va remplacer l’entrée history courante plutôt que d’en créer une nouvelle avec pushState lors du clic sur le lien.

data-sveltekit-keepfocus

Parfois vous ne souhaitez pas que le focus soit réinitialisé après la navigation. Par exemple, peut–être que avez un formulaire de recherche qui est soumis pendant que l’utilisateur ou utilisatrice est en train de taper, et vous souhaitez garder le focus sur l’élément <input> de texte. Ajouter l’attribut data-sveltekit-keepfocus sur cet élément...

<form data-sveltekit-keepfocus>
	<input type="text" name="query">
</form>

... va forcer l’élément actuellement focalisé à garde le focus après la navigation. En général, il est recommandé d’éviter d’utiliser cet attribut sur des liens, puisque l’élément focalisé serait la balise <a> (et non un élément précédemment focalisé) et les personnes utilisant des lecteurs d’écran et autres technologies d’assistance s’attendent à ce que le focus se déplace après une navigation. Vous devriez également uniquement utiliser cet attribut sur des éléments qui existent toujours après la navigation. Si l’élément n’existe plus, le focus sera perdu, rendant l’expérience confuse pour les personnes utilisant des technologies d’assistance.

data-sveltekit-noscroll

Lorsque vous naviguez vers des liens internes, SvelteKit reproduit le comportement par défaut du navigateur : il va réinitialiser la position du défilement à 0,0 afin que la personne soit tout en haut à gauche de la page (à moins que le lien n’inclue un #hash, auquel cas il va faire défiler la page jusqu’à l’élément dont l’ID correspond).

Dans certains cas, vous pourriez vouloir désactiver ce comportement. Ajouter un attribut data-sveltekit-noscroll sur un lien...

<a href="path" data-sveltekit-noscroll>Chemin</a>

... va empêcher le défilement après le clic sur le lien.

Désactiver les options

Pour désactiver n’importe laquelle de ces options au sein d’un élément où elles auraient été activé, utilisez la valeur "false" :

<div data-sveltekit-preload-data>
	<!-- ces liens seront pré-chargés -->
	<a href="/a">a</a>
	<a href="/b">b</a>
	<a href="/c">c</a>

	<div data-sveltekit-preload-data="false">
		<!-- ces liens ne seront PAS pré-chargés -->
		<a href="/d">d</a>
		<a href="/e">e</a>
		<a href="/f">f</a>
	</div>
</div>

Pour appliquer conditionnellement un attribut à un élément, faites la chose suivante :

<div data-sveltekit-preload-data={condition ? 'hover' : false}>

Modifier cette page sur Github llms.txt

précédent suivant

Erreurs Service workers