suspense and useSearchParams
Answered
Sweat bee posted this in #help-forum
Sweat beeOP
can someone explain why a component with useSearchParams has to be bound in a suspense boundary? Maybe I don't understand the purpose of Suspense but I thought I wrap my component with Suspense when the component has some sort of async data fetching?! So I have a fallback on my Suspense for showing some loading idication?! But useSearchParams just reads the params from the url?! I dont think this is some async stuff going on there?! Can someone explain?
Answered by joulev
You only know the search params when the request comes. Hence, in dynamic rendering (rendering at request time), you do not need Suspense.
In static rendering, your page is rendered at build time when the search params is not known. Hence you have to mark the part of your page that uses search params as “unable to statically renderâ€. That part will be skipped during static generation and only rendered in the client (client-side rendering). How to mark that part? Suspense.
Suspense is a pretty powerful tool, it’s used for various purposes not just for asynchronous data fetching
In static rendering, your page is rendered at build time when the search params is not known. Hence you have to mark the part of your page that uses search params as “unable to statically renderâ€. That part will be skipped during static generation and only rendered in the client (client-side rendering). How to mark that part? Suspense.
Suspense is a pretty powerful tool, it’s used for various purposes not just for asynchronous data fetching
7 Replies
Barbary Lion
I was just playing with useSearchParams today, and wasn't using suspense (and realised I should use suspense).
I discovered the reading of the URL is infact asynchronous
I discovered the reading of the URL is infact asynchronous
Sweat beeOP
ok, then... 🙂
@Sweat bee can someone explain why a component with useSearchParams has to be bound in a suspense boundary? Maybe I don't understand the purpose of Suspense but I thought I wrap my component with Suspense when the component has some sort of async data fetching?! So I have a fallback on my Suspense for showing some loading idication?! But useSearchParams just reads the params from the url?! I dont think this is some async stuff going on there?! Can someone explain?
You only know the search params when the request comes. Hence, in dynamic rendering (rendering at request time), you do not need Suspense.
In static rendering, your page is rendered at build time when the search params is not known. Hence you have to mark the part of your page that uses search params as “unable to statically renderâ€. That part will be skipped during static generation and only rendered in the client (client-side rendering). How to mark that part? Suspense.
Suspense is a pretty powerful tool, it’s used for various purposes not just for asynchronous data fetching
In static rendering, your page is rendered at build time when the search params is not known. Hence you have to mark the part of your page that uses search params as “unable to statically renderâ€. That part will be skipped during static generation and only rendered in the client (client-side rendering). How to mark that part? Suspense.
Suspense is a pretty powerful tool, it’s used for various purposes not just for asynchronous data fetching
Answer
Sweat beeOP
so in case of the search I don't necessarily need a fallback for the suspend right?
Barbary Lion
You don't even need suspense ? As far as I know... It just provides graceful loading, without suspense it'll just take a while then appear. So all you need is to mark the component as 'use client' ? I'm still learning this, so a lot of assumptions being made here. You read params from client components? Suspense just gracefully loads those components
Sweat beeOP
naa the docs say if I use useSearchParams I am said to wrap this component with suspense otherwise everything will be client side until the next suspense boundary, which in my case would be the entire app 😦 So it has to be wrappen by Suspense
Barbary Lion
Interesting... Didn't know that