docs(isr): update generateStaticParams-isr docs (#67056)
## Why? You can also utilize `export cont dynamic = 'force-static'` to ISR pages at runtime, instead of having to returning an empty array in `generateStaticParams`. x-ref: https://github.com/vercel/next.js/pull/66151, https://github.com/vercel/next.js/issues/62195#issuecomment-2172549838
This commit is contained in:
parent
cbeb109892
commit
fc382a91db
3 changed files with 19 additions and 11 deletions
|
@ -538,7 +538,7 @@ For [dynamic segments](/docs/app/building-your-application/routing/dynamic-route
|
|||
|
||||
To statically render all paths at build time, supply the full list of paths to `generateStaticParams`:
|
||||
|
||||
```tsx filename="app/blog/[slug]/page.tsx" switcher
|
||||
```jsx filename="app/blog/[slug]/page.js"
|
||||
export async function generateStaticParams() {
|
||||
const posts = await fetch('https://.../posts').then((res) => res.json())
|
||||
|
||||
|
@ -550,7 +550,7 @@ export async function generateStaticParams() {
|
|||
|
||||
To statically render a subset of paths at build time, and the rest the first time they're visited at runtime, return a partial list of paths:
|
||||
|
||||
```tsx filename="app/blog/[slug]/page.tsx" switcher
|
||||
```jsx filename="app/blog/[slug]/page.js"
|
||||
export async function generateStaticParams() {
|
||||
const posts = await fetch('https://.../posts').then((res) => res.json())
|
||||
|
||||
|
@ -561,15 +561,19 @@ export async function generateStaticParams() {
|
|||
}
|
||||
```
|
||||
|
||||
To statically render all paths the first time they're visited, return an empty array (no paths will be rendered at build time):
|
||||
To statically render all paths the first time they're visited, return an empty array (no paths will be rendered at build time) or utilize [`export const dynamic = 'force-static'`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic):
|
||||
|
||||
```tsx filename="app/blog/[slug]/page.tsx" switcher
|
||||
```jsx filename="app/blog/[slug]/page.js"
|
||||
export async function generateStaticParams() {
|
||||
return []
|
||||
}
|
||||
```
|
||||
|
||||
> **Good to know:** You must always return an array from `generateStaticParams`, even if it's empty. Otherwise, the route will be dynamically rendered.
|
||||
> **Good to know:** You must return an array from `generateStaticParams`, even if it's empty. Otherwise, the route will be dynamically rendered.
|
||||
|
||||
```jsx filename="app/changelog/[slug]/page.js"
|
||||
export const dynamic = 'force-static'
|
||||
```
|
||||
|
||||
To disable caching at request time, add the `export const dynamicParams = false` option in a route segment. When this config option is used, only paths provided by `generateStaticParams` will be served, and other routes will 404 or match (in the case of [catch-all routes](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)).
|
||||
|
||||
|
@ -579,7 +583,7 @@ The React `cache` function allows you to memoize the return value of a function,
|
|||
|
||||
Since `fetch` requests are automatically memoized, you do not need to wrap it in React `cache`. However, you can use `cache` to manually memoize data requests for use cases when the `fetch` API is not suitable. For example, some database clients, CMS clients, or GraphQL clients.
|
||||
|
||||
```tsx filename="utils/get-item.ts" switcher
|
||||
```ts filename="utils/get-item.ts" switcher
|
||||
import { cache } from 'react'
|
||||
import db from '@/lib/db'
|
||||
|
||||
|
@ -589,7 +593,7 @@ export const getItem = cache(async (id: string) => {
|
|||
})
|
||||
```
|
||||
|
||||
```jsx filename="utils/get-item.js" switcher
|
||||
```js filename="utils/get-item.js" switcher
|
||||
import { cache } from 'react'
|
||||
import db from '@/lib/db'
|
||||
|
||||
|
|
|
@ -84,7 +84,7 @@ export const dynamicParams = true // true | false,
|
|||
> **Good to know**:
|
||||
>
|
||||
> - This option replaces the `fallback: true | false | blocking` option of `getStaticPaths` in the `pages` directory.
|
||||
> - To statically render all paths the first time they're visited, you'll need to return an empty array in `generateStaticParams`.
|
||||
> - To statically render all paths the first time they're visited, you'll need to return an empty array in `generateStaticParams` or utilize `export const dynamic = 'force-static'`.
|
||||
> - When `dynamicParams = true`, the segment uses [Streaming Server Rendering](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense).
|
||||
> - If the `dynamic = 'error'` and `dynamic = 'force-static'` are used, it'll change the default of `dynamicParams` to `false`.
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@ export default function Page({ params }) {
|
|||
> **Good to know**
|
||||
>
|
||||
> - You can use the [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) segment config option to control what happens when a dynamic segment is visited that was not generated with `generateStaticParams`.
|
||||
> - You must always return [an array from `generateStaticParams`](#all-paths-at-build-time), even if it's empty.
|
||||
> - You must return [an empty array from `generateStaticParams`](#all-paths-at-build-time) or utilize [`export const dynamic = 'force-static'`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) in order to revalidate (ISR) [paths at runtime](#all-paths-at-runtime).
|
||||
> - During `next dev`, `generateStaticParams` will be called when you navigate to a route.
|
||||
> - During `next build`, `generateStaticParams` runs before the corresponding Layouts or Pages are generated.
|
||||
> - During revalidation (ISR), `generateStaticParams` will not be called again.
|
||||
|
@ -218,9 +218,9 @@ export async function generateStaticParams() {
|
|||
|
||||
#### All paths at runtime
|
||||
|
||||
To statically render all paths the first time they're visited, return an empty array (no paths will be rendered at build time):
|
||||
To statically render all paths the first time they're visited, return an empty array (no paths will be rendered at build time) or utilize [`export const dynamic = 'force-static'`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic):
|
||||
|
||||
```tsx filename="app/blog/[slug]/page.tsx" switcher
|
||||
```jsx filename="app/blog/[slug]/page.js"
|
||||
export async function generateStaticParams() {
|
||||
return []
|
||||
}
|
||||
|
@ -228,6 +228,10 @@ export async function generateStaticParams() {
|
|||
|
||||
> **Good to know:** You must always return an array from `generateStaticParams`, even if it's empty. Otherwise, the route will be dynamically rendered.
|
||||
|
||||
```jsx filename="app/changelog/[slug]/page.js"
|
||||
export const dynamic = 'force-static'
|
||||
```
|
||||
|
||||
### Disable rendering for unspecified paths
|
||||
|
||||
To prevent unspecified paths from being statically rendered at runtime, add the `export const dynamicParams = false` option in a route segment. When this config option is used, only paths provided by `generateStaticParams` will be served, and unspecified routes will 404 or match (in the case of [catch-all routes](/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments)).
|
||||
|
|
Loading…
Reference in a new issue