Deux formes de pré-rendu

Next.js propose deux formes de pré-rendu : la génération statique et le rendu côté serveur (SSR). La différence réside dans le moment où le HTML de la page est généré.

• La génération statique est la méthode de pré-rendu qui génère le HTML au moment de la construction. Le HTML pré-rendu est ensuite réutilisé à chaque requête.
• Le rendu côté serveur (SSR) est la méthode de pré-rendu qui génère le HTML à chaque requête.

En mode développement (lorsque vous exécutez npm run dev ou yarn dev), les pages sont pré-rendues à chaque requête. Cela s'applique également à la génération statique pour faciliter le développement. En production, la génération statique se produit une seule fois, au moment de la construction, et pas à chaque requête.

Choix par page

Il est important de noter que Next.js vous permet de choisir quelle forme de pré-rendu utiliser pour chaque page. Vous pouvez créer une application Next.js "hybride" en utilisant la génération statique pour la plupart des pages et le rendu côté serveur (SSR)** pour d'autres.

Quand utiliser la génération statique vs le rendu côté serveur (SSR)**

Nous recommandons d'utiliser la génération statique (avec ou sans données) autant que possible, car votre page peut être construite une fois et servie par un CDN, ce qui la rend beaucoup plus rapide qu'un rendu côté serveur à chaque requête.

Vous pouvez utiliser la génération statique pour de nombreux types de pages, notamment :

• Pages marketing
• Articles de blog
• Listes de produits e-commerce
• Aide et documentation

Demandez-vous : "Puis-je pré-rendre cette page avant la requête d'un utilisateur ?" Si la réponse est oui, alors vous devriez choisir la génération statique.

En revanche, la génération statique n'est pas une bonne idée si vous ne pouvez pas pré-rendre une page avant la requête d'un utilisateur. Peut-être que votre page affiche des données fréquemment mises à jour et que son contenu change à chaque requête.

Dans ce cas, vous pouvez utiliser le rendu côté serveur (SSR). Ce sera plus lent, mais la page pré-rendue sera toujours à jour. Vous pouvez également éviter le pré-rendu et utiliser JavaScript côté client pour remplir les données fréquemment mises à jour.

Nous nous concentrerons sur la génération statique

Dans cette leçon, nous nous concentrerons sur la génération statique. Dans la page suivante, nous parlerons de la génération statique avec et sans données.