Can't disable page caching

[HellYeahOmg]

Hey guys, I'm having a hard time understanding what is wrong here. I made a simple repo: https://github.com/HellYeahOmg/revalidate-test

Main page has a get request for some items, the second page has a form to add items. After submitting the form i expect to see the updated result on the main page.

I added every possible disabling cache option i could, but it still doesnt work unless i fire router.request() or revalidatePath(). Why so?

Anyways, this was the basic question i got after playing with caching. My main issue is https://github.com/HellYeahOmg/revalidate-test/tree/long-async-request

While sending a heavy request from the main page, users can navigate to other pages, and in that case even revalidatePath (or revalidateTags) doesnt help...

"next": "^14.2.5"

[Dupflo]

Try to isolate you POST request and GET request into two file https://github.com/HellYeahOmg/revalidate-test/blob/main/src/app/api/route.js

Because GET are cache by default but once you add POST method, the cache is disabled

Then

import {RevalidateButton} from "@/app/revalidateButton";

export default async function Home() {
  const data = await fetch('http://localhost:3000/api', { next: { tags: ['data'] } }).then(res => res.json())

  return (
    <main>
      <div className={'mb-8'}>
        <p>data list:</p>
        {data.map(item =>
          <div  key={item.id}>
          <p>{item.name}</p><p></p>
        </div>)}
      </div>
      <RevalidateButton></RevalidateButton>
    </main>
  );
}

[Dupflo]

Sorry I miss understand your problem lol but my code can help you to have better performance

Try

export const fetchCache = 'force-no-store'

const data = [ { id: 1, name: 'John Doe'} ]

export async function GET() {
  return Response.json(data)
}

export async function POST(request) {
  const res = await request.json()
  const newId = data[data.length - 1].id + 1
  data.push({id: newId, name: res})

  // await new Promise((resolve) => setTimeout(resolve, 5000))

  return Response.json({status: 'ok'})
}

[HellYeahOmg]

No that's not working and shouldn't be. The problem is that next simply doesn't make any requests when i click on the main page link. The route segment doesn't have anything to do with this.

[icyJoseph]

Hi,

I think the GET function is getting statically optimized: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#opting-out-of-caching

Try with export const dynamic = 'force-dynamic'

[HellYeahOmg]

Hey, nope, not working. As i explained to @Dupflo where's no requests being made in the browser console. I say it's not a route cache problem, more like a client router issue

[icyJoseph]

Aha, then try with: https://nextjs.org/docs/app/api-reference/next-config-js/staleTimes set to zero for both cases

[HellYeahOmg]

Sadly, not helping. Moreover, i'd rather not use any experimental features. Those options modify the whole project, wheres I have a problem with only route.

[HellYeahOmg]

So according to https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
None of those options revalidate client cache:

export const dynamic = 'force-dynamic';
export const revalidate = 0;
const data = await fetch('http://localhost:3000/api', { cache: 'no-store' }).then(res => res.json())

But the second issue with long async fetching in the background is not working, even with revalidate functions

[michaeljacobs-strata]

Facing the same issue and was wondering if you were ever able to fix it or find any sort of solution.

[HellYeahOmg]

Hey! I dont remember the exact solution. I think it was client router cache or smth, they've a section in the docs about it.

[biryusal]

Hello, guys

It seems I know what you're talking about – in NextJS version 14, a "forced" client-side caching was introduced.

Therefore, you probably want to disable the non-server-side caching managed by the export const dynamic = ... prop, but the client-side caching – which happens when you do router.push() (or navigate via Link) to a page you've already visited – and see a page with outdated (likely no longer relevant) data.

This is controlled by another setting, specifically:

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30, // If you want to disable client-side caching you should set it to 0
    },
  },
};

You can read more about it here: https://nextjs.org/blog/next-15-rc#client-router-cache-no-longer-caches-page-components-by-default

@michaeljacobs-strata