Revalidation not working in deployment mode

[obtusei]

Link to the code that reproduces this issue

https://github.com/obtusei/nextjs-test

To Reproduce

My Code:

async function getPosts() {
  try {
    const getData = await fetch(`${process.env.BACKEND_URL}/wp-json/wp/v2/posts`, {
      next: {
        revalidate: 20,
      },
    });

    const data = await getData.json();
    return data;
  } catch (err) {
    console.log(err);
  }
}

export default async function Home() {
  const posts = await getPosts();
  return (
    <main className="p-10">
      <h1 className="text-4xl">Posts</h1>
      <br />
      <div className="flex flex-col gap-4">
        {posts.map((post: any) => {
          return (
            <Link
              href={`/posts/${post.id}`}
              key={post.id}
              className="border-2 border-gray-500 p-4 rounded-xl"
            >
              <h2 className="text-xl font-semibold">{post.title.rendered}</h2>
              <div
                className="text-gray-300"
                dangerouslySetInnerHTML={{ __html: post.content.rendered }}
              />
            </Link>
          );
        })}
      </div>
    </main>
  );
}

Current vs. Expected behavior

Expected Behavior:
Posts to be revalidated every 10 seconds in deployment. If the posts are updated in backend, they should also be updated in nextjs application after 10 seconds.

Observed behavior
The posts are updated in backend, they aren't being updated in nextjs application after 10 seconds. (In Deployment/Production Mode)

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Thu Jun  8 23:57:12 PDT 2023; root:xnu-8020.240.18.701.6~1/RELEASE_X86_64
Binaries:
  Node: 18.16.0
  npm: 9.6.5
  Yarn: 1.22.19
  pnpm: 8.6.5
Relevant Packages:
  next: 13.5.3
  eslint-config-next: 13.5.3
  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)

Data fetching (gS(S)P, getInitialProps)

Additional context

No response

[MAhmedSid]

I am also getting the same issue and I am using next v13.4.19 . It is literally a headache that I have tried every single solution for that even I have used no-store instead of doing cache. It also stucks. Data fetching is still an issue. Next js team should work on that ASAP as it is disturbing many production sites.

[sferdeveloper]

We have the same issue next: 13.5.4 . I thought we were doing something wrong 😑

[sferdeveloper]

Since this happens to us in a project that is really important, we had to find out a solution -- not the best solution, but it does the job

All we did is change the request method to PUT request , here is , how I did,:

This is the function that fetches data and runs in the server:

const getAvailableTasks = async () => {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}api/tasks`, {
      cache: "no-store",
      method: "PUT", // change GET to PUT
      next: { revalidate: 0 },
    });

    if (!res.ok) {
      throw new Error("Failed to fetch topics");
    }
    const availableTasks = await res.json();
    return availableTasks;
  } catch (error) {
    console.log("Error loading topics: ", error);
  }
};

And this the controller that fetch the data, must be PUT too

connectDB();

// ? GET all available tasks

export async function PUT(request: NextRequest) {
  try {
    // TODO : find user county => get tasks for them ...

    // const userID = await getDataFromToken(request);

    // const user = await User.findOne({_id: userId}).select("-password");

    const availableTasks = await Task.find();

    return NextResponse.json(availableTasks);
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 400 });
  }
}

This is our temporary solution until NextJS team fix the bug.

@obtusei @MAhmedSid

[sferdeveloper]

I have got solution by removing all redirect domains to the main domain in vercel project domain setting.

Wow, please give more details on how to do it, I'm dealing with this issue 3 days now! Where I can fin that?

Thanks, MAhmed!

[MAhmedSid]

If you are using turbo then make cache false in turbo.json. And other thing is try purging cache of project in settings of project on vercel. And check docs of cache they recently updated.

[sferdeveloper]

I think it's not Vercel problem, if you try to build locally and run yarn start it will be statically generated.
We just found a solution : we send httpOnly cookie with the GET request and that fixed the issue 😃

GET request with httpOnly cookie => extract userID from the cookie => send them data

Finally 😴

[MAhmedSid]

So will that also work with time based revalidation. Because sometimes its also not gotta work.

[phil221]

Also seeing @obtusei's exact issue using headless WP, would greatly appreciate updates. I am eventually seeing the in-app updates for both WP post creation and post updates, but they take anywhere from 5 minutes to 30 to actually propagate. Apparently the default WP REST API cache expiry settings can sometimes affect this, but in my case I can see the updates immediately after publishing when I fetch via a client service like Insomnia - so the WP cache seems to not be a factor here.