Optimisation statique automatique

Next.js détermine automatiquement qu'une page est statique (peut être prérendue) si elle n'a pas besoin de données bloquantes. Cette détermination se fait par l'absence de getServerSideProps et getInitialProps dans la page.

Cette fonctionnalité permet à Next.js de générer des applications hybrides qui contiennent à la fois des pages rendues côté serveur et des pages générées statiquement.

Les pages générées statiquement restent réactives : Next.js hydratera votre application côté client pour lui donner une interactivité complète.

L'un des principaux avantages de cette fonctionnalité est que les pages optimisées ne nécessitent aucun calcul côté serveur et peuvent être instantanément diffusées à l'utilisateur final depuis plusieurs emplacements CDN. Le résultat est une expérience de chargement ultra rapide pour vos utilisateurs.

Fonctionnement

Si getServerSideProps ou getInitialProps est présent dans une page, Next.js passera au rendu de la page à la demande, par requête (ce qui signifie Rendu côté serveur (Server-Side Rendering)).

Si ce n'est pas le cas, Next.js optimisera statiquement votre page automatiquement en prérendant la page en HTML statique.

Pendant le prérendu, l'objet query du routeur sera vide car nous n'avons pas d'informations de query à fournir pendant cette phase. Après l'hydratation, Next.js déclenchera une mise à jour de votre application pour fournir les paramètres de route dans l'objet query.

Les cas où la query sera mise à jour après l'hydratation, déclenchant un autre rendu, sont :

• La page est une route dynamique.
• La page a des valeurs de query dans l'URL.
• Des rewrites sont configurés dans votre next.config.js car ceux-ci peuvent avoir des paramètres qui doivent être analysés et fournis dans la query.

Pour pouvoir distinguer si la query est entièrement mise à jour et prête à l'emploi, vous pouvez utiliser le champ isReady de next/router.

Bon à savoir : Les paramètres ajoutés avec des routes dynamiques à une page utilisant getStaticProps seront toujours disponibles dans l'objet query.

next build générera des fichiers .html pour les pages optimisées statiquement. Par exemple, le résultat pour la page pages/about.js serait :

.next/server/pages/about.html

Et si vous ajoutez getServerSideProps à la page, elle sera alors en JavaScript, comme ceci :

.next/server/pages/about.js

Mises en garde

• Si vous avez une custom App avec getInitialProps, alors cette optimisation sera désactivée pour les pages sans Génération statique (Static Generation).
• Si vous avez un custom Document avec getInitialProps, assurez-vous de vérifier si ctx.req est défini avant de supposer que la page est rendue côté serveur. ctx.req sera undefined pour les pages prérendues.
• Évitez d'utiliser la valeur asPath de next/router dans l'arbre de rendu tant que le champ isReady du routeur n'est pas true. Les pages optimisées statiquement ne connaissent asPath que côté client et non côté serveur, donc l'utiliser comme prop peut entraîner des erreurs de non-correspondance. L'exemple active-class-name montre une façon d'utiliser asPath comme prop.