Next.js Functions: unstable_noStore

In Next.js, the unstable_noStore function is a part of the experimental data fetching capabilities introduced to handle server-side rendering (SSR) and static generation more efficiently. As the name suggests, unstable_noStore is still experimental and subject to change, but it offers some unique advantages for certain use cases.

What is unstable_noStore?

unstable_noStore is a function used in Next.js to control the caching behaviour of server-side rendered pages. It allows developers to specify that a particular server-rendered page or API route should not be cached at all. This can be useful where data is highly dynamic and should not be served from the cache, ensuring that the most up-to-date information is always fetched directly from the source.

Syntax:

import { unstable_noStore as noStore } from 'next/cache';

export default async function Component() {
    noStore();
    const result = await db.query(...);
    // Your component logic
}

Key Points:

• Preferred over dynamic = 'force-dynamic' for per-component control.
• Defers to the cache configuration when used inside unstable_cache.

When to Use unstable_noStore?

• Real-Time Data: When your page or API endpoint serves data that changes frequently, and you need to ensure that users always see the most current data without delay.
• Dynamic Content: For pages that display user-specific content or data that varies frequently, such as dashboards or live feeds.
• Development: During development, when you want to disable caching ensure that changes are immediately visible without needing to clear caches.

How to Use unstable_noStore?

Here’s a step-by-step guide on how to use unstable_noStore in Next.js:

Step 1: Import unstable_noStore

You need to import unstable_noStore from Next.js. This function is available in the next/experimental module.

import { unstable_noStore } from 'next/cache';

Step 2: Apply to Pages or API Routes

You can use unstable_noStore in two main contexts: server-side functions for pages and API routes.

For Server-Side Rendering (SSR) Pages: When fetching data on the server side for a page, you might use unstable_noStore in getServerSideProps to ensure that the page is not cached.

import { unstable_noStore } from 'next/cache';

export async function getServerSideProps(context) {
    const data = await fetchDataFromAPI();
    return {
        props: {
            data
        },
        unstable_noStore: true 
    };
}

const MyPage = ({ data }) => {
    return (
        <div>
            <h1>Data:</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

export default MyPage;

For API Routes: Similarly, you can use unstable_noStore in API routes to prevent caching.

import { unstable_noStore } from 'next/cache';
export async function handler(req, res) {
    const data = await fetchDataFromAPI();
    res.setHeader('Cache-Control', 'no-store');
    res.status(200).json(data);
}
export default handler;

Step 3: Testing and Debugging

Since unstable_noStore is experimental, it's important to thoroughly test your application to ensure that the caching behavior works as expected and that it doesn’t introduce unexpected issues or performance degradation.

Steps To Use Next.js Functions: unstable_noStore

Step 1: Create a New Next.js Application

Use the create-next-app command to bootstrap a new Next.js project:

npx create-next-app@latest my-next-app
cd my-next-app

Folder Structure

Dependencies

 "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.11"
  }

Example: Create a server component using unstable_noStore to opt out of caching

//src/app/page.js

import { unstable_noStore as noStore } from 'next/cache';

export default async function HomePage() {
    noStore();

    const result = await fetchDataFromDatabase();

    return (
        <main>
            <h1>Next.js with unstable_noStore</h1>
            <pre>{JSON.stringify(result, null, 2)}</pre>
        </main>
    );
}

async function fetchDataFromDatabase() {
    return { message: 'Data fetched without caching' };
}

To strat the application run the following command.

npm run dev

Output