Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Next.js 16 Caching: From Basics to Production
New
54 students

Next.js 16 Caching: From Basics to Production

Stop shipping stale data: Cache Components, revalidation and Router Cache on a real Next.js 16 app
Created byGleyder Hernandez
Last updated 11/2026
English
English [Auto],

What you'll learn

  • Turn on Cache Components and decide what is static, cached or dynamic in each route
  • Cache data and components with the use cache directive
  • Control freshness with cacheLife profiles
  • Invalidate precisely with cacheTag, updateTag and revalidateTag
  • Fix stale data after mutations, including navigation on the client
  • Find silent caching bugs like mismatched tags and deprecated calls
  • Keep several server instances in sync with custom cache handlers and Redis
  • Migrate older revalidate and dynamic routes to the new model

Explore related topics

Course content

8 sections • 57 lectures • 1h 28m total length

  • Welcome: from a bug you can't see to production1:58
  • Setup: the starter app1:56
  • What a cache really is1:55
  • Keys: when two questions are the same1:51
  • Lifetimes: how long an answer stays good1:31
  • Stale-while-revalidate, by hand1:42
  • Invalidation: throwing away what you know is wrong1:52
  • The browser is a cache too: HTTP headers1:32
  • Every cache in a Next.js app1:31
  • Quiz: caching from first principles

Requirements

  • Working knowledge of React and the Next.js App Router
  • Node.js 20.9 or newer
  • No paid tools; everything runs locally, with Redis installed for the production section

Description

This course contains the use of artificial intelligence: lectures 51 to 56 use a voice generated by AI from the instructor's own voice, and the slides and visuals were created with AI help. Lectures 1 to 50 and 57 are in the instructor's real voice, and every screen recording is a real session.

Master Next.js 16 caching in about an hour, and stop shipping stale data. You will learn the new caching model on a real app and fix the bugs that make it feel unpredictable.

Caching is the part of Next.js that long courses tend to cover in one lecture, and its bugs fail silently. A user saves a change, goes back, and sees the old data. A call that compiles fine has been deprecated and quietly behaves differently. A tag has a typo, so nothing gets invalidated, and no error appears anywhere.

In this course you start with Northwind Notes, a small multi-page team app that is full of exactly these bugs. Step by step, you will enable Cache Components, cache with the use cache directive, set lifetimes with cacheLife, tag your data with cacheTag, and learn when to choose updateTag and when to choose revalidateTag.

Then we go to production. You will run two instances of the app behind a load balancer and watch one of them keep serving old data after a save. Then you will fix it with custom cache handlers backed by Redis. You will also migrate older code to the new model, and learn a checklist for debugging any caching problem.

You get the starter app with its bugs, the finished solution, and a one-page decision chart for choosing the right caching API.

This course contains the use of artificial intelligence.

Who this course is for:

  • Next.js developers upgrading an app to version 16
  • Developers whose users keep seeing old data after saving
  • Full-stack engineers running Next.js on their own servers, behind a load balancer

Report abuse