Next.js App Router in Depth
LESSON 4.3

Optimistic updates

Learn key techniques and workflows in Next.js App Router in Depth.

8m
intermediate
7,874 students

Overview

Optimistic UI shows the expected result immediately and reconciles when the server answers. The interesting part is what happens when the server disagrees.

In this lesson you will:

  • Render the expected state before the server confirms
  • Roll back cleanly when the action fails
  • Keep optimistic state scoped to the component that owns it

Pro Tip

Use caching and revalidation wisely to ensure your app stays fast and data remains fresh without unnecessary requests.

Resources