Including static pages and generateStaticParams()
Deploy the project to Vercel and set this environment variables:
| Env | Description | Example |
|---|---|---|
| NEXT_PUBLIC_SITE_URL | Necessary for internal api fetch | https://nextjs-revalidation-test.vercel.app |
| CACHE_METHOD | Determines the cache method | fetch or fetch_isr or fetch_no_force or unstable_cache or unstable_cache_isr |
| RENDER_LOG | Display custom logs in dashboard or console | true or false |
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.
-
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].
-
Go to Control Panel. Then click on
revalidatePath("/", "layout")[2]. -
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" and "### --- 08:26:09 --- Rendered dynamic page.tsx"
-
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. -
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 onrevalidatePath("/", "layout")again and repeat the process until you clean all of the pages [3].
-
Same as 1.1
-
Same as 1.2
-
Same as 1.3
-
Most pages will render again properly here.
-
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]. -
For isr pages that have
prefetch = falseincluding "isr 10s" and "isr 2h", first time navigating will cause a new render but new data will always be served in next visit [3].
At 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.
This 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).
When 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.
- Go to "Control Panel" click on the "root layout" button.
- Click on "not found" button on navbar or type in any arbitrary address.
- On Vercel general not found page always returns stale data. While on local build not found page is a dynamic page.
- Type in any non-numeric ids like /params/gg or /params/njs.
- Pages that use
notFound()from next/navigation are actually cached. This could cause Disk exhaustion.notFound()should always redirect to one general not found page.