On Vercel: On demand revalidation doesn't work for pages that are pre-rendered during build time.

Including static pages and "generateStaticParams()"

Deploy the project to Vercel and set this environment variables:

Special logs that are generated by RENDER_LOG are formatted like this: "### --- HH:mm:ss --- Log Text" and can be found in vercel dashboard.

If you see "Global Cache: api-error" on website because the internal api was not ready during build, deploy the project again and it should be ok.

1 - Behavior with fetch and <cache: "force-cache"> (CACHE_METHOD = "fetch"):

1-     Go to dynamic page (which will render in each hit). You should see something like "Global Cache: <266> 12-07 07:46:03". This value is what we expect to see in all other pages[1].

2-      Go to Control Panel. Then click on revalidatePath("/", "layout") [2].

3-      Go to dynamic page again. You will see new global cache in dynamic page. You should see some logs like this in dashboard as well:
### --- 08:24:58 --- Called get-number api <730> 12-07 08:24:58
### --- 08:26:09 --- Rendered dynamic page.tsx

4-      Go to other static pages and param pages. Notice pages that were previously cached during build process, have a hard time revalidating and you won"t see a log as well. Hence "/params/01" and "/params/02" will still show old data because they are rendered using generateStaticParams(). but other params (e.g. /params/03) will render again and show fresh data.

5-      In this stage if you somehow can cause a new render in those pages, they will revalidate and cache properly from this point forward (in another word they are cleaned). The workaround is you go to that page and hit reloads (ctrl + R). Keep in mind soft navigation and router.refresh() won't cause a new render in this stage. If you are lucky enough, you can get one or two new renders in every step, then you click on revalidatePath("/", "layout") again and repeat the process until you clean all of the pages [3].

2 - Behavior with isr fetch (CACHE_METHOD = "fetch_isr"):

1-      Same as 1.1

2-      Same as 1.2

3-      Same as 1.3

4-      Most pages will render again properly here.

5-      If a page is still serving old data, one reload (ctrl + R) will cause a new render, but keep in mind you will still see the stale page until next reload or soft navigation or router.refresh() [3].

6-      For isr pages that have "prefetch = false" including "isr 10s" and "isr 2h", first time navigating will cause a new render but new data will always be served in next visit [3].

Side issues:

[1] Cache is not consistence between build on vercel and dynamic pageAt first deploy, global cache is different between static pages and dynamic page. They serve a new and updated global cache while dynamic page is serving the one from previous build.

[2] Calling revalidatePath in a server action causes unnecessary render on the current pageThis happens in local build as well. Control panel will render once, which will be lost and will not be cached. Next time you visit control panel you might still get old data or a different set of data. For this issue in local build, you can call revalidatePath(custom) and keep an eye on different values under "Page Specific" section in control panel (also keep in mind react, renders each page two times, one for hard reload and one for RSC and soft navigation).

[3] On Vercel: App router serves stale data despite rendering fresh pagesWhen attempting to revalidate with hard reloads. If you are lucky and caused a new render, at that specific hit you still get the stale data while you see the render log in the dashboard. Only After next reload or soft navigation or router.refresh() new rendered page will be served. This behavior is extremely intense in "isr 10s" page.