Next JS s'améliore et facilite la collaboration

Rayed Benbrahim

Publié le 16 juin 2021

Rubriques

Découvre ces artices

Depuis que j'ai découvert Next.js dans les résultats du classement State of JS de 2019, ce framework est devenu mon outil de prédilection pour le développement Frontend.

Mardi 15 Juin, Vercel, la société créatrice du framework Next.js, a annoncé l'arrivée de la version 11 de Next.js.

Sans plus attendre, voici ce que cette mise à jour embarque:

Conformance: l'outil de Google à destination des frameworks frontend

Avec l'expérience qu'a cumulée Google dans le développement d'application à très fort volume de trafic, tels que Search, Maps, Photos et bien d'autres, il était important d'encadrer le code produit par les développeurs afin que chaque ajout ne vienne pas pénaliser l'expérience utilisateur.

C'est pourquoi ils ont créé la méthodologie Conformance avant de la publier en open source.

Conformance assure que les développeurs maintiennent leur code suivant des standards afin de pouvoir développer simultanément et plus rapidement de nouvelles fonctionnalités.

Conformance se base sur 3 valeurs qui sont:

  • "Strong Defaults" pour les polices, le CSS, le code JS et les images. Par exemple, Conformance facilite la capacité à définir le CSS critique et affecter une priorité aux images importantes afin d'aider les navigateurs à savoir quel partie charger en premier, le tout dans le but de fournir une bonne expérience utilisateur.
  • "Actionable rules" a pour but de repousser tout un tas de décisions plus ou moins triviales qu'un développeur doit faire au moment où il code en proposant des composants ayant des comportements par défaut.
  • "Authoring times" est le principe selon lequel le meilleur moment pour intervenir sur un problème dans le code est au moment où celui-ci est écrit. Ce principe incite les frameworks à faire appliquer des règles spécifiques dans un linter.

Gain de performances au lancement

Pour Guillermo Rauch, fondateur de Next.js et Vercel, l'expérience développeur (DX) est un élément très important. C'est pourquoi ils ont travaillé à l'amélioration des performances de Next.js, aussi bien au rafraichissement des pages lorsque celles-ci sont modifiées, qu'au lancement d'une nouvelle application Next.js.

Depuis la version 10, Next.js a vu un temps de lancement amélioré de 24% et un temps de traitement des changements au code réduit de 40%.

Introduction de la balise Script

Jusqu'ici, Next.JS ne gérait pas l'introduciton des balises <script> dans ses pages. Il fallait alors utiliser les balises html classiques en utilisant les propriétés React telles que dangerouslySetInnerHTML.

Avec la version 11, Next.js permet d'importer un script à une page ou à un composant et de définir une strategie de chargement. Il existe 3 stratégies au lancement de la version 11:

  • beforeInteractive: qui permet de charger les scripts critiques au bon fonctionnement de votre site, notamment les scripts d'authentification, de détection de bot, de gestion de consentement. Ils sont injectés dans le HTML initial depuis le serveur.
  • afterInteractive: qui est la stratégie par défaut (souvenez-vous les règles de Conformance), qui chargera ces scripts après que la page soit devenue interactive. Vous utiliserez cette stratégie pour les scripts d'analytics ou de tag managers.
  • lazyOnload: sont destinés aux scripts qui n'ont pas un timing critique et qui peuvent être chargés une fois que les scripts déclarés en afterInteractive ne soit chargés. C'est le cas pour les produits de chat, de support client, etc.

import Script from 'next/script'

<Script
  src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

Il est également possible d'exécuter du code une fois qu'un script spécifique a terminé son chargement:

<Script
  src={url} // consent mangagement
  strategy="beforeInteractive"
  onLoad={() => {
    // If loaded successfully, then you can load other scripts in sequence
  }}
/>

Avec l'implémentation de cette balise next/script, le fonctionnement de la balise native <script> change de comportement. Next.js a modifié le chargement par défaut des scripts à defer car ces derniers avaient tendance à entrer en concurrence avec des ressources essentielles au bon chargement de la page tels que du CSS, des images ou une police.

En respectant les principes de Conformance, l'équipe de Next.js propose aux développeurs une stratégie de chargement par défaut qui est à afterInteractive, tout en laissant la possibilité de prioriser en beforeInteractive si le besoin se fait sentir.

Amélioration de la balise Image

Dans cette nouvelle amélioration, la balise Image de Next.js peut définir automatiquement la height et le width de votre image pour les images statiques dans votre repository.

import Image from 'next/image'
import author from '../public/me.png'

export default function Home() {
  return (
    // When importing the image as the source, you
    // don't need to define `width` and `height`.
    <Image src={author} alt="Picture of the author" />
  )
}

Il rend également possible le fait de servir une image floutée au chargement afin d'améliorer l'expérience utilisateur et les performances évaluées par Google PageSpeed.

<Image src={author} alt="Picture of the author" placeholder="blur" />

Si vous utilisez des images hébergées en ligne, via votre CMS ou un hébergeur d'images avec CDN tel que cloudinary, vous pouvez également utiliser l'effet de floutage proposé par celui-ci en ajoutant la propriété blurDataURL.

Webpack 5 par défaut

Webpack 5 a été ajouté depuis la version 10.2 en option configurable sur le fichier next.config.js. Avec la version 11, NextJS fait de Webpack 5 son module bundler par défaut.

De la collaboration avec Next Live

Enfin, toujours dans un souci d'améliorer l'expérience développeur, Next.js a ajouté la fonction live.

Grâce à l'utilisation de technologies modernes tels que les Service Workers et WebAssembly, NextJS est capable de faire fonctionner tout le processus de développement dans un navigateur, rendant possible la collaboration instantanée entre développeurs et autres acteurs du projet et sans nécessiter un build à chaque fois qu'une modification est effectuée.

Derniers articles

Le Sharding est un des atouts les plus intéressant de MongoDB lorsqu'il s'agit de déployer une application comportant un large jeu de données. Dans cetans cet article, découvrez comment tirer toute la valeur du Sharding dans un cluster MongoDB.

Couchbase est une technologie de base de données NoSQL, orientée document, qui propose de très hauts niveaux de performances et de disponibilité. Découvrez l'alternative à MongoDB

Avec l'arrivée de sa version 12 et l'implémentation des Middlewares, NextJS veut devenir le framework frontend de référence pour la conception de site web de cette décennie.

Le dernier né des bases de données AWS, MemoryDB for Redis allie la souplesse et rapidité de Redis avec une sauvegarde résiliente, chose qui aujourd'hui n'existait que pour la solution Redis Entreprise. Avec MemoryDB for Redis, AWS entend bien prendre une part du gâteau de Redis Labs.

MongoDB a mis en service la version 5.0 de sa base de données NoSQL. Dans cet article, découvrez les nouveautés qu'apporte cette release ainsi que leurs explications.

Dans l'univers du Big Data et du Cloud, Snowflake a vu le jour en étant le premier fournisseur d'un Data Warehouse sur le cloud 100% scalable. Dans cet article, découvrez ce qu'est un Data Warehouse et en quoi Snowflake est une solution innovante pour les entreprises.

Les Jobs