Comment optimiser Sitecore Hiadless et Next.js sur Vercel / Blogs / Perficient

Peut-être que vous avez déjà passé le cloud XM, ou peut-être que vous l’évaluez toujours comme réponse à tous vos défis de livraison numérique. Alerte de spoiler: il ne résoudra pas par magie – mais avec la bonne configuration et les optimisations intelligentes, il peut absolument offrir des expériences rapides, évolutives et maintenables.

Si vous utilisez Sitecore sans tête avec Next.js, vous construisez déjà sur une base moderne et flexible. Ajoutez une plate-forme de déploiement comme Vercel, et vous avez une puissance sérieuse à portée de main. Mais déverrouiller ce potentiel nécessite de savoir où affiner – à la fois au niveau de l’application et de la plate-forme.

Rationalisez votre mise en page et vos charges utiles de l’API

Le service de mise en page Sitecore est polyvalent mais peut retourner des charges utiles JSON volumineuses si elle n’est pas contrôlée. Nettoyez vos réponses par:

• Supprimer les espaces réservés et les rendus inutilisés

• Filtrage des champs de suivi ou d’analyse internes

• Configuration du service de mise en page pour adapter la réponse à vos besoins frontaux

Lorsque vous utilisez des API GraphQL (comme Experience Edge ou Search):

Des charges utiles plus petites entraînent une hydratation plus rapide, un temps plus rapide à interactif et une utilisation de la bande passante inférieure – le tout particulièrement précieux pour le public mobile.

Utilisez des webhooks pour une publication plus intelligente

Ne comptez pas sur les reconstructions manuelles ou les caches caches. XM Cloud prend en charge WebHooks sur Publish, qui ouvre la porte à l’automatisation plus intelligente:

• Déclencher la revalidation ISR à la demande pour les pages mises à jour

• Poussez le nouveau contenu vers Edge Config, CDNS ou Index de recherche

• Informer immédiatement les systèmes externes (par exemple, analytique, commerce, personnalisation)

C’est la meilleure façon de garder le contenu frais sans sacrifier les performances ni de reconstruire tout le site.

Choisissez la bonne méthode de rendu: SSR, SSG ou ISR?

Toutes les pages ne doivent pas être dynamiques, et toutes les pages ne doivent pas être statiques. Choisir la bonne stratégie de rendu est essentiel – en particulier dans une application Sitecore sans tête où vous mélangez du contenu marketing avec la personnalisation et les mises à jour en temps réel.

Voici comment décider:

Utilisez SSR (rendu côté serveur) lorsque:

• La page dépend de la session ou de la demande utilisateur (par exemple, personnalisation, pages authentifiées)

• Vous rendez en mode prévisualisation pour les auteurs de contenu

Utilisez SSG (génération de sites statiques) lorsque:

• Le contenu change rarement (par exemple, des pages de destination statiques ou des campagnes)

• Vous voulez des temps de chargement instantanés et aucun coût de serveur

Utilisez ISR (régénération statique incrémentielle) lorsque:

• Le contenu change périodiquement, mais pas par la demande

• Vous voulez combiner la vitesse de statique avec la fraîcheur de la dynamique

Utilisez le suivant / lien avec la prélecture

Si vous utilisez toujours régulièrement <a> Tags ou ne pas penser aux performances de navigation, celle-ci est pour vous. Le next/link Le composant permet le routage rapide, côté client et la pré-échantillon automatique des pages en arrière-plan.

Exemple:

import Link from 'next/link';

<Link href="https://blogs.perficient.com/products" prefetch={true}>About Us</Link>

• Utilisez-le pour tous les liens internes

• Ensemble prefetch={true} Sur les routes de grande priorité

• Vérifiez le comportement dans l’onglet réseau de votre navigateur – recherchez .json Les données de la page sont récupérées à l’avance

Cela peut seul faire en sorte que votre site se sente instantanément plus rapidement aux utilisateurs.

Optimiser les polices avec Suivant / Font

Les applications sans tête sans tête n’incluent pas next/font Par défaut, mais cela vaut la peine d’être intégré. Il vous permet d’auto-héberger des polices de manière optimisée et d’éviter les changements de mise en page.

Exemple:

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

Appliquez des polices à l’échelle mondiale ou par page pour améliorer la cohérence du chargement et éviter Fout (flash de texte non style). Meilleurs polices = meilleure expérience utilisateur.

Nettoyez votre base de code

Les performances ne sont pas seulement une question de logique côté serveur – il s’agit également de garder votre base de code maigre et propre.

Quoi passer en revue:

• Anciens plugins de personnalisation qui ne sont plus utilisés

• Middleware trop permissif ou générique dans sa correspondance

• Logique multisite obsolète si vous vous êtes déjà séparé en plusieurs projets Vercel

• Composants inutilisés ou logique de récupération dans les services publics partagés

Utilisez Vercel Performance Insights pour suivre les routes lentes et repérer les départs à froid.

Activer le calcul de fluide

Fluid Compute permet à Vercel réutiliser le temps d’inactivité sur vos fonctions sans serveur. Cela signifie de meilleures performances et une baisse des coûts – sans aucun changement de code.

Pour l’activer:

Vous pouvez surveiller l’impact sous observabilité → journaux dans votre tableau de bord. C’est une victoire à faible effort.

Être sélectif avec le middleware

Next.js Middleware est puissant mais potentiellement coûteux en termes de performances. Utilisez-le à bon escient:

• Limiter le middleware aux seuls itinéraires essentiels

• Éviter d’utiliser fetch() à l’intérieur du middleware – utilisez la configuration de bord à la place

• Remplacez les plugins multisites par des projets Vercel séparés

• Audit une logique inutilisée ou héritée, en particulier la personnalisation restante

Suivez le comportement du middleware via l’onglet Middleware dans les journaux Vercel.

Gérer les redirectes avec la configuration de bord

Pour les redirectes les plus rapides possibles, gérez-les directement dans Vercel en utilisant la configuration de bord. Cela maintient Sitecore hors du chemin de demande et assure une résolution instantanée au bord.

• Stockez toutes les données de redirection dans la configuration de bord
• Déployer les mises à jour dans le cadre de votre application ou via des outils de configuration externes
• Évitez les récupérations en temps réel de Sitecore pour la logique de redirection

Si vous gérez un grand volume de redirections, envisagez d’utiliser un filtre de floraison pour optimiser l’utilisation de la mémoire. Notez simplement que les filtres Bloom introduisent un petit retard en raison de la vérification de la redirection.

Conclusion

L’optimisation d’une application Sitecore sans tête, en particulier une application déployée sur Vercel, consiste à prendre des dizaines de petites décisions intelligentes qui s’ajoutent à de grandes victoires en performance, à l’évolutivité et au bonheur des développeurs. Qu’il s’agisse de l’élagage de votre sortie de disposition ou de basculer un paramètre dans votre tableau de bord Vercel, chaque mouvement vous rapproche d’un site plus rapide et plus réactif.

XM Cloud n’est pas pré-optimisé – mais c’est en fait une bonne chose. Il vous donne la puissance et la flexibilité pour construire comme vous le souhaitez. Assurez-vous simplement que vous le construisez bien.

Liste de contrôle d’optimisation

Cloud Sitecore & XM

• SERVICE DE LA PARRUE JSON (Supprimer les espaces réservés et les champs inutilisés)

• Utilisez GraphQL efficacement (limiter les requêtes, utilisez des fragments)

• Configurez Publier les webhooks pour le rendu à la demande ou la purge de cache

Stratégie de rendu

Next.js

Vercel

• Activer le calcul de fluide pour une meilleure efficacité sans serveur

• Utilisez le middleware uniquement si nécessaire et évitez de récupérer à l’intérieur

• Utiliser la configuration de bord pour une manipulation de redirection rapide

• Surveiller les journaux et les informations sur les performances pour les routes lentes et les démarrages à froid