How to Use no-store in fetch with Next.js for Fresh Data

In Next.js, use fetch with the option { cache: 'no-store' } to disable caching and always fetch fresh data. This ensures your data is never cached and is fetched on every request.

Syntax

The fetch function in Next.js accepts a second argument for options. To disable caching, set cache to 'no-store'. This tells Next.js to fetch fresh data every time without using any cache.

• url: The API endpoint or resource URL.
• options: An object with fetch settings.
• cache: 'no-store': Disables caching for this fetch call.

javascript

fetch(url, { cache: 'no-store' })

Example

This example shows a Next.js server component fetching data from an API with cache: 'no-store'. It ensures the data is fresh on every request.

javascript

import React from 'react';

export default async function FreshData() {
  const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
  const data = await res.json();

  return (
    <main>
      <h1>Fresh Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </main>
  );
}

Output

<main>\n  <h1>Fresh Data</h1>\n  <pre>{...json data...}</pre>\n</main>

Common Pitfalls

Common mistakes when using no-store include:

• Not setting cache: 'no-store' in the fetch options, which causes Next.js to cache the response by default.
• Using no-cache instead of no-store, which still allows conditional caching and may not fetch fresh data every time.
• Forgetting that no-store disables all caching, which can increase load times if overused.

javascript

/* Wrong: default caching (may cache data) */
const res1 = await fetch('https://api.example.com/data');

/* Correct: disables caching, always fresh */
const res2 = await fetch('https://api.example.com/data', { cache: 'no-store' });

Quick Reference

Use this cheat sheet to remember fetch cache options in Next.js:

Option	Description
cache: 'default'	Uses Next.js default caching behavior.
cache: 'no-store'	Never caches; fetches fresh data every time.
cache: 'force-cache'	Always uses cached data if available.
cache: 'no-cache'	Revalidates cache but may still use cached data.

Key Takeaways

Use fetch with { cache: 'no-store' } in Next.js to always get fresh data.

Not setting cache disables fresh fetching and may cause stale data.

no-store disables all caching, so use it only when fresh data is critical.

Avoid confusing no-store with no-cache; no-store fully disables caching.

This pattern is useful in server components or API routes for real-time data.