#is it a good idea to render components regarding to search params ?
1 messages · Page 1 of 1 (latest)
Hi @tranquil lake. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, it can be a good idea to render components based on search parameters, especially when you want to create dynamic behavior in your application. However, there are some considerations to keep in mind:
-
Server Components:
useSearchParamsis a Client Component hook and is not supported in Server Components to prevent stale values during partial rendering. So, if you're using Server Components, you should use thesearchParamsprop instead. source (https://nextjs.org/docs/app/api-reference/functions/use-search-params#returns-part-2) -
Layouts: Unlike Pages, Layouts do not receive the
searchParamsprop. This is because a shared layout is not re-rendered during navigation which could lead to stalesearchParamsbetween navigations. source (https://nextjs.org/docs/app/api-reference/file-conventions/layout#layouts-do-not-receive-searchparams) -
Dynamic Rendering: If a route is dynamically rendered,
useSearchParamswill be available on the server during the initial server render of the Client Component. source (https://nextjs.org/docs/app/api-reference/functions/use-search-params#behavior-dynamic-rendering) -
Static Rendering: If a route is statically rendered, calling
useSearchParams()will cause the tree up to the closestSuspenseboundary to be client-side rendered. This allows a part of the page to be statically rendered while the dynamic part that usessearchParamsis client-side rendered. source (https://nextjs.org/docs/app/api-reference/functions/use-search-params#behavior-static-rendering)