next.js: fetch revalidation not working with Nextjs 14.0.0

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/blissful-boyd-mh27hy

To Reproduce

Home Page

import Link from "next/link";

const Home = () => {
  return (
    <div>
      <Link href="/time" className="border-2 p-2 mx-auto">
        Time
      </Link>
    </div>
  );
};

export default Home;

TimePage

const Time = async () => {
  const res = await fetch("http://localhost:3000/api", {
    next: { revalidate: 2 },
  });
  const data = res.json();

  return <div>{data}</div>;
};

export default Time;

GET Route.

import { NextResponse } from "next/server";
export const GET = () => {
  return NextResponse.json(Date.now());
};

export const dynamic = "force-dynamic";

Step 1 : Navigate to Time using link on home page. Step 2 : Navigate back to Home. Step 3 : wait for more than 2 seconds. Step 4 : Again navigate to Time. You see that The Cache is not changed even after completion of 2 seconds which was mentiond in fetch of Time.

https://github.com/vercel/next.js/assets/87939462/0cdda015-7599-415c-bcf4-ad634e1d1063

Current vs. Expected behavior

The cache is not updated which should be updated when mentioned revalidation time has completed.

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:34 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8103
Binaries:
  Node: 19.4.0
  npm: 9.6.7
  Yarn: 1.22.17
  pnpm: N/A
Relevant Packages:
  next: 14.0.0
  eslint-config-next: 14.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

No response

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 25
Comments: 29 (3 by maintainers)

Commits related to this issue

fix waitUntil handling in pipeToNodeResponse (#58744) ### What? Calls to `revalidateTag` when using the data cache would sometimes be ignored. This would result in stale data being displayed even aft... — committed to vercel/next.js by ztanner 7 months ago

Most upvoted comments

RevalidateTag is also not working

+21

teeto on Oct 28, 2023

I don’t understand how the app router is sold as being stable when issues like this exist. This is a major issue.

+18

magicspon on Nov 9, 2023

it also doesn’t work with third party libraries. i followed the example and once build is cached forever

import { cache } from 'react'
 
export const revalidate = 3600 // revalidate the data at most every hour
 
export const getItem = cache(async (id: string) => {
  const item = await db.item.findUnique({ id })
  return item
})

eduardochiaro on Nov 1, 2023

Hmm, on a clean install of next 14.0.2 it seems like tag re-validation still is not working for me once hosted on Vercel. Here’s the demo repo. Unless I have the configuration completely wrong it seems like this is on Vercel’s end.

https://github.com/john-rock/revalidatetag-bug-next14

john-rock on Nov 9, 2023

I confirm that fetch("http://localhost:3000/api", { next: { revalidate: 5 }, }); works with the latest version of Nextjs with is 14.0.2

Deepak22448 on Nov 13, 2023

Not to take this too far off topic but @Galanthus we are Sanity and Next 14.0.2 as well and as an interim solution I’m using a Sanity webhook that listens for publish, modify, delete actions on specific document types to trigger a Vercel deploy hook. Once the deploy completed the updated content shows. It’s not ideal but our build times are only 1.5 - 2 minutes.

Ideally we would use the revalidateTag that Vercel advertises once it’s stable 🙂

john-rock on Nov 13, 2023

Hmm, on a clean install of next 14.0.2 it seems like tag re-validation still is not working for me once hosted on Vercel. Here’s the demo repo. Unless I have the configuration completely wrong it seems like this is on Vercel’s end.

https://github.com/john-rock/revalidatetag-bug-next14

Hey John I just tried your repo and I got it to work on next@14.0.2 by adding export const dynamic = "force-dynamic"; to the route. .

If you check the build logs in Vercel, you’ll see that api/revalidate is generated as an ISR function meaning it’s getting cached. You can verify this by sending an API request to your api/revalidate and seeing that the date returned is always the same. By changing it to dynamic, the date returned is always up to date and the page successfully gets revalidated by tag name.

The docs are a bit confusing as they mention that

You can opt out of caching by: Using the Request object with the GET method

However, the route still gets cached despite having the Request object with the GET method. Perhaps it’s because the request object isn’t being used by the function?

isaackoz on Nov 11, 2023

Hmm, on a clean install of next 14.0.2 it seems like tag re-validation still is not working for me once hosted on Vercel. Here’s the demo repo. Unless I have the configuration completely wrong it seems like this is on Vercel’s end.

https://github.com/john-rock/revalidatetag-bug-next14

I can confirm this. Developed website using Sanity as the CMS and the latest Next 14.0.2. In order to revalidateTag to work, I have to save/publish the same post/page etc in order to see the changes. Vercel logs show no errors for me. Seems like it’s too fast or too slow on revalidate. That said, having multiple tags has one higher fail rate. Hopefully this will be fixed soon.

Galanthus on Nov 9, 2023

sometimes it works… sometimes it doesn’t screams stability!

magicspon on Nov 9, 2023

Hi @ijjk , in my case, it is working fine in version 13.5.6 and after updating the project to version 14.0.0 it is not refreshing the cache. I am using tags when using fetch: const res = await fetch(urlApi, { next: { tags: fetchCacheTags } });

Then when some content in the cms changes i call the api route, which i pass some tags comma separated: let tagsRevalidate = tag.split(","); tagsRevalidate.map(async (tagItem) => { let urlRevalidate = tagItem; if (!urlRevalidate) urlRevalidate = "/"; urlRevalidate = urlRevalidate.trim(); revalidateTag(urlRevalidate); });

After calling the api with the tags, then refreshing the page showed the latest changes. As said earlier, in version 13.5.6 this was working fine, but after updating to 14.0.0 the cache is not updating.

teeto on Nov 7, 2023