Skip to content

Commit

Permalink
Fix typo (#34480)
Browse files Browse the repository at this point in the history
  • Loading branch information
leerob authored Feb 17, 2022
1 parent f0f322c commit 69aedbd
Show file tree
Hide file tree
Showing 9 changed files with 124 additions and 19 deletions.
8 changes: 5 additions & 3 deletions docs/api-reference/data-fetching/get-static-paths.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ description: API reference for `getStaticPaths`. Learn how to fetch data and gen
<details>
<summary><b>Version History</b></summary>

| 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. |

</details>

Expand Down
14 changes: 8 additions & 6 deletions docs/api-reference/data-fetching/get-static-props.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ description: API reference for `getStaticProps`. Learn how to use `getStaticProp
<details>
<summary><b>Version History</b></summary>

| 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. |

</details>

Expand Down
1 change: 1 addition & 0 deletions docs/api-routes/response-helpers.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
11 changes: 11 additions & 0 deletions docs/basic-features/data-fetching/client-side.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,14 @@ function Profile() {
)
}
```

## Related

For more information on what to do next, we recommend the following sections:

<div class="card">
<a href="/docs/routing/introduction.md">
<b>Routing:</b>
<small>Learn more about routing in Next.js.</small>
</a>
</div>
4 changes: 4 additions & 0 deletions docs/basic-features/data-fetching/get-server-side-props.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<div class="card">
<a href="/docs/api-reference/data-fetching/get-server-side-props.md">
<b>getServerSideProps API Reference</b>
Expand Down
12 changes: 10 additions & 2 deletions docs/basic-features/data-fetching/get-static-paths.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand All @@ -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

Expand All @@ -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:

<div class="card">
<a href="/docs/api-reference/data-fetching/get-static-paths.md">
<b>getStaticPaths API Reference</b>
Expand Down
16 changes: 13 additions & 3 deletions docs/basic-features/data-fetching/get-static-props.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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:

<div class="card">
<a href="/docs/api-reference/data-fetching/get-static-props.md">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@ description: 'Learn how to create or update static pages at runtime with Increme
<details>
<summary><b>Version History</b></summary>

| 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. |

</details>

Expand Down Expand Up @@ -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://<your-site.com>/api/revalidate?secret=<token>
```

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`.

Expand Down Expand Up @@ -114,3 +170,14 @@ export async function getStaticProps() {
}
}
```

## Related

For more information on what to do next, we recommend the following sections:

<div class="card">
<a href="/docs/basic-features/data-fetching/get-static-paths.md">
<b>Dynamic routing</b>
<small>Learn more about dynamic routing in Next.js with getStaticPaths.</small>
</a>
</div>
2 changes: 1 addition & 1 deletion docs/middleware.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. |

</details>

Expand Down

0 comments on commit 69aedbd

Please sign in to comment.