Next.js Discord

Discord Forum

Alternative to useSearchParams to prevent deopting from CSR

Answered
Griffon Nivernais posted this in #help-forum
Open in Discord
Griffon NivernaisOP
Since adopting this its caused a meriad of stops that I find non-trivial to solve in a reasonable amount of time, the fact I always get locked out of CSR due to the way I use this function is absurd to me. Wondering what alternatives exist instead of this at the moment.
Answered by joulev
use dynamic rendering, just add export const revalidate = 0. useSearchParams will then not deopt into (not from) CSR
View full answer

32 Replies

or passing the searchParams props from the page component down if you want to avoid useSearchParams
@Ray have you wrapped the component that use `useSearchParams` with `Suspense`? https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering
Griffon NivernaisOP
I've a single page that relies entirely on search parameters so this isn't exactly feasible.
I did try to treat as much of the page as a component then wrap it in Suspense to no avail.
Ended up with the same kind of error, speaking of I've not posted it.
Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about 
the nature of the error.                                                                                                                                                                                                                           
 âš  Entire page "/test/introduction" deopted into client-side rendering due to "undefined". Read more: https://nextjs.org/docs/messages/deopted-into-client-rendering
The problematic page is /test, but this odd behaviour has caused a cascading effect on inner pages like /test/introduction.
I have to use Zod to properly type them as this page needs them to exist in the first place or it won't work.
Unsure if that can also cause issues.
Answer
joulev
if you want the page to be static, the search params cannot be known ahead of time

* if you are fine with it being known via client-side js (hence client-side rendering), then use Suspense like Ray said

* if you are NOT fine with client-side rendering then it is fundamentally impossible since static pages don't know the request content in advance
Griffon NivernaisOP
Honestly, at this stage I don't care how it renders, I just want it to work.
Normally I opt for static rendering as that's performant and thanks to app router giving me the ability to be more choose-y of what renders where, I can also allow more private things to render as components within a server component.
But at this moment in time I genuinely just want to get this working lol
Griffon NivernaisOP
I'll give it a try, had to wrestle GTM for a second.
âš  Entire page "/test" deopted into client-side rendering due to "useSearchParams()".
Griffon NivernaisOP
Don't know, how can I confirm this?
It doesn't have anything like gSSP.
Ray
there is a report after you run next build
Griffon NivernaisOP
Builds are successful now thanks to you two, let me take a look.
I believe it's static:
Griffon NivernaisOP
I believe it does yes, give me a moment to check.
I just figured out how to retrieve search parameters and opt out of SR.
Ding.
Looks all good to me.
Ray
nice
Griffon NivernaisOP
Thank you so much. 💞