iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Yes. In the Next.js App Router, using a Page’s searchParams prop opts that page into dynamic rendering at request time in the standard rendering model. The URL query is part of the incoming request, so Next.js cannot know its value when generating one static result ahead of time. Cache Components offer a qualified alternative: they can keep a static shell while deferring query-dependent content behind Suspense.
Why the Page prop changes rendering
The Page searchParams prop gives a page access to the current URL’s query parameters—for example, the value in ?sort=asc. Since that value depends on the request, Next.js cannot determine it during build-time prerendering. The current Page reference calls searchParams a Dynamic API and says using it opts the page into dynamic rendering at request time.
In current Next.js documentation, the prop is a promise that resolves to a plain JavaScript object, not a URLSearchParams instance. A repeated key may be represented by an array. For example, ?tag=a&tag=b can yield { tag: ['a', 'b'] }.
export default async function Page({ searchParams }) {
const { sort } = await searchParams
return <p>Sort order: {sort ?? 'default'}</p>
}It is the use of the request-specific API that matters; merely mentioning an unused prop in a type annotation is not the documented trigger. For the current API, read the promise with await in an async Server Component, or with React’s use() where appropriate. Next.js 14 and earlier used a synchronous prop. Next.js 15 retained synchronous access temporarily for compatibility, but documents it as deprecated. Check the documentation for the version you are using before copying older examples.
#1 Best Overall
How this differs from the client hook
The Page prop is not the same API as the client-side useSearchParams hook. On a statically rendered route, using that hook causes the Client Component tree up to its nearest Suspense boundary to be client-rendered; the rest of the route can remain static. A carefully placed boundary can therefore limit the client-rendered portion. On a dynamically rendered route, the hook is available during the initial server render. See the useSearchParams reference for the behavior by route type.
When a static shell can still be prerendered
Cache Components are an opt-in rendering model that changes how this tradeoff works. With Cache Components enabled, runtime data such as query parameters can be read in content placed behind a Suspense boundary. Next.js can prerender the static shell, then stream the query-dependent portion at request time. In that setup, the query-dependent content still needs request context; it is not equivalent to having the query value available in a single build-time static result.
Rank #2
The Cache Components guide explains this static-shell and runtime-content model. It also notes that runtime data cannot itself be cached with use cache because it requires request context; where appropriate, extracted values can be passed to cached functions.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →What force-static does—and does not do
In the previous caching model, the route segment setting dynamic = 'force-static' forces prerendering and makes request APIs—including cookies, headers, and useSearchParams—return empty values. That is a deliberate tradeoff, not a way to preserve access to request-specific query values while making the same output request-independent. This setting belongs to the previous model; Cache Components changes the rendering model and does not use route segment settings in the same way. See the guide to caching without Cache Components.
Quick Recap
Choose the pattern that matches what the query does
- The query determines server-side data or page content: use the Page prop and account for request-time rendering, or use Cache Components with a Suspense boundary if a prerendered shell suits the route.
- The query only affects a small client-side control or result area: consider
useSearchParamsin a Client Component under Suspense, so the boundary can contain the client-rendered portion of a static route. - The route must not depend on request-specific values: avoid consuming request APIs for that output. Forcing static behavior can mean those APIs return empty values rather than the incoming query.
How to check the route you actually ship
- Confirm the project’s Next.js version and rendering model. Check whether Cache Components are enabled; the Page prop’s current asynchronous shape and route configuration guidance vary by version and model.
- Build for production. Use the production build command configured for the project, commonly
npm run build. Development behavior alone does not establish how the production route is rendered. - Read the build summary and inspect the rendered page. Next.js recommends checking route behavior as part of production readiness; consult its production checklist. Verify both the static shell, if applicable, and the query-dependent output using URLs with the relevant query values.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
