Skip to content
Draft
Changes from 2 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
64 changes: 64 additions & 0 deletions docs/01-app/02-guides/migrating-to-cache-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,70 @@ export default async function Page() {
}
```

## `generateStaticParams`

**Still supported.** Keep using [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params) for [dynamic routes](/docs/app/api-reference/file-conventions/dynamic-routes). With Cache Components, use [`generateStaticParams` with Cache Components](/docs/app/api-reference/functions/generate-static-params#with-cache-components) and [dynamic routes with Cache Components](/docs/app/api-reference/file-conventions/dynamic-routes#with-cache-components) as the source of truth for validation, Suspense, and unknown params.

If you previously used `return []`, that pattern becomes a [build error](/docs/messages/empty-generate-static-params); apply the fixes described in those docs (at least one sample param, or no `generateStaticParams` plus request-time patterns).

```tsx filename="app/blog/[slug]/page.tsx" switcher
// Before
export async function generateStaticParams() {
return []
}

export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
return <div>{slug}</div>
}
```

```jsx filename="app/blog/[slug]/page.js" switcher
// Before
export async function generateStaticParams() {
return []
}

export default async function Page({ params }) {
const { slug } = await params
return <div>{slug}</div>
}
```

```tsx filename="app/blog/[slug]/page.tsx" switcher
// After - Return at least one param (expand with your real slugs)
export async function generateStaticParams() {
return [{ slug: 'hello-world' }]
}

export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
return <div>{slug}</div>
}
```

```jsx filename="app/blog/[slug]/page.js" switcher
// After - Return at least one param (expand with your real slugs)
export async function generateStaticParams() {
return [{ slug: 'hello-world' }]
}

export default async function Page({ params }) {
const { slug } = await params
return <div>{slug}</div>
}
```

> **Good to know:** With Cache Components, each listed param shows its own symbol in the [build output](/docs/app/guides/building) — `○` if the page is fully static, or `◐` if it contains streamed content. See [Partial prerendering](/docs/app/guides/public-static-pages#partial-prerendering) for more details.
Copy link
Copy Markdown
Contributor

@vercel vercel bot Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Broken documentation link /docs/app/guides/building points to a non-existent page, resulting in a 404 for readers.

Fix on Vercel


## `runtime = 'edge'`

**Not supported.** Cache Components requires the Node.js runtime. Switch to the Node.js runtime (the default) by removing the `runtime = 'edge'` export. If you need edge behavior for specific routes, use [Proxy](/docs/app/api-reference/file-conventions/proxy) instead.
Loading