Frontend Academy · Leçon

SSG, SSR et ISR

Leçon 3 sur 414 étapes

SSG, SSR et ISR est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Trois stratégies de rendu

Next.js prend en charge trois façons d'effectuer le rendu des pages : SSG (génération statique de site), SSR (rendu côté serveur) et ISR (régénération statique incrémentielle). Chacune présente des compromis différents.

SSG — Génération lors de la compilation

Les pages sont générées sous forme de HTML statique lors de la compilation, puis distribuées depuis un CDN. C'est la diffusion la plus rapide possible. Idéal pour : les pages marketing, les blogs et la documentation.

SSG dans le routeur Pages

Exportez getStaticProps depuis une page. La fonction s'exécute lors de la compilation et fournit des props au composant.

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

SSG dans le routeur App

Par défaut, les composants serveur asynchrones récupèrent les données lors de la compilation. Utilisez generateStaticParams pour les routes dynamiques.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  return <article>{post.body}</article>;
}

SSR — Génération à chaque requête

Les pages sont rendues à chaque requête. Utilisez cette stratégie lorsque le contenu dépend de l'utilisateur ou change trop souvent pour être mis en cache.

SSR dans le routeur Pages

Exportez getServerSideProps.

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

SSR dans le routeur App

Forcez le rendu à chaque requête avec dynamic = 'force-dynamic' ou en lisant les cookies ou les en-têtes, ce qui désactive automatiquement le rendu statique.

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — Le meilleur des deux mondes

ISR : diffusez une page statique, mais régénérez-la en arrière-plan toutes les N secondes. Vous combinez ainsi la rapidité du SSG avec des données assez récentes.

ISR dans le routeur Pages

Ajoutez revalidate à getStaticProps.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

ISR dans le routeur App

Utilisez next: { revalidate: N } dans les options de fetch, ou définissez export const revalidate = N sur une page.

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

Régénération à la demande

Déclenchez manuellement la régénération, par exemple depuis un webhook de CMS, sans attendre la fin de l'intervalle.

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

Choisir la bonne stratégie

Utilisez SSG lorsque les données changent rarement (marketing, documentation, blog). Utilisez ISR lorsque les données sont mises à jour occasionnellement (sites pilotés par un CMS, catalogues de commerce électronique). Utilisez SSR pour le contenu propre à chaque utilisateur (tableaux de bord, pages de compte).

Vérification rapide

Que fait ISR (régénération statique incrémentielle) que le SSG pur ne fait pas ?

Réponds-y dans la leçon interactive

Récapitulatif : SSG, SSR et ISR

SSG : lors de la compilation, le plus rapide, contenu fixe. SSR : à chaque requête, dynamique, plus lent. ISR : SSG + régénération planifiée en arrière-plan — données assez récentes et rapidité. Le routeur Pages utilise getStaticProps/getServerSideProps. Le routeur App utilise des composants serveur asynchrones avec revalidate lors de la récupération ou une constante revalidate au niveau de la page. revalidatePath/Tag permet les mises à jour à la demande.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « SSG, SSR et ISR » est-elle gratuite ?

Oui — le texte complet de « SSG, SSR et ISR » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « SSG, SSR et ISR » ?

Générez des pages statiquement lors de la compilation, rendez-les côté serveur à chaque requête ou revalidez les pages mises en cache selon une planification avec la régénération statique incrémentie… Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « SSG, SSR et ISR » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy