New Cache Components Explained in Depth | Partial Pre-Rendering | use cache, cachelife| Nextjs16

Speed up your nextjs app with Cache Components 🚀 using 'use cache', updateTag, revalidateTag, cacheLife, cacheTag, etc... I will cover: - What are Cache components? - What is Partial Pre-Rendering? - Static Rendering vs. Dynamic Rendering - How Partial Pre-Rendering solves problems with Dynamic APIs (runtime data like cookies(), headers(), etc.) - The difference in caching behavior when not using cache components (everything static) versus using cache components (everything dynamic by default) - How to enable Cache Components in next.config.js - Data fetching in Cache Components (dynamic fetching with Suspense) - Using the 'use cache' directive (on components and functions) - Limitations of 'use cache' (cannot be combined with runtime data like cookies()) - Manual Revalidation (Replacing old data with new fresh data) - Using the cacheTag function - The difference between updateTag and revalidateTag - When to use updateTag (read your own write scenarios) - When to use revalidateTag (slight delay in update is acceptable) - Time-based Revalidation using cacheLife function - The three properties of a cache profile: stale, revalidate, and expire - Visual explanation of the SWR cycle (stale period, revalidate for background refresh, and expire for server-side removal) - The revalidation is only triggered when a request is received on the server - Using the connection function to force a component to be dynamic - Using connection with impure functions like Math.random and new Date() Timestamp: 0:00 Intro 0:40 What are cache components 1:00 Partial Pre-rendering explanation 6:00 Runtime data problem 8:05 Runtime data problem solution 10:20 Fetch data dynamically in cache components 12:30 Cache data fetching with ‘use cache’ in cache components 17:00 Revalidation in ‘ use cache’ 17:40 Cache Tag, updateTag, revalidatetag 22:40 CacheLife 31:25 Use Random numbers in cache components with connection function Contacts: Email: [email protected] Portfolio: https://thatanjan.vercel.app/ Blog: https://cules-coding.vercel.app/ Linkedin: https://linkedin.com/in/thatanjan/ Github: https://github.com/thatanjan/ Twitter: https://twitter.com/thatAnjan Videos you might want to watch: Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: http://youtu.be/T-n0mrssDiw Setup and deploy fullstack application on Vercel and Render: https://youtu.be/ME3tMy5Q2qo Auth0 basics with Next.JS: https://youtu.be/FqxtDabMUEQ Upload images from React and Node: https://youtu.be/hHCabCNLmPk Chakra-UI crash course: https://youtu.be/hJ873mLhmFQ Next auth crash course: https://youtu.be/tgrvKGPmI04 Build a small search engine with MongoDB: https://youtu.be/C6VytdSDNSk Playlists you might like: Next.Js tutorials: https://youtube.com/playlist?list=PLEr-WXao6eSPCSujdESIOcDePkTL91FfQ Build a blog using JAMstack: https://www.youtube.com/watch?v=KYLBb1W1ZBA&list=PLEr-WXao6eSPQzQAlkYpNLfcSm6pTiTpd Quick tricks: https://www.youtube.com/watch?v=RECwLOZdiR4&list=PLEr-WXao6eSPspqYqDd0ISbLdDbBAIPNR Crash course: https://www.youtube.com/watch?v=rSa8sUC8m_4&list=PLEr-WXao6eSNuG2mQyV_48RQoj5p8WM_q How-to videos: https://www.youtube.com/watch?v=T-n0mrssDiw&list=PLEr-WXao6eSOVI5LSBn23tsqCp-pCAwiu Clone Blue Origin Landing Page: https://youtube.com/playlist?list=PLEr-WXao6eSNuEn9uP_BYinHKcukMbX8L Stay safe and good bye.