Quand on parle de “server side rendering” (SSR) pour une application React, le framework Next.js développé par Vercel est une référence en la matière. Ces derniers viennent tout juste de sortir la version 10 de Next.js qui apporte quelques avancées bien utiles ! 🚀
Un composant <Image /> pour des images optimisées
Ce nouveau component fourni par Next.js est utilisable comme une balise HTML <img />, mais vient avec un grand nombre de fonctionnalités appréciables :
- Optimisation : les images sont redimensionnées automatiquement lors de la compilation (dans des tailles qui peuvent être définies dans la configuration) et la bonne image sera livrée au navigateur en fonction de la taille dont il a besoin. De plus, les images sont aussi fournies au format Webp afin de fournir une alternative plus légères aux navigateurs compatibles.
- Lazy-loading : les images ne sont chargées que lorsqu’elles doivent être affichées, au scroll de l’utilisateur, ce qui diminue le temps de chargement initial de la page.
- Pour éviter le “Cumulative Layout Shift” (phénomène qui fait “sauter” le contenu d’une page au fur et à mesure que les images apparaissent, voir web.dev/vitals), les blocs d’images sont définis avec une largeur et une hauteur adaptée afin d’utiliser l’espace utile dans la page, même si l’image n’est pas encore chargée. C’est important car cela va bientôt être un critère de mauvais ranking SEO chez Google, selon leurs propres aveux.
- Responsive par défaut : le rapport hauteur / largeur de l’image est conservé automatiquement quand la page est plus petite que la taille de l’image d’origine, qui s’adapte donc.
Le routing internationalisé
Toujours dans l’esprit d’améliorer l’expérience utilisateur, Next.js prend maintenant en charge les URLs “internationalisées”, c’est à dire les URL qui ont un rapport avec la langue de la page visitée.
Outre la détection automatique de la langue grâce au header Accept-Language, il est possible de configurer Next pour qu’il redirige l’utilisateur vers la bonne traduction, grâce à :
- “Subpath routing” : Un paramètre de l’URL (par exemple :
example.com/fr/pour le français) - “Domain routing” : Un domaine dédié à la langue (par exemple :
example.compour l’anglais, etexample.frpour le français)
Le support de React 17
La nouvelle version de React, sortie au mois d’octobre 2020, est maintenant prise en charge par Next.js. Même si cette nouvelle version de React n’apporte pas de changement radical, le nouveau procédé de transformation JSX, permettant de s’affranchir de l’import de React en début de fichier, est donc utilisé par défaut. 🤓
D’autres fonctionnalités plus techniques ont été apportées, que vous pourrez trouver en détail sur la page de blog qui en parle (en anglais) : nextjs.org/blog/next-10
Si vous vous posez des questions sur l’utilité et les avantages du “server side rendering” et de Next.js, ou si vous avez un projet React / Next.js sur lequel vous souhaitez être accompagné, contactez-nous car nous pouvons certainement vous éclairer !