Advertisements

Next.js 16 Caching: From Basics to Production

Advertisements
Stop shipping stale data: Cache Components, revalidation and Router Cache on a real Next.js 16 app
1
1/5
(60) Ratings
54 students
Created by Gleyder Hernandez
Advertisements

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
This course includes:
1.5 total hours on-demand video
0 articles
3 downloadable resources
57 lessons
Full lifetime access
Access on mobile and TV
Certificate of completion
Advertisements

Course content

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
Advertisements
FREE
Advertisements
Advertisements
Free Online Courses with Certificates
Logo
Register New Account