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

• Github Code
• Next.js StaleTimes