Avoid Refetching with Staletimes
In this lesson, we're going to make our app feel lightning fast by avoiding unnecessary refetching when switching between different insights.
Let’s say a user switches from “This Week” to “This Month” — we already fetched the data for “This Month.” So why refetch it?
We don’t always need fresh data, especially if it was just fetched seconds ago. That’s where Next.js’s new staleTimes setting comes in handy.
By default, React Server Components will re-run every single time you navigate to a page or trigger a state change. That means you might be hitting the server unnecessarily, even if the data hasn’t changed.
Let’s fix that.
When to Use This
Use staleTimes when:
- You’re okay showing slightly stale data.
- You want to reduce expensive recomputations.
- You want snappier navigation across similar views.
Resources
The Course is launching in Early Access! 🎉
The Modern Full Stack Next.js Course is launching in Early Access only to the folks on the waitlist by the first week of August.