Next.js : L'ultime aide-mémoire du rendu de page

Next.js utilise 4 stratégies de rendu pour construire, livrer et afficher une Application Monopage React (Single Page App) :

• Génération de Sites Statiques (SSG)
• Rendu Côté Serveur (SSR)
• Régénération Statique Incrémentale (ISR)
• Rendu Côté Client (CSR)

Il s'agit de l'aide-mémoire le plus simple et le plus complet pour comprendre rapidement le fonctionnement des stratégies de rendu de pages de Next.js. De plus, cette aide-mémoire unique révèle clairement comment chaque stratégie influence les signaux Core Web Vitals : TTFB, FP, FCP, LCP, TBT et TTI.

Des explications détaillées sont également incluses pour vous aider à choisir la bonne stratégie de rendu de page pour tous les cas d'utilisation et ainsi créer des applications Web rapides que Google et les visiteurs adorent.

P.S. : Merci d'avance d'inclure cette aide-mémoire dans vos articles de blog et de mentionner l'auteur avec un lien vers cette aide-mémoire comme ceci : L'utltime aide-mémoire du rendu de page Next.js.

Bonne lecture !

Mode d'emploi

Les 4 stratégies de rendu de page sont identifiées par leur acronyme respectif (SSG, SSR, ISR et CSR) et disposées en colonnes les unes à côté des autres au milieu de l'infographie.

Complètement à gauche de ces 4 colonnes, vous trouverez les 6 étapes impliquées dans le flux de traitement, depuis l'étape de construction du côté serveur jusqu'au rendu du côté client.

Complètement à droite de ces 4 colonnes, vous trouverez l'endroit où chaque étape se déroule dans le flux de traitement, soit du côté serveur, soit du côté client.

Pour chaque colonne de stratégie, vous verrez où et quand une action de construction (génération de page) est exécutée dans l'étape. Vous verrez également le flux de contenu généré (HTML - React/CSS/JS/Données) au cours de chaque étape.

Signaux Web Essentiels

Les Signaux Web Essentiels (CWV), qui font parties du nouveau facteur de classement de l'expérience de la page de Google, sont identifiés à l'aide de 3 couleurs de fond distinctives, chacune liée à l'impact de la performance sur les CWV.

Une couleur rouge indique des résultats de performance MÉDIOCRES, une couleur orange indique une BONNE performance et une couleur verte indique la MEILLEURE performance.

Démo en ligne

Vous trouverez une démo en ligne avec un exemple de code source sur Github pour tester les performances de chaque stratégie de rendu de page discutée dans l'aide-mémoire :
https://next-page-rendering.vercel.app/

Génération de Sites Statiques (SSG)

La génération de sites statiques (SSG) est la stratégie par défaut proposée par Next.js pour générer des pages web. Next.js recommande cette stratégie pour obtenir les meilleurs résultats en termes de performance, car le contenu statique est distribué plus rapidement en utilisant des CDN qui sont plus proches de vos visiteurs, ce qui conduit à un résultat plus rapide du Time to First Byte (TTFB).

Description des étapes

ÉTAPE 1: Next.js génère une application monopage dans un fichier .html avec les fichiers .css et .js sur le serveur. Cette étape, appelée pré-rendu, n'est effectuée qu'une seule fois au moment de la construction, lorsque vous exécutez la commande next.js BUILD. Cela se fait généralement lorsque vous déployez votre application. C'est au cours de cette étape que tout le codage de la page (HTML) est généré, y compris le code React, le CSS, le JavaScript et, éventuellement, les données si la page utilise une méthode de récupération de données telle que getStaticProps() or getStaticPaths().

ÉTAPE 2: Le client demande l'application monopage au CDN.

ÉTAPE 3: Le client télécharge l'application monopage depuis le CDN..

ÉTAPE 4: Le client analyse et affiche l'application monopage dans le navigateur. C'est à ce moment que les 3 signaux Core Web Vitals (First Paint, First Contentful Paint et Largest Contentful Paint) sont déclenchés. Le HTML de la page ayant été rendu au préalable côté serveur, le navigateur client n'a plus qu'à le charger et à le rendre tel quel. Et comme la page est codée de manière à permettre au navigateur de la rendre avec un minimum de code JavaScript, le blocage du rendu est réduit à son minimum, ce qui se traduit par de bonnes performances.

ÉTAPE 5: Le code React (JavaScript) est exécuté pour (ré)hydrater la page. Même si la page a été préconstruite, cette étape supplémentaire est nécessaire pour permettre à React d'attacher ou d'activer les événements JavaScript à son DOM virtuel et de rendre la page interactive. Comme JavaScript est exécuté à ce stade, le temps de blocage total est affecté par cette étape supplémentaire. De plus, comme le navigateur doit attendre la fin du processus d'hydratation, le Time To Interactive est également affecté.

Voici le code Typescript complet d'une page Web qui utilise la stratégie de Génération de Sites Statiques (SSG) de Next.js :

Rendu Côté Serveur (SSR)

Le Rendu Côté Serveur (SSR) est la deuxième stratégie proposée par Next.js pour générer des pages web. Next.js recommande d'éviter d'utiliser cette stratégie autant que possible pour obtenir de meilleurs résultats en termes de performances, car le contenu statique est construit (pré-rendu) et distribué uniquement à chaque requête. En raison du temps supplémentaire requis par le processus de construction, le signal Time to First Byte (TTFB) est augmenté et conduit à de mauvais résultats.

Description des étapes

ÉTAPE 1: Next.js ne génère pas de page (pré-rendu).

ÉTAPE 2: Le client demande l'application monopage au serveur. Next.js génère (pré-rendu) une application monopage dans un fichier .html avec les .css et .js sur le serveur. C'est au cours de cette étape que tout le codage de la page (HTML) est généré, y compris le code React, le CSS, le JavaScript et éventuellement les données si la page utilise la méthode de récupération de données getServerSideProps().

ÉTAPE 3: Le client télécharge l'application monopage depuis le serveur.

ÉTAPE 4: Identique à l'ÉTAPE 4 de SSG.

ÉTAPE 5: Identique à l'ÉTAPE 5 de SSG.

Voici le code Typescript complet d'une page Web qui utilise la stratégie de Rendu Côté Serveur (SSR) de Next.js :

Régénération Statique Incrémentale (ISR)

La Régénération Statique Incrémentale (ISR) est la troisième stratégie proposée par Next.js pour générer des pages Web. Elle est identique à la génération de sites statiques (SSG), sauf que le contenu peut être reconstruit lorsque la page est mise à jour.

Description des étapes

ÉTAPE 1: Identique à l'ÉTAPE 1 de SSG.

ÉTAPE 2: Le client demande l'application monopage à partir du CDN. De plus, si la page utilise la méthode de récupération de données getStaticProps() combinée à l'option revalidate, la page est régénérée si les données renvoyées par les résultats de la récupération ont été mises à jour. Next.js recommande d'utiliser cette méthode pour un site énorme comportant plus de 1 000 pages. Étant donné que le pré-rendu de chaque page prend du temps, l'utilisation de cette méthode incrémentielle permet de procéder au pré-rendu lors de la première requête seulement et lorsque le contenu de la page est mis à jour.

ÉTAPE 3: Identique à l'ÉTAPE 3 de SSG.

ÉTAPE 4: Identique à l'ÉTAPE 4 de SSG.

ÉTAPE 5: Identique à l'ÉTAPE 5 de SSG.

Voici le code Typescript complet d'une page Web qui utilise la stratégie de Régénération Statique Incrémentale (ISR) de Next.js :

Rendu Côté Client (CSR)

Le Rendu Côté Client (CSR) est la quatrième stratégie proposée par Next.js pour générer des pages Web. Elle identique à la génération de sites statiques (SSG), sauf que des parties du contenu peuvent être construites du côté client.

Description des étapes

ÉTAPE 1: Identique à l'ÉTAPE 1 de SSG, sauf que le contenu (données) n'est pas pré-rendu ni inclus dans le bloc statique. La taille du fichier est donc plus petite, ce qui réduit le temps de téléchargement.

ÉTAPE 2: Identique à l'ÉTAPE 2 de SSG mais sans le contenu (données).

ÉTAPE 3: Identique à l'ÉTAPE 3 de SSG mais sans le contenu (données).

ÉTAPE 4: Identique à l'ÉTAPE 4 de SSG

ÉTAPE 5: Identique à l'ÉTAPE 5 de SSG mais sans le contenu (données).

ÉTAPE 6: Le client va chercher le contenu (données) et React met à jour l'interface utilisateur. Cette méthode est utile, par exemple, lorsque vous souhaitez afficher le squelette d'une page avec un contenu statique, puis injecter progressivement les données dans une page nécessitant un long temps d'attente pour la récupération des données.

Voici le code Typescript complet d'une page Web qui utilise la stratégie de Rendu Côté Client (CSR) de Next.js :