Pass searchParams from Server Component to Client Component cause page change to dynamic

[conduongtong]

Summary

1. src/Page.tsx

const Home = ({searchParams}) => {
  return <ClientComponent searchParams={searchParams} />
}

2. components/ClientComponent/index.tsx

'use client';

const ClientComponent= ({searchParams}) => {
  return <div>{searchParams?.name}</div>
}

When passing searchParams to Client component, page will auto change from static page to dynamic page when next build
Edited: passing searchParams to Server Component also get that problem

Is that expected behavior?
I know I can use useSearchParams() but why? I can pass it like props

Thank you.

Additional information

No response

Example

No response

[icyJoseph]

• https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional:

searchParams is a Dynamic API whose values cannot be known ahead of time. Using it will opt the page into dynamic rendering at request time.