Next.js
/Advanced
Caching Strategies Overview
Definition
Next.js has a highly aggressive, multi-layered caching system. Understanding how the Request Memoization, Data Cache, Full Route Cache, and Router Cache interact.
Explain Like I'm New
Next.js tries to save work at every step. 1. If you call `fetch('x')` twice in one render, it only fetches once (Memoization). 2. It saves the fetch result permanently across deployments (Data Cache). 3. It saves the final compiled HTML so it never has to build it again (Full Route Cache). 4. The user's browser remembers pages it has visited recently so hitting 'Back' is instant (Router Cache).
Real World Example
Debugging why a user clicks a button to update their profile, but the screen still shows their old name (because the Router Cache in the browser hasn't realized the server data changed).
Common Use Cases
- •Advanced performance architecture
- •Debugging stale data
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- If you call `fetch('https://api/users')` in the `<Navbar>` and call the exact same fetch again in the `<Sidebar>`, does Next.js hit the API twice during the server render?
intermediate
- How do you clear the Client-side Router Cache if you need the user's browser to fetch the absolute freshest HTML from the server?