diff --git a/docs/api-reference/data-fetching/get-static-paths.md b/docs/api-reference/data-fetching/get-static-paths.md
index 9175bed28a721..5b86474d88909 100644
--- a/docs/api-reference/data-fetching/get-static-paths.md
+++ b/docs/api-reference/data-fetching/get-static-paths.md
@@ -7,10 +7,12 @@ description: API reference for `getStaticPaths`. Learn how to fetch data and gen
Version History
-| Version | Changes |
-| -------- | --------------------------------------------------------------------------------------------------------------- |
+| Version | Changes |
+| ------- | ------- |
+
+| `v12.1.0` | [On-demand Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md#on-demand-revalidation-beta) added (Beta). |
| `v9.5.0` | Stable [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md) |
-| `v9.3.0` | `getStaticPaths` introduced. |
+| `v9.3.0` | `getStaticPaths` introduced. |
diff --git a/docs/api-reference/data-fetching/get-static-props.md b/docs/api-reference/data-fetching/get-static-props.md
index 7e04d1d9252e7..c5f34276ffa8a 100644
--- a/docs/api-reference/data-fetching/get-static-props.md
+++ b/docs/api-reference/data-fetching/get-static-props.md
@@ -7,12 +7,14 @@ description: API reference for `getStaticProps`. Learn how to use `getStaticProp
Version History
-| Version | Changes |
-| --------- | ----------------------------------------------------------------------------------------------------------------- |
-| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added. |
-| `v9.5.0` | Stable [Incremental Static Regeneration](https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration) |
-| `v9.3.0` | `getStaticProps` introduced. |
-| `v10.0.0` | `fallback: 'blocking'` return option added. |
+| Version | Changes |
+| ------- | ------- |
+
+| `v12.1.0` | [On-demand Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md#on-demand-revalidation-beta) added (Beta). |
+| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added. |
+| `v10.0.0` | `fallback: 'blocking'` return option added. |
+| `v9.5.0` | Stable [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md) |
+| `v9.3.0` | `getStaticProps` introduced. |
diff --git a/docs/api-routes/response-helpers.md b/docs/api-routes/response-helpers.md
index 41673745b259b..0e3af609fbc6e 100644
--- a/docs/api-routes/response-helpers.md
+++ b/docs/api-routes/response-helpers.md
@@ -12,6 +12,7 @@ The included helpers are:
- `res.json(body)` - Sends a JSON response. `body` must be a [serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serialization)
- `res.send(body)` - Sends the HTTP response. `body` can be a `string`, an `object` or a `Buffer`
- `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Temporary redirect".
+- `res.unstable_revalidate(urlPath)` - [Revalidate a page on demand](/docs/basic-features/data-fetching/incremental-static-regeneration.md#on-demand-revalidation-beta) using `getStaticProps`. `urlPath` must be a `string`.
## Setting the status code of a response
diff --git a/docs/basic-features/data-fetching/client-side.md b/docs/basic-features/data-fetching/client-side.md
index 97cad41a1a8ae..6b1768a6e901b 100644
--- a/docs/basic-features/data-fetching/client-side.md
+++ b/docs/basic-features/data-fetching/client-side.md
@@ -68,3 +68,14 @@ function Profile() {
)
}
```
+
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
+
diff --git a/docs/basic-features/data-fetching/get-server-side-props.md b/docs/basic-features/data-fetching/get-server-side-props.md
index 53952a44942ee..377a775aa5a22 100644
--- a/docs/basic-features/data-fetching/get-server-side-props.md
+++ b/docs/basic-features/data-fetching/get-server-side-props.md
@@ -74,6 +74,10 @@ export async function getServerSideProps() {
export default Page
```
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
getServerSideProps API Reference
diff --git a/docs/basic-features/data-fetching/get-static-paths.md b/docs/basic-features/data-fetching/get-static-paths.md
index cb9b5b68b4381..ecb2e7f57c8c3 100644
--- a/docs/basic-features/data-fetching/get-static-paths.md
+++ b/docs/basic-features/data-fetching/get-static-paths.md
@@ -19,7 +19,7 @@ export async function getStaticPaths() {
}
```
-Note that`getStaticProps` **must** be used with `getStaticPaths`, and that you **cannot** use it with [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md).
+`getStaticPaths` **must** be used with `getStaticProps`. You **cannot** use it with [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md).
The [`getStaticPaths` API reference](/docs/api-reference/data-fetching/get-static-paths.md) covers all parameters and props that can be used with `getStaticPaths`.
@@ -35,7 +35,11 @@ You should use `getStaticPaths` if you’re statically pre-rendering pages that
## When does getStaticPaths run
-`getStaticPaths` only runs at build time on server-side. If you're using [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md), `getStaticPaths` can also be run on-demand _in the background_, but still only on the server-side.
+`getStaticPaths` always runs on the server and never on the client. You can validate code written inside `getStaticPaths` is removed from the client-side bundle [with this tool](https://next-code-elimination.vercel.app/).
+
+- `getStaticPaths` runs during `next build` for Pages included in `paths`
+- `getStaticPaths` runs on-demand in the background when using `fallback: true`
+- `getStaticPaths` runs on-demand blocking rendering when using `fallback: blocking`
## Where can I use getStaticPaths
@@ -47,6 +51,10 @@ Note that you must use export `getStaticPaths` as a standalone function — it w
In development (`next dev`), `getStaticPaths` will be called on every request.
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
getStaticPaths API Reference
diff --git a/docs/basic-features/data-fetching/get-static-props.md b/docs/basic-features/data-fetching/get-static-props.md
index 0b483f5a6b994..a5a5190fda979 100644
--- a/docs/basic-features/data-fetching/get-static-props.md
+++ b/docs/basic-features/data-fetching/get-static-props.md
@@ -23,9 +23,17 @@ You should use `getStaticProps` if:
- The data can be publicly cached (not user-specific)
- The page must be pre-rendered (for SEO) and be very fast — `getStaticProps` generates `HTML` and `JSON` files, both of which can be cached by a CDN for performance
+## When does getStaticProps run
+
+`getStaticProps` always runs on the server and never on the client. You can validate code written inside `getStaticProps` is removed from the client-side bundle [with this tool](https://next-code-elimination.vercel.app/).
+
+- `getStaticProps` always runs during `next build`
+- `getStaticProps` runs in the background when using `revalidate`
+- `getStaticProps` runs on-demand in the background when using [`unstable_revalidate`](/docs/basic-features/data-fetching/incremental-static-regeneration.md#on-demand-revalidation-beta)
+
When combined with [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md), `getStaticProps` will run in the background while the stale page is being revalidated, and the fresh page served to the browser.
-Because `getStaticProps` runs at build time, it does **not** have access to the incoming request (such as query parameters or `HTTP` headers) as it generates static `HTML`. If you need access to the request for your page, consider using [Middleware](/docs/middleware.md) in addition to `getStaticProps`.
+`getStaticProps` does not have access to the incoming request (such as query parameters or HTTP headers) as it generates static HTML. If you need access to the request for your page, consider using [Middleware](/docs/middleware.md) in addition to `getStaticProps`.
## Using getStaticProps to fetch data from a CMS
@@ -128,9 +136,11 @@ In development (`next dev`), `getStaticProps` will be called on every request.
## Preview Mode
-In some cases, you might want to temporarily bypass Static Generation and render the page at **request time** instead of build time. For example, you might be using a headless CMS and want to preview drafts before they're published.
+You can temporarily bypass static generation and render the page at **request time** instead of build time using [**Preview Mode**](/docs/advanced-features/preview-mode.md). For example, you might be using a headless CMS and want to preview drafts before they're published.
+
+## Related
-This use case is supported in Next.js by the [**Preview Mode**](/docs/advanced-features/preview-mode.md) feature.
+For more information on what to do next, we recommend the following sections:
diff --git a/docs/basic-features/data-fetching/incremental-static-regeneration.md b/docs/basic-features/data-fetching/incremental-static-regeneration.md
index abe7f13c81542..fa0a1b350e8d5 100644
--- a/docs/basic-features/data-fetching/incremental-static-regeneration.md
+++ b/docs/basic-features/data-fetching/incremental-static-regeneration.md
@@ -16,9 +16,11 @@ description: 'Learn how to create or update static pages at runtime with Increme
Version History
-| Version | Changes |
-| -------- | ---------------- |
-| `v9.5.0` | Base Path added. |
+| Version | Changes |
+| --------- | --------------------------------------------------------------------------------------- |
+| `v12.1.0` | On-demand ISR added (Beta). |
+| `v12.0.0` | [Bot-aware ISR fallback](https://nextjs.org/blog/next-12#bot-aware-isr-fallback) added. |
+| `v9.5.0` | Base Path added. |
@@ -85,7 +87,61 @@ When a request is made to a page that was pre-rendered at build time, it will in
When a request is made to a path that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache. ISR on Vercel [persists the cache globally and handles rollbacks](https://vercel.com/docs/concepts/next.js/incremental-static-regeneration).
-## Error Handling and Revalidation
+## On-demand Revalidation (Beta)
+
+If you set a `revalidate` time of `60`, all visitors will see the same generated version of your site for one minute. The only way to invalidate the cache is from someone visiting that page after the minute has passed.
+
+Starting with `v12.1.0`, Next.js supports on-demand Incremental Static Regeneration to manually purge the Next.js cache for a specific page. This makes it easier to update your site when:
+
+- Content from your headless CMS is created or updated
+- Ecommerce metadata changes (price, description, category, reviews, etc.)
+
+Inside `getStaticProps`, you do not need to specify `revalidate` to use on-demand revalidation. If `revalidate` is omitted, Next.js will use the default value of `false` (no revalidation) and only revalidate the page on-demand when `unstable_revalidate` is called.
+
+### Using On-Demand Revalidation
+
+First, create a secret token only known by your Next.js app. This secret will be used to prevent unauthorized access to the revalidation API Route. You can access the route (either manually or with a webhook) with the following URL structure:
+
+```bash
+https:///api/revalidate?secret=
+```
+
+Next, add the secret as an [Environment Variable](/docs/basic-features/environment-variables.md) to your application. Finally, create the revalidation API Route:
+
+```jsx
+// pages/api/revalidate.js
+
+export default async function handler(req, res) {
+ // Check for secret to confirm this is a valid request
+ if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
+ return res.status(401).json({ message: 'Invalid token' })
+ }
+
+ try {
+ await res.unstable_revalidate('/path-to-revalidate')
+ return res.json({ revalidated: true })
+ } catch (err) {
+ // If there was an error, Next.js will continue
+ // to show the last successfully generated page
+ return res.status(500).send('Error revalidating')
+ }
+}
+```
+
+[View our demo](https://on-demand-isr.vercel.app) to see on-demand revalidation in action and provide feedback.
+
+### Testing on-demand ISR during development
+
+When running locally with `next dev`, `getStaticProps` is invoked on every request. To verify your on-demand ISR configuration is correct, you will need to create a [production build](/docs/api-reference/cli.md#build) and start the [production server](/docs/api-reference/cli.md#production):
+
+```bash
+$ next build
+$ next start
+```
+
+Then, you are able to validate static pages are successfully revalidated.
+
+## Error handling and revalidation
If there is an error inside `getStaticProps` when handling background regeneration, or you manually throw an error, the last successfully generated page will continue to show. On the next subsequent request, Next.js will retry calling `getStaticProps`.
@@ -114,3 +170,14 @@ export async function getStaticProps() {
}
}
```
+
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
+
diff --git a/docs/middleware.md b/docs/middleware.md
index c56eb4df42986..d204f99a6c4da 100644
--- a/docs/middleware.md
+++ b/docs/middleware.md
@@ -10,7 +10,7 @@ description: Learn how to use Middleware in Next.js to run code before a request
| Version | Changes |
| --------- | ------------------------------------------------------------------------------------------ |
| `v12.0.9` | Enforce absolute URLs in Edge Runtime ([PR](https://github.com/vercel/next.js/pull/33410)) |
-| `v12.0.0` | Middleware (beta) added. |
+| `v12.0.0` | Middleware (Beta) added. |