Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(isr): update generateStaticParams-isr docs #67056

Merged
merged 3 commits into from
Jun 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions docs/02-app/01-building-your-application/04-caching/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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())

Expand All @@ -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
samcx marked this conversation as resolved.
Show resolved Hide resolved
```jsx filename="app/blog/[slug]/page.js"
export async function generateStaticParams() {
const posts = await fetch('https://.../posts').then((res) => res.json())

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

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

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -218,16 +218,20 @@ 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 []
}
```

> **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)).
Expand Down
Loading