Understanding Next.js Cache (Part 5)

If you have built an application using the Next.js App Router, there is a 100% chance you've come across the issue of updating the database but the page still showing the old data. Welcome to the Server-Side Caching paradigm. In the React SPA world, if a user hits refresh, the cache is wiped clean. Next.js flipped the script. It caches data on the Server, and by default, it caches everything, aggressively. To understand why your app is behaving the way it is we'll look at some concepts to understand how the Next.js cache actually works: The Bakery Analogy (API Data vs Pages) Think of your Next.js application as a Bakery. The API Data (The Data Cache) will be our raw ingredients (flour, sugar, eggs) fetched from your database or external APIs. The Pages (The Full Route Cache) will be the fully baked cake sitting in the display window. Next.js doesn't just cache the finished HTML (cake), it also caches the raw JSON (ingredients). This means if 50 users from different location visit your