Les Stratégies de Rendering
Découvrez les 4 stratégies de rendering de Next.js et leurs fonctionnalités avancées à travers des exemples interactifs
Les 4 Stratégies de Rendering
SSG
Static Site Generation
Généré au moment du build, ultra rapide
SSR
Server-Side Rendering
Rendu côté serveur à chaque requête
ISR
Incremental Static Regeneration
Régénération statique incrémentale
CSR
Client-Side Rendering
Rendu côté client avec JavaScript
Fonctionnalités Avancées
Loading States
États de chargement avec loading.js
Suspense
Streaming SSR progressif avec React Suspense
Error Handling
Gestion des erreurs avec error.js et not-found.js
API Externe
Data fetching avec API météo (fetch avancé)
Static Params
generateStaticParams() pour routes dynamiques avec slug = nextjs
Static Params
generateStaticParams() pour routes dynamiques avec slug = react
Static Params
generateStaticParams() pour routes dynamiques avec slug = tailwind
Script Optimization
Chargement des scripts avec next/script
Image Optimization
Images performantes avec next/image
Font Optimization
Polices optimisées avec next/font
Data Fetching
fetch() avancé : SSG, ISR, SSR
Caching System
Les 4 couches de cache Next.js
💡Guide Rapide
SSG pour les pages statiques
Blog, documentation, landing pages
ISR pour le contenu dynamique
E-commerce, actualités, recettes
SSR pour les données utilisateur
Dashboards, profils, données personnalisées
CSR pour l'interactivité
Apps de chat, jeux, éditeurs en temps réel