Optimisation statique automatique

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

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

Bon à savoir : 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.

Comment cela fonctionne

Si getServerSideProps ou getInitialProps est présent dans une page, Next.js basculera vers un rendu à 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.

Lors du 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 (dynamic-route).
• 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 (dynamic routes) à une page utilisant getStaticProps seront toujours disponibles dans l'objet query.

next build produira 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 App personnalisée (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 Document personnalisé (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.