
Next.js Server Component fetch cache: no-store: the performance trap
You added cache: 'no-store' to a fetch call inside a Server Component because you needed fresh data. Reasonable. Standard. The docs even show it. What they don't tell you is that in the wrong place, that single option can turn one page load into hundreds of server invocations. The context Server Components in Next.js 14 look deceptively simple. They run on the server, they fetch data, they render HTML. No client bundle, no useEffect, no loading states. Clean. But Server Components aren't rendered once and cached like a static page. Depending on where they sit in your component tree and how your routes are configured, they can re-execute on every request, or worse, on every rerender triggered by a parent. Add cache: 'no-store' to a fetch inside one of these components, and you've just told Next.js: skip every layer of caching, always go to the origin, on every single execution. The problematic code This is the pattern that causes the issue: // app/dashboard/page.tsx: a dynamic route asy
Continue reading on Dev.to JavaScript
Opens in a new tab



