ISR: Should client-side navigation with next/link trigger a page to revalidate?

[sdjnes]

Hello,

In discussions/issues, I've found information that ISR revalidation is only triggered on document load of a Next.js page (i.e. directly visiting the URL, or refreshing the page). For many websites and web apps, users land on a homepage and navigate to other pages with links rather than directly going to subpages via a URL.

If page content is pulled from an external service, and changes over time, subpages will show stale content until a refresh or direct visit is made to the page.

In this discussion, it seems that client-side navigation does/did trigger revalidation of pages, however, the examples given there don't work for me as of today.

The ISR documentation is a little ambiguous with the wording: "The only way to invalidate the cache is from someone visiting that page after the minute has passed.". I incorrectly assumed "visiting" would also include client-side navigation, as it's one of those things that I use in the project without much thought and is the recommended way. I'd guess the majority of Next.js projects also use client-side navigation with next/link.

--

Possible solutions

On-demand revalidation

This seems to be the goto stratgey and I believe it works well in some use cases. For example, when content changes in the external service, call an API route in the Next.js application /api/revalidate?path={path} which revalidates that specific path.

However, if there is content that serves multiple pages (e.g. header, footer), this would require many calls to the revalidate() function in the API route (as there is no revalidateAllPaths()). Deriving the paths can also be an issue, in my case this would require manual work to keep these paths up to date if new non-dynamic routes are added to the repo.

Using Vercel, it would be easy to hit the timeout limits for the serverless functions when revalidating many pages.

Use a tags as opposed to next/link

I think this is likely the best strategy, with some sacrifice to performance.

(Future?) getStaticProps in layouts

If layouts were to support getStaticProps in the future, this might solve the above issue of multiple calls to revalidate() for paths, as we could revalidate common page components independently.

--

I guess my questions are:

• Does anybody have client-side navigation working with next/link client-side navigation?
• Is the definitive answer that ISR doesn't work this way, and what's the reasoning behind it?
• Could the documentation be updated to reflect this?
• Is there any plans for getStaticProps to be supports in layouts?

[icyJoseph]

I made an app where pages with getStaticProps return props and revalidate 10. As part of props I send a timestamp and then I show that on the page. With SPA transitions, using next/link I see the revalidated data.

Tested even with middleware activated.

What version of Next.js are you using? Can you share a minimal repro where it doesn't work as expected?

[icyJoseph]

And this also happens in 12.3.0 right? I do recall there was a bug in 12.2.5 and 12.2.6 but I am not sure if it was related at all.

Locally, under next build && next start it works fine right?

[sdjnes]

12.2.5 and 12.3.0 locally it works as expected. The project was on 12.2.5 originally, but the upgrade to 12.3.0 required minimal code changes so I upgraded it.

I deployed 12.3.0, and the revalidation worked exactly once. I updated the page in the CMS, and visiting it via client side navigation eventually showed the new content, however, any other page I updated (including the original one) all showed stale content on the frontend.

Interestingly, the network request for the JSON resources do have the new content in the response, but the actualy frontend render is showing stale data.

EDIT: Can't seem to pin it down. Sometimes the JSON resource has the latest data, sometimes not. In some cases, the JSON resource is showing old data, but because I refreshed the page itself, the frontend render shows the latest data and not the data that was returned in the JSON.

[dubbajubba]

@sdjnes , I am having very similar issues with my project. Hopefully someone can shed some light and get us a resolution!

[sdjnes]

Good to know I'm not alone @austin-triiistudio!

I'm planning to deploy a minimal reproducible example to Vercel but haven't had chance yet. The project I'm seeing this issue in has some additional logic in the _app file so I want to make sure that isn't interfering with anything.

[sdjnes]

Here's the repo and deployment:

https://github.com/sdjnes/vercel-next-isr-test
https://vercel-next-isr-test.vercel.app/

Of note, I've set Next.js to 12.3.1 and React to 17 as this is what I'm running the project where I see the issue.

Here's a video of me clicking back-and-forth with next/link. Notice the getStaticProps timestamp not updating until I do a page refresh to trigger the revalidation, and a subsequent refresh to see the new content.

I have also created a preview deployment for branch next-13 in that repo, which uses the Next.js and React version defaults from create-next-app (deployment here: https://vercel-next-isr-test-nsnaodexd-sjones-inpostcouk.vercel.app/) and the issue is also seen for me.

Screen.Recording.2022-11-16.at.23.15.05.mov

[IronDdtRIiGh]

Sould no revalidate should rerssintsssinte., u. ^%<@#_ exut#_%_<

…

On Wed, Nov 9, 2022, 4:07 PM Joseph ***@***.***> wrote: I made an app where pages with getStaticProps return props and revalidate 10. As part of props I send a timestamp and then I show that on the page. With SPA transitions, using next/link I see the revalidated data. Tested even with middleware activated. What version of Next.js are you using? Can you share a minimal repro where it doesn't work as expected? — Reply to this email directly, view it on GitHub <#42685 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A4BZRNJ2UB7Z7NAMGUV5PSLWHQG7ZANCNFSM6AAAAAAR3OJQXA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[krsntn]

@sdjnes , has the issue been resolved yet? I am facing the same problem with my project which is using next 12.3.4 and react 18.2.0. The project runs without any issues when I build and start it locally using next build && next start, but I am encountering the same issue when deploying it on Vercel.

[sdjnes]

It hasn't been resolved yet as far as I'm aware. I opened a GitHub issue after confirming with Vercel that it was indeed an issue (#43289) and was told they would put any updates there