Back to articles
Next.js Server Component fetch cache: no-store: the performance trap

Next.js Server Component fetch cache: no-store: the performance trap

via Dev.to JavaScriptVictor Caña

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

Read Full Article
2 views

Related Articles