Stale Data; revalidate does not work.

[naishe]

Summary

UPDATE: See the demo repo here: https://github.com/naishe/stale-data You can emulate the issue in dev mode. However, I am seeing EXACT same issue on my application in dev as well as prod (Vercel) deployments. To simplify, I haven't used auth or databases just a JSON file.

Visual user? See this clip I created. The top window shows the what the end user sees, and the the bottom shows the changes in json file which works as the database. You can see they are out of sync most of the times.

Screen.Recording.2023-06-22.at.4.22.40.PM.mov

The Setup

I have a page that displays user details (name, phone number etc) say, /user/details/[id]. It has an edit buton, that takes you to another page, /user/edit/[id], that has a form client component.

Data retrieval

In /user/details/[id], I just pull the data from the database and render a card with the values and give a <Link ... to /user/edit/${userId}. On this page, I pull the user data again from the db, and pass it off to the form which is a client component.

The issue

The user goes to the details page sees the data in the database. Good. :)
The user clicks edit, the form gets populated with right data. OK.
The user changes values, and the form gets submitted to /api/users/update using fetch, data gets saved, client gets 200.
On receiving 200, I redirect the user to /user/details/${userId} using router.push from next/navigation package (Notice this is client component, I cannot use router from next/router).
I see STALE DATA on the details page.
I click edit button, form loads, and
I see STALE DATA in the form.

I definitely not want to const revalidate = 0; or const revalidate = 1; on those pages, because most of the time they wouldn't want to edit the data. BUT, for experimentation, I set these values on both the pages. I wasn't sure if 0 means never validate, so I tested with 0 and 1 both, waited long enough in before clicking save to ensure the cache is expired (apparently not expired). I deployed the code on Vercel production mode. Still, I see stale data.

What am I doing wrong?

Thanks for reading. I am open to any ideas at this moment.

Additional information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64
    Binaries:
      Node: 20.2.0
      npm: 9.6.6
      Yarn: N/A
      pnpm: 8.5.1
    Relevant packages:
      next: 13.4.0
      eslint-config-next: 13.4.0
      react: 18.2.0
      react-dom: 18.2.0

### Example

_No response_

[nabildroid]

Same problem, seached everything and couldn't find a fix. I wonder why no one is talking about this. Revalidation is not working
RevalidatePath doesn't work
RevalidateTag doesn't work either!

[naishe]

Precisely. The user always sees the data in the database. However, it would be nice (not important, at the moment), if

• the client side routing via <Link... still works and we don't have to use <a ... for redirection.
• router.push(...) still works and I don't do window.location manipulations
• The cache is not invalidated unless the data is edited. That means if I see detail page, then click edit to go to the edit page, but click on breadcrumb to go back to detail page instead of clicking submit, it does not pull from the server again.

But none of these are important for me at the moment as long as I see fresh data all the time. :)

[naishe]

@icyJoseph -- I am sorry that I didn't acknowledge the time and effort you are putting into this issue; but am glad that there is someone more experienced in NextJs than me out there to hear. I really appreciate it. 🙏

[icyJoseph]

no worries, sorry I didn't post the code, haha I got a busy, and miss-clicked enter...

I might be wrong, but one issue here is that your data doesn't come through fetch, so I think it is aggressively cached.

• https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#data-fetching-without-fetch

And the fix was by no means obvious, I had to activate server actions, and pass one to the TodoForm:

// app/TodoForm.tsx
type Props = {
  todo?: Todo;
  onSubmit: VoidFunction;
};

export function TodoForm({ todo, onSubmit }: Props) {
// rest of file

Added:

// app/page.tsx
export const dynamic = "force-dynamic";

And:

import { TodoDao } from "@/app/TodoDao";
import { TodoForm } from "../../TodoForm";
import { revalidatePath } from "next/cache";

type Params = {
  id: string;
};

type Props = {
  params: Params;
};

export const dynamic = "force-dynamic";

export default async function EditTodo({ params: { id } }: Props) {
  const todo = await TodoDao.getInstance().getTodo(id);

  async function onEditTodo() {
    "use server";
    revalidatePath("/");
  }

  return (
    <div>
      <h1 className="text-2xl font-bold inline">Edit Todo</h1>
      <TodoForm todo={todo} onSubmit={onEditTodo} />
    </div>
  );
}

As well as:

import { revalidatePath } from "next/cache";
import { TodoForm } from "../TodoForm";

export default function AddTodo() {
  async function onAddTodo() {
    "use server";
    revalidatePath("/");
  }

  return (
    <div>
      <h1 className="text-2xl font-bold inline">Add Todo</h1>
      <TodoForm onSubmit={onAddTodo} />
    </div>
  );
}

That Server Action could be placed in its own file with a top level 'use server':

Last but not least:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

I had a similar issue with a page that used cookies though, and I am not sure how I feel about having to use Server Actions as the fix, but maybe I am just being dense... More here: #51488 (reply in thread)

[naishe]

I will check this out. Thanks so much! I don't have really good feeling about this. It feels like band-aid solution. And, I don't like the fact that the most basic flow is not working out of the box.

[icyJoseph]

The thing is that your flow is not fetch based, and triggers a whole bunch of expected problems.

Anyway, to be fair, mutation was never fully claimed by App Router stability, it had been a todo since day 1. The server actions are aimed at completing that picture.

[kevincobain2000]

Same issue link: #51788

[maulerjan]

Can we get a response from code owners please? This is a serious problem. There is currently no way for a page/route to guarantee fresh data on navigation.

[Enkratia]

Sorry for bothering, did you find alternative (rather then usage of experimental feature staleTimes, which still doesn't work on back/forward browser buttons + shared layouts)?

[arswarog]

I have some issue an I can't use server action - I use client side form library

[BashkirovN]

Someday this issue will be addressed. Just posting this to keep the tread alive.

[accountunavaible]

any fix?