How to disable Next.js cache in server-side component

Question

I am facing an issue. I am using Next.js SSR (Server-Side Rendering), and when I run 'npm run dev,' everything works fine. However, when I build Next.js and run 'npm start,' the API response is cached by Next.js. So, when I refresh the page, the response remains exactly the same. I want to receive new data from the API every time I refresh the page.

code

// app.tsx
import React from 'react';
import Joke from '../utils/jokeapi';

const Home = async () => {
  const data = await Joke();
  console.log('data', data);

  return (
    <div className="p-5 pt-10">
      <h1 className="text-5xl p-5">Welcome Jokes HUB</h1>
      {data.map((joke: Joke, index: number) => {
        return (
          <div key={index} className="p-5">
            <h1 className="text-3xl">{joke.joke}</h1>
          </div>
        );
      })}
    </div>
  );
};

export default Home;

//jokeapi.tsx

import axios from 'axios';

const Joke = async () => {
  const Backend = process.env.SERVER || 'http://localhost:3001';
  console.log('backend', Backend);
  const Response = await axios.get(`${Backend}/api/jokes`);
  const jokeData = Response.data;
  return jokeData;
};

export default Joke;

I used the 'cache: no-cache' on my Axios, but it's not working. I checked that 'cache: no-cache' with the Fetch API without Axios, and the same thing is not working."

Fedor · Accepted Answer · 2024-12-04 08:23:45Z

2

I’m confident this solution will work for you as well!

You can just use it for the server components.

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

noStore();

Docs: https://nextjs.org/docs/14/app/api-reference/functions/unstable_noStore

edited Dec 4, 2024 at 8:23

Fedor

24.7k45 gold badges59 silver badges187 bronze badges

answered Dec 3, 2024 at 7:30

atif1169

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

beterthanlife Oct 23 at 20:36

This was just what I needed to make my component recognise changes in my dataset.

Nico63 · Accepted Answer · 2024-01-26 20:27:56Z

0

I came across your question in my search while I'm also having some hard times with the Next data caching, that can be really confusing sometimes.

Did you try to use these ?

export const dynamic = 'force-dynamic' doc : https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic

or export const revalidate: 0 doc : https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate

I found this in my search too : https://nextjs.org/docs/app/api-reference/functions/unstable_noStore

answered Jan 26, 2024 at 20:27

Nico63

11 bronze badge

Comments

Wali Ullah · Accepted Answer · 2024-11-28 20:11:19Z

0

I encountered the same issue in two of my projects using Next.js 14 App Router and Axios for API integration. Fortunately, the problem was resolved by using the noStore() function.

You have to just add one function in your server component or the layout file.

You can refer to the documentation here: https://nextjs.org/docs/app/api-reference/functions/unstable_noStore

I’m confident this solution will work for you as well!

answered Nov 28, 2024 at 20:11

Wali Ullah

12 bronze badges

Comments

iwasrobbed · Accepted Answer · 2024-12-09 16:39:27Z

0

FWIW for my situation, turns out Next.js was incorrectly rendering my page as a static route

Next.js 15 shows a little static icon now for this scenario https://nextjs.org/blog/next-15#static-route-indicator

Forcing the page to be dynamic again fixed everything

answered Dec 9, 2024 at 16:39

iwasrobbed

46.8k21 gold badges152 silver badges195 bronze badges

Comments

maximeSurmontSO · Accepted Answer · 2025-01-24 09:14:40Z

0

I simply added this code at the top of my RootLayout component (I have a super simple app, so maybe using it in your RootLayout is overkill in your case):

await connection();

This replaces noStore(); (as seen in other comments).

See more : https://nextjs.org/docs/app/api-reference/functions/connection

answered Jan 24 at 9:14

maximeSurmontSO

3491 gold badge5 silver badges16 bronze badges

Comments

Fred A · Accepted Answer · 2025-03-15 10:42:43Z

Had this issue before and i know all this is part of Next way to improve app performance but sometimes you just dont need that feature on certain pages. The only way that works for me (after trying all other methods described here by others) is to add a query parameter to the page URL that changes everytime to make the URL unique.

export const generateStamp = () => {
  return Math.round(new Date().getTime() / 1000);
};

when going to the said page

<Link href={`/post/edit?postId=${post.id}&t=${generateStamp()}`} className="font-bold text-black hover:text-[#00645c] text-[1.13rem] cursor-pointer overflow-hidden break-words line-clamp-1">{post?.title}</Link>

Where the base page is a server component that calls several server actions to get data on server side before fully rendering on the client side. This way, the page will always fetch fresh data instead of getting cached data everytime entering the page since the time parameter on the URL uniquely makes the page different, causing Next to call fetch again when entering the page.

You can do the same thing from within the page, since you want the API to be called everytime you refresh the page. As long as the timestamp is unique, Next should call the API instead of returning cached data.

Collectives™ on Stack Overflow

How to disable Next.js cache in server-side component

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related