Partie 2 : Routage parallèle Next.js pour des expériences de chargement et d’erreur uniques / Blogs / Perficient

Routage parallèle avec chargement :

Imaginez que vous visitez un site Web et que pendant le chargement d’une page, vous voyez une roue qui tourne ou un symbole de chargement. C’est l’état de chargement – ​​cela montre que les choses sont encore en train de se préparer.

Dans Next.js, en utilisant le routage parallèle, chaque page Web peut avoir son propre symbole ou message de chargement unique. Ainsi, lorsque vous passez d’une page à une autre, vous remarquerez peut-être différents symboles ou messages de chargement, chacun vous donnant un indice sur ce qui se passe sur cette page spécifique.

Imaginez que vous visitez un site de commerce électronique créé avec Next.js. Vous décidez d’explorer différentes sections :

1. Chargement de la page d’accueil : Imaginez que vous êtes sur un site Web comme une boutique en ligne. Lorsque vous accédez à la page principale, vous verrez peut-être une icône de panier en rotation. Cela montre que le site reçoit toutes les nouvelles offres et choses à vous montrer.
2. Chargement de la liste des produits : Désormais, lorsque vous cliquez pour regarder les différents produits, vous pouvez voir un symbole différent, comme une loupe en mouvement. Cela signifie que le site recherche spécifiquement des détails sur les choses que vous souhaitez acheter.
3. Chargement de la caisse : Enfin, lorsque vous êtes prêt à acheter et à passer à la caisse, vous verrez peut-être une barre de progression indiquant quelque chose comme « Préparation de votre commande ». Cette barre montre que le site s’assure que tout est configuré pour votre achat.

Chaque transition présente un état de chargement différent, donnant un aperçu de ce qui se passe dans les coulisses de chaque page spécifique.

Comprenons cela avec un exemple :

Routage parallèle avec erreur :

Parfois, les choses ne se passent pas comme prévu. Vous pouvez rencontrer une erreur en essayant d’accéder à une page Web, comme une erreur « 404 Page non trouvée ». Avec le routage parallèle dans Next.js, chaque itinéraire peut gérer ses propres erreurs séparément. Cela signifie que si vous ne trouvez pas une page spécifique, le message d’erreur ou la façon dont elle est gérée peut être différent des autres pages.

Considérez que vous parcourez un blog développé à l’aide de Next.js :

1. Accès aux articles de blog : Vous cliquez sur un lien vers un article de blog et celui-ci se charge de manière transparente.
2. Gestion des erreurs 404 : Cependant, si vous saisissez mal une URL et atterrissez sur une page inexistante, par exemple « exemple.com/page incorrecte », Next.js affiche une page d’erreur personnalisée « 404 Page introuvable » avec un design distinct et des suggestions utiles pour revenir en arrière. .
3. Erreur du serveur: Dans un autre scénario, s’il y a un problème avec le serveur lors du chargement d’un article de blog spécifique en raison de problèmes techniques, Next.js présente un message d’erreur spécifiquement pour cette situation, vous guidant sur ce qui pourrait se produire.

Chaque scénario d’erreur est traité de manière unique, fournissant des messages ou des conseils personnalisés en fonction du problème rencontré.

Vous pouvez appliquer le même processus à la page de la barre latérale, tout comme je l’ai fait avec la page principale.

Comment est-ce que ça aide ?

Dans les scénarios de chargement et d’erreur, le routage parallèle dans Next.js améliore l’expérience utilisateur en proposant des indicateurs de chargement et des messages d’erreur spécifiques à la page. Cette approche garantit que les utilisateurs sont informés de l’état de chaque transition de page, ce qui rend le site Web plus réactif et personnalisé.

En un mot:

Le routage parallèle dans Next.js revient à donner à chaque route ou itinéraire de votre site Web sa propre manière unique de gérer le chargement et les erreurs. Il s’agit de rendre le parcours de navigation sur un site Web plus fluide et plus adapté à chaque page spécifique.

Ainsi, la prochaine fois que vous naviguerez sur le Web et remarquerez différentes animations de chargement ou messages d’erreur sur différentes pages, vous saurez que tout cela est dû au routage parallèle qui améliore l’expérience Web, un itinéraire à la fois !

Les références:

Partie 1 : Démystifier Next.js : explorer la puissance des itinéraires parallèles pour des expériences Web plus fluides