Why I Hate Next.js 13 Caching

The Pros and Cons of Next.js 13 Caching

Next.js is a great framework, but its caching behavior can be frustrating!

Key takeaways

• The downsides of Next.js 13 caching include limited control.
• Next.js 13 aggressively caches data, both on the server and on the client.
• This can lead to stale data, especially when you need to get a fresh random number on every page load.
• There is no way to opt out of the client-side router cache in Next.js.
• There are some workarounds that you can use, but they are not ideal.
• The Vercel team has acknowledged this issue in their article.

The Promise of Next.js 13 Caching

Next.js, a popular framework for building React applications, recently introduced caching capabilities in its version 13.

For people who don’t know what the hell I’m talking about, Caching is simply a technique that stores previously fetched data to improve performance by reducing the need for repeated requests to the server.

Next.js 13 caching aims to enhance the user experience by minimizing data fetching and rendering times.

The Downsides of Next.js 13 Caching

While Next.js 13 caching may seem like a promising feature, it is not without its drawbacks.

One of the drawbacks is that Next.js aggressively caches data, both on the server and on the client. That’s great for performance, But it can also lead to stale data. An example of how this can happen is explained in Josh's latest video:

The code he uses to explain the problem is:

import Link from 'next/link' 
import { FC } from 'react' 

interface pageProps {}

const page: FC<pageProps> = ({}) => {
return <Link href='/'>navigate back</Link>
}

export default page

He created a simple Next.js app that renders a random number. When He navigates away from the page and back, the random number is still the same. This is because the client-side router cache is caching the RSC payload or value.

The Next.js documentation acknowledges this problem, but it doesn’t provide a solution for it yet. There is no way to opt out of the client-side router cache.

We’re about to explore some of the reasons why this problem may have a love-hate relationship with caching:

1. Performance Trade-offs: Caching can improve performance by reducing data fetching and rendering times, it comes at the cost of increased memory usage. Caching large amounts of data can strain server resources and impact overall performance.
2. Cache Invalidation Challenges: Keeping cached data up-to-date can be a challenge. When data changes on the server, Next.js 13 caching may not automatically invalidate the cache, leading to stale or outdated content being served to users.
3. Lack of Fine-grained Caching: Next.js 13 caching operates at the page level, which means that entire pages are cached. This can be problematic for applications with dynamic content where only specific sections of a page need to be updated.
4. Limited Control: Next.js 13 caching operates at a global level, meaning that once data is cached, it is shared across all users.

Alternative Strategies for Data Fetching Optimization

Despite the limitations of Next.js 13 caching, there are some methods that you can employ to optimize data fetching and improve overall performance.

Consider the following approaches:

1. Client-side Caching: Implement client-side caching using libraries like SWR or React Query. To allow for more control over caching and enable efficient data fetching on a per-component basis.
2. Server-side Rendering (SSR): Utilize server-side rendering to fetch data on the server and pre-render pages with the latest data. The SSR will ensure that users receive up-to-date content and also reduce the reliance on client-side caching.
3. Incremental Static Regeneration (ISR): Combine the benefits of static site generation and server-side rendering with ISR. This approach allows for periodic regeneration of static pages while still providing dynamic data when needed.

I hope that helped. If you have any other questions or inquiries, please feel free to share them below, I’m still new to the web development and programming world, so any suggestions for improvement are always welcome.

Feel free to check out my portfolio, buy me a coffee, or shoot me an email at th.dev.design@gmail.com.

If this article was helpful (or if you’re just feeling generous), please click the clap 👏 button below a few times. Your support means the world to us! ⬇⬇