ISR on-demand need reload page on deployment with Vercel

[eposha]

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.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.1
  npm: 8.13.2
  Yarn: 1.22.10
  pnpm: 7.5.0
Relevant packages:
  next: 12.2.4-canary.8
  eslint-config-next: 12.2.2
  react: 18.2.0
  react-dom: 18.2.0

Which example does this report relate to?

ISR on-demand

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

npm run build

Describe the Bug

When using on-demand ISR deployed on Vercel with client routing (Link from next/link or
router.prefetch with router.push), you need to navigate twice to the page that was revalidated or do a full page reload to see the actual data.

Expected Behavior

When you go to a page that has been revalidated, get the actual data at once

To Reproduce

You are on the document creation page, after you create a document you do revalidate the document list, after a successful response you click on the button (whether it is Link from next/link or router.prefetch then router.push ) which links to the document list, but the document list is not updated, to get a new list you have to either do a reload or go to another page and go back to the document list page again. This only happens when deploying with Vercel and using npm run build && npm same problem (But sometimes it's working normal)

[ijjk]

Hi, this is due to the client side caching we do when prefetching page data, in the latest version of Next.js we will automatically attempt updating this cache on hover but this is best effort so if the request isn't returned before click we use the existing cache data to ensure a fast/successful navigation.

To skip using the client cache on a client navigation you can use router.push('/blog/first', undefined, { unstable_skipClientCache: true }).

[eposha]

Hi, this is due to the client side caching we do when prefetching page data, in the latest version of Next.js we will automatically attempt updating this cache on hover but this is best effort so if the request isn't returned before click we use the existing cache data to ensure a fast/successful navigation.

To skip using the client cache on a client navigation you can use router.push('/blog/first', undefined, { unstable_skipClientCache: true }).

Hi, I am using router.push('/blog/first', undefined, { unstable_skipClientCache: true }) everywhere in the app but that doesn't solve the problem

Does unstable_skipClientCache guarantee that the client cache is skipped?

When I use prefetch router.prefetch('/blog/first', undefined, { unstable_skipClientCache: true }), sometimes when I go to a page that has been revalidated the data is fresh, sometimes not

[eposha]

Hi, this is due to the client side caching we do when prefetching page data, in the latest version of Next.js we will automatically attempt updating this cache on hover but this is best effort so if the request isn't returned before click we use the existing cache data to ensure a fast/successful navigation.

To skip using the client cache on a client navigation you can use router.push('/blog/first', undefined, { unstable_skipClientCache: true }).

Is any idea? NextJs is my favorite framework, but please take one more step to fully work ISR on demand

[ijjk]

Can you provide a more specific reproduction? It sounds like a race condition is occurring in the way the project is creating and then revalidating. Ideally some time is given to allow the revalidation to occur and propagate before attempting to fetch the fresh data on the client.

[eposha]

@ijjk That's right, you should allow time for revalidation, even if the revalidation status comes 200 and after it immediately make a push to the page that was revalidated

  const onSubmit: SubmitHandler<Inputs> = async (formData) => {
    try {
      const { data } = await axios.post(
        '/api/documents',
        formData
      );

      await revalidate('/dashboard/admin/documents');

      router.push('/dashboard/admin/documents', undefined, {
        unstable_skipClientCache: true,
      });
    } catch (e) {}
  };

[ijjk]

Yeah the above snippet is racing the cache getting updated on the edge with the new request for data on the client as it isn't going to be immediately available.

Also it looks like the await revalidate() handling could be moved inside of the /api/documents endpoint itself so you aren't doing two separate requests.

I'm gonna close this for now as it doesn't appear to be a bug but we are going to continue to investigate handling for optimistically updating the cache on the client when the edge cache has changed.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.