FrontMaster - Apprendre le Front-end Avance

SSR, SSG et ISR

Les differentes strategies de rendu et leurs cas d'usage.

SSR (Server-Side Rendering) : Le HTML est genere a chaque requete sur le serveur. Ideal pour les donnees dynamiques et personnalisees.

SSG (Static Site Generation) : Le HTML est genere au build time. Performances optimales pour le contenu qui change rarement.

ISR (Incremental Static Regeneration) : Combine le meilleur des deux : pages statiques qui se regenerent periodiquement en arriere-plan.

CSR (Client-Side Rendering) : Le rendu se fait entierement dans le navigateur. A eviter pour le SEO et les performances initiales.

Exemple de code

rendering-strategies.tsx

typescript

// SSR - Rendu a chaque requete (Next.js)
// Le composant async dans app/ est SSR par defaut
export default async function DashboardPage() {
  const data = await fetch("https://api.example.com/stats", {
    cache: "no-store" // Force SSR
  });
  return <Dashboard data={data} />;
}

// SSG - Generation au build time
export default async function BlogPage() {
  const posts = await fetch("https://api.example.com/posts", {
    cache: "force-cache" // Cache indefini = SSG
  });
  return <BlogList posts={posts} />;
}

// ISR - Revalidation periodique
export default async function ProductsPage() {
  const products = await fetch("https://api.example.com/products", {
    next: { revalidate: 3600 } // Revalide chaque heure
  });
  return <ProductGrid products={products} />;
}

A retenir

1SSR : rendu dynamique a chaque requete
2SSG : genere au build, performances maximales
3ISR : pages statiques avec revalidation periodique
4Choisir la strategie selon le type de contenu

Exercice pratique

Implementer SSR, SSG et ISR

Ecrivez 3 composants de page Next.js qui illustrent chaque strategie de rendu :

1DashboardPage : SSR - affiche des statistiques temps reel (cache: "no-store")

2AboutPage : SSG - page statique generee au build (cache: "force-cache")

3ProductsPage : ISR - liste de produits revalidee toutes les heures (next: { revalidate: 3600 })

Chaque composant doit :

Etre un composant async

Faire un fetch avec l'option de cache appropriee