9
Module 9
Rendu avec Next.js
Rendu statique instantané avec Next.js (SSG)
Le rendu statique instantané, ou SSG (Static Site Generation), est une technique de rendu utilisée par Next.js pour générer des pages HTML statiques au moment de la compilation. Contrairement au SSR (Server-Side Rendering), où les pages sont rendues à la demande à chaque requête, le SSG génère les pages une fois lors du build et les sert comme des fichiers HTML statiques.
Quelques avantages du rendu statique instantané avec Next.js
Bonne performance : Les pages statiques n'ont pas besoin d'être rendues à chaque requête. Cela améliore considérablement les performances de chargement.
SEO : Compte tenu du fait que les pages statiques sont pré-rendues, elles sont facilement indexables par les moteurs de recherche, ce qui améliore le référencement.
Coût réduit : Servir des pages statiques est souvent moins coûteux en termes de ressources serveur par rapport au rendu dynamique.
Quelques Contraintes liées au rendu statique instantané avec Next.js
Temps de build : Le temps de génération des pages augmente proportionnellement au nombre de pages, ce qui peut rallonger les temps de déploiement pour les sites volumineux.
Données statiques : Les données utilisées pour générer les pages sont fixes au moment du build. Si les données changent fréquemment, cela peut nécessiter des rebuilds fréquents pour maintenir le site à jour, ce qui peut être coûteux et peu pratique.
Personnalisation limitée : Les pages statiques ne peuvent pas adapter leur contenu en fonction de l'utilisateur ou d'autres données dynamiques sans recourir à un rendu côté client ou à des solutions de personnalisation après le chargement de la page.
Demo
Pour illustrer le rendu statique instantané avec Next.js, nous allons ajouter du code à notre biblio-app, afin de générer des pages statiques pour chaque produit d'un inventaire, en utilisant les données statiques fournies par un fichier JSON. Pour cela, il faut suivre les étapes suivantes :
Données à utiliser : Télécharger les fichiers suivants et les extraire dans le dossier public de votre application biblio-app.
Ajout du menu Magasin : Pour cela, il faut ajouter les codes suivants aux composants indiqués :
/i18n/en.json
"app.header.menu.lien5": "Store",/i18n/fr.json
"app.header.menu.lien5": "Magasin",/components/MenuNav.jsx
<li><Link href="/magasin"><FormattedMessage id='app.header.menu.lien5'/></Link></li>Créer le dossier magasin : Dans le dossier 'app', créer un dossier nommé 'magasin' et un fichier nommé 'page.jsx' dans ce dossier magasin. Le fichier page.jsx doit avoir le contenu suivant :
/app/magasin/page.jsx
import Image from 'next/image'
import Link from 'next/link'
import inventaire from '@/public/inventaire.json'
export default function Magasin() {
return <>
<h2>Magasin</h2>
<ul>
{inventaire.map((produit) =>
<li key={produit.slug}>
<Image
src={produit.image}
alt={produit.nom}
width={32}
height={32}
/>
<div>{produit.nom}</div>
<Link href={`/magasin/${produit.slug}`}>Plus d'information</Link>
</li>
)}
</ul>
</>
}Créer le dossier sous dossier [produit] : Dans le dossier '/app/magasin', créer un sous dossier nommé '[produit]' et un fichier nommé 'page.jsx' dans ce sous dossier '[produit]'. Ce fichier page.jsx doit avoir le contenu suivant :
/app/magasin/[produit]/page.jsx
// Importation des données de l'inventaire depuis un fichier JSON
import inventaire from '@/public/inventaire.json';
import Image from 'next/image';
import Link from 'next/link';
// Indique que les paramètres sont déterminés de manière statique
export const dynamicParams = false;
// Fonction pour générer des chemins statiques dynamiques au moment du build
// Cette fonction est utilisée par Next.js pour créer les pages statiques pour chaque produit
export function generateStaticParams() {
return inventaire.map(
(produit) => ({ produit: produit.slug }) // Génère un objet avec le slug du produit comme paramètre
);
}
// Composant de page pour afficher les informations d'un produit
// Ce composant reçoit les paramètres dynamiques via les props
export default function Produit({ params }) {
const produitSlug = params.produit; // Récupère le slug du produit à partir des paramètres
const produitFinal = inventaire.find(
(produit) => produit.slug === produitSlug // Trouve le produit correspondant dans l'inventaire en utilisant le slug
);
// Rendu de la page avec les informations du produit
return (
<>
<h2>{produitFinal.nom}</h2>
<Image
src={produitFinal.image}
alt={produitFinal.nom}
width={32}
height={32}
/>
<p>{produitFinal.description}</p>
<Link href="/magasin">Retour au magasin</Link>
</>
);
}Rendu serveur avec Next.js (SSR)
Présentation en classe
Utiliser Next.js comme serveur d'API
Présentation en classe
Exportation d'un projet Next.js
Présentation en classe
Exportation d'un projet Next.js avec images
Présentation en classe