mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Delba de Oliveira
c2b4c0815c
This PRs unifies the caching story across the docs, making Cache Components the happy path, while still providing guidance to users in the old model. However, instead of explaining the old model and its caching layers, we've created a new guide focusing on what APIs to use and when. This follow-up PR aligns terminology across the docs: https://github.com/vercel/next.js/pull/90589 ## IA updates Getting Started section: - Improves Getting Started progression: - **Before:** CC → Fetching Data → Updating Data → Caching and Revalidating (old and new model mixed) - **After:** Fetching Data (Dynamic) → Mutating Data (Dynamic) → Caching with CC (Prerendering) → Revalidating with CC. - New: `caching.mdx` (CC-first) - Structure: - Enabling Cache Components - Data vs UI-level caching - Working with request time APIs - Passing request values to cached functions - Working with non-deterministic operations - Working with synchronous operations - How rendering works (PPR and static shell story) - New: `revalidating.mdx` (CC-first) - Explains how to use `cacheLife` and `cacheTag` Guides Section: - New: `caching-and-revalidating.mdx` (Previous Model) - For users who are not using CC, includes `fetch` options and route segment config - Moves route segment config options that don't apply to CC from API reference to this guide (for easy archiving in the future). - New: `migrating-to-cache-components.mdx` (WIP) - Del: `caching.mdx` 😌 ## Terminology We should remove caching layers from the docs. Users only needed to be exposed to them when they were configured independently, but the new CC APIs work across layers. To make it easier to review this PR, I'm consolidating terminology and fixing broken links in a new PR: https://github.com/vercel/next.js/pull/90589 --------- Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com> Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
65 lines
2.1 KiB
Plaintext
65 lines
2.1 KiB
Plaintext
---
|
|
title: Entire page deopted into client-side rendering
|
|
---
|
|
|
|
## Why This Error Occurred
|
|
|
|
During prerendering, the entire page was deopted into client-side rendering by `useSearchParams` as there was no [Suspense boundary](/docs/app/api-reference/functions/use-search-params#prerendering) that caught it.
|
|
|
|
If a route is prerendered, calling `useSearchParams()` will cause the tree up to the closest [Suspense boundary](/docs/app/api-reference/functions/use-search-params#prerendering) to be client-side rendered.
|
|
|
|
This allows a part of the page to be prerendered while the dynamic part that uses `searchParams` can be client-side rendered.
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
You can reduce the portion of the route that is client-side rendered by wrapping the component that uses useSearchParams in a Suspense boundary.
|
|
|
|
For example if `app/dashboard/search-bar.tsx` uses `useSearchParams` wrap the component in a [Suspense boundary](/docs/app/api-reference/functions/use-search-params#prerendering) as shown in `app/dashboard/page.tsx`.
|
|
|
|
```tsx filename="app/dashboard/search-bar.tsx"
|
|
'use client'
|
|
|
|
import { useSearchParams } from 'next/navigation'
|
|
|
|
export default function SearchBar() {
|
|
const searchParams = useSearchParams()
|
|
|
|
const search = searchParams.get('search')
|
|
|
|
// This will not be logged on the server during prerendering
|
|
console.log(search)
|
|
|
|
return <>Search: {search}</>
|
|
}
|
|
```
|
|
|
|
```tsx filename="app/dashboard/page.tsx"
|
|
import { Suspense } from 'react'
|
|
import SearchBar from './search-bar'
|
|
|
|
// This component passed as fallback to the Suspense boundary
|
|
// will be rendered in place of the search bar in the initial HTML.
|
|
// When the value is available during React hydration the fallback
|
|
// will be replaced with the `<SearchBar>` component.
|
|
function SearchBarFallback() {
|
|
return <>placeholder</>
|
|
}
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<nav>
|
|
<Suspense fallback={<SearchBarFallback />}>
|
|
<SearchBar />
|
|
</Suspense>
|
|
</nav>
|
|
<h1>Dashboard</h1>
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Useful Links
|
|
|
|
- [`useSearchParams` prerendering documentation](/docs/app/api-reference/functions/use-search-params#prerendering)
|