Article original : Learn Next.js 15 Caching & Rendering

Apprenez la mise en cache et le rendu avec Next.js 15 en utilisant l'App Router.

Nous venons de publier un cours sur la chaîne YouTube de freeCodeCamp.org pour ceux qui souhaitent une compréhension claire, de niveau ingénierie, de la manière dont Next.js optimise les performances grâce à des stratégies de rendu intelligentes et une mise en cache par couches. Ce cours a été développé par Sumit Saha.

Vous acquerrez une compréhension approfondie des stratégies de rendu de Next.js, notamment la Génération de Sites Statiques (SSG), le Rendu Côté Serveur (SSR), la Régénération Statique Incrémentale (ISR) et le Rendu Côté Client (CSR). Vous explorerez également les subtilités des React Client et Server Components, ainsi que la charge utile React Server Component (RSC). De plus, le cours couvrira diverses stratégies de mise en cache de Next.js, telles que la Request Memoization, le Data Cache, le Full Route Cache et le Router Cache, le tout renforcé par des exemples pratiques pour faciliter l'apprentissage par la pratique.

Voici les sections de ce cours :

  • Intro

  • Qu'est-ce que la mise en cache

  • Stratégies de rendu - SSG SSR ISR CSR

  • React Client & Server Components - Hydratation

  • Charge utile RSC (RSC Payload)

  • Comment fonctionne le rendu dans Next.js

  • Pourquoi des stratégies de mise en cache

  • Découvrir les stratégies de mise en cache

  • Framework 3W & 3H

  • Exemple de Request Memoization

  • Résumé de la Request Memoization avec animation

  • Request Memoization - Questions-réponses 3W & 3H

  • Request Memoization - Points à retenir

  • Exemple de Data Cache

  • Résumé du Data Cache avec animation

  • Data Cache - Questions-réponses 3W & 3H

  • Data Cache - Points à retenir

  • Exemple de Full Route Cache

  • Résumé du Full Route Cache avec animation

  • Full Route Cache - Questions-réponses 3W & 3H

  • Full Route Cache - Points à retenir

  • Exemple de Router Cache

  • Résumé du Router Cache avec schéma

  • Router Cache - Questions-réponses 3W & 3H

  • Parcourir la documentation

  • unstable_cache & use cache

  • Conclusion

Regardez le cours complet sur la chaîne YouTube de freeCodeCamp.org (durée : 2 heures).