Pré-rendu (Pre-rendering)
Avant d'aborder la récupération de données, parlons de l'un des concepts les plus importants dans Next.js : le pré-rendu.
Par défaut, Next.js effectue un pré-rendu de chaque page. Cela signifie que Next.js génère du HTML pour chaque page à l'avance, plutôt que de tout faire via JavaScript côté client. Le pré-rendu peut améliorer les performances et le SEO.
Chaque HTML généré est associé au code JavaScript minimal nécessaire pour cette page. Lorsqu'une page est chargée par le navigateur, son code JavaScript s'exécute et rend la page entièrement interactive. (Ce processus s'appelle l'hydratation.)
Vérifier que le pré-rendu a lieu
Vous pouvez vérifier que le pré-rendu est effectué en suivant ces étapes :
- Désactivez JavaScript dans votre navigateur. (Voici comment faire dans Chrome).
- Essayez d'accéder à cette page (le résultat final de ce tutoriel).
Vous devriez voir que votre application s'affiche sans JavaScript. C'est parce que Next.js a pré-rendu l'application en HTML statique, vous permettant de voir l'interface sans exécuter JavaScript.
Remarque : Vous pouvez aussi essayer ces étapes sur
localhost, mais le CSS ne sera pas chargé si vous désactivez JavaScript.
Si votre application est une simple application React.js (sans Next.js), il n'y a pas de pré-rendu, donc vous ne pourrez pas voir l'application si vous désactivez JavaScript. Par exemple :
- Activez JavaScript dans votre navigateur et consultez cette page. Il s'agit d'une simple application React.js construite avec Create React App.
- Maintenant, désactivez JavaScript et accédez à la même page à nouveau.
- Vous ne verrez plus l'application - à la place, un message indiquera "Vous devez activer JavaScript pour exécuter cette application." C'est parce que l'application n'est pas pré-rendue en HTML statique.
Résumé : Pré-rendu vs. Pas de pré-rendu
Voici un résumé visuel rapide :
Ensuite, parlons des deux formes de pré-rendu dans Next.js.