Suspense and client components

Unanswered

PepeW posted this in #help-forum

PepeWOP

2023-12-11T10:57:20.000Z

I'm working on a product page. The logic is the following:

// page.ts
export default async function ProductPage({ params }: { params: { productSlug: string } }) {
// api call to get the product
  return <ProductWrapper product={product} />
)

// loading.ts
export default async function Loading() {
  return <Skeleton />
)

// ProductWrapper.tsx
"use client"
export function ProductWrapper({ product }: ProductWrapperProps) {
  return (
    <div>
      {/* some components */}
      <Suspense fallback={<p>loading</p>}>
        <ProductVariantSelector
          product={product}
        />
      </Suspense>
    </div>
  )
)

// ProductVariantSelector.tsx
"use client"
export function ProductVariantSelector({ product }: ProductVariantSelectorProps) {
// a lot of computations to transform the product variants into a list of options
// the computation in not async (just some map(), filters(), reduce(), etc.)
  return (
    <ProductOptions options={options} />
  )
)

Here's the setup.

Now my question is regarding rendering and suspense.

According to me the rendering should happen this way:
1. the loading.ts is displayed while the product api call is being made
2. then, the ProductWrapper.tsx is rendered execpt the ProductVariantSelector.tsx (instead the fallback is displayed)
3. after that the computation is done, ProductVariantSelector.tsx is rendered.

But in fact this is not happening this way.
The loading.ts is working fine however the Suspense is not (the fallback is not displayed)

67 Replies

PepeWOP

2023-12-11T13:07:12.000Z

Alfonsus Ardani

2023-12-11T13:18:08.000Z

where is the product api being called?

PepeWOP

2023-12-11T13:19:47.000Z

that's a graphql request to my backend

Alfonsus Ardani

2023-12-11T13:21:29.000Z

yes but at which component

PepeWOP

2023-12-11T13:22:40.000Z

ProductPage in page.ts (there is a comment)

Alfonsus Ardani

2023-12-11T13:23:09.000Z

oh my bad

PepeWOP

2023-12-11T13:23:18.000Z

Alfonsus Ardani

2023-12-11T13:23:23.000Z

where is the loading.ts located?

at same level of page.tsx?

PepeWOP

2023-12-11T13:23:34.000Z

right next to the page

Alfonsus Ardani

2023-12-11T13:24:11.000Z

The fall back is not displayed because the one thats doing the async operation is ProductPage not ProductVariantSelector

if you want the suspense to work, there has to be async operation being awaited in side any component inside <Suspense>

PepeWOP

2023-12-11T13:24:49.000Z

aah ok !

So <Suspense /> only works with async operations

Alfonsus Ardani

2023-12-11T13:25:33.000Z

Generally yes. I havent fully explored any other unique use cases though

but thats how it works

PepeWOP

2023-12-11T13:25:52.000Z

And it could be a server or client component, if there is a async operation the <Suspense /> will work right ?

Alfonsus Ardani

2023-12-11T13:26:05.000Z

well, client component can't be async

so it has to be a server component

PepeWOP

2023-12-11T13:26:41.000Z

Let's say I have a useQuery() inside my cleint component

It would not work because the component itselft as to be async ?

Alfonsus Ardani

2023-12-11T13:27:41.000Z

useQuery is a client-side hook

client-side can't be async

therefore you can use useQuery in client component

its already irrelevant to Suspense because we're talking about something that is already in the scope of Client Component

PepeWOP

2023-12-11T13:28:39.000Z

Ok I understand

So in my case I want to render my ProductWrapper without waiting for the ProductVariantSelector to do its computation so how coud I do that ?

Alfonsus Ardani

2023-12-11T13:29:42.000Z

You may use Suspense with Client Component but afaik it has nothing to do with useQuery

unless you enable suspense in useQuery

https://tanstack.com/query/v4/docs/react/guides/suspense

Its just that the use of Suspense in client component is a bit uncommon

its outside of the scope of what im able to explain to you

// page.tsx
export default function ProductPage({ params }: { params: { productSlug: string } }) {
  return <div>
      {/* some CLIENT components */}
      <Suspense fallback={<p>loading</p>}>
        <ProductVariantSelector/>
      </Suspense>
    </div>
)
// still on the same page.tsx
function ProductVariantSelector(){
  // Api CALL to get the product
  return (
    <ProductVariantSelectorClient product={product}>
  )
}

PepeWOP

2023-12-11T13:38:32.000Z

Ok I see what you did but my question is not about the product. In fact I need it inside ProductWrapper.

In my question I added a comment inside ProductVariantSelector saying that it's doing a lot of computations (map(), filter(), reduce(), etc).
This computation can take up to 8sec (in the worst scenarios) so I would like not to wait for this component to render the page.

My initial solution was to use the Suspense but like you explained it doesn't work for client components.
So my question is: Is there a way to differ the render of this component so the rest of the page do not wait for it ?

Alfonsus Ardani

2023-12-11T13:41:01.000Z

do you want Product Page to render as soon as fetch finishes happen or before fetch finished responding?

PepeWOP

2023-12-11T13:45:08.000Z

I want to keep the loading.ts and the api call inside the page, that behaviour is working as I want

Alfonsus Ardani

2023-12-11T13:45:35.000Z

well, afaik you dont need <suspense> then

just conditionally render in the client side using useQuery :D

PepeWOP

2023-12-11T13:45:52.000Z

However I want my ProductWrapper to render without wait for ProductVariantSelector

I know that Suspense is useless now

Alfonsus Ardani

2023-12-11T13:46:59.000Z

https://tkdodo.eu/blog/status-checks-in-react-query#the-standard-example

its not that fully useless, you can use it but its still fairly new

i recommend doing whats written in the blog since its more intuitive :D

PepeWOP

2023-12-11T13:56:54.000Z

There is a mismatch between what I'm trying to achieve and what you're explaining ^^
I'll try to be as clear as possible.

I'm not using any useQuery().
The product api call is looking something like this: const product = await productGraphqlRequest(productSlug).
My problem is not about this api call and the loading.ts. This part is working as expected.

My question is about the render of ProductVariantSelector.
This component is doing a lot of computation (map(), filter, reduce(), etc) that can take up to 8sec.
So I don't want to wait for this component when rendering ProductWrapper.

My original solution was doing:

javascript 
// ProductWrapper.tsx
"use client"
export function ProductWrapper({ product }: ProductWrapperProps) {
  return (
    <div>
      {/* some components */}
      <Suspense fallback={<p>loading</p>}>
        <ProductVariantSelector
          product={product}
        />
      </Suspense>
    </div>
  )
)

But as you explained, doing a <Suspense /> in this scenario is useless.

So my question is: How can I render ProductWrapper and all its components without waiting for ProductVariantSelector (and it's computation) ?

Alfonsus Ardani

2023-12-11T13:58:57.000Z

depends on where you want the computation to happen

do you want the computation to happen in the server or in the client?

PepeWOP

2023-12-11T13:59:35.000Z

I want my computation to stay inside ProductVariantSelector

I've been reading a lot of the doc while speaking.

Is next/dynamic a good solution ?

Doing something like this:

const ProductVariantSelector = dynamic(
  () =>
    import("../features/product/ProductVariantSelector").then((mod) => mod.ProductVariantSelector),
  {
    loading: () => <p>Loading...</p>,
    ssr: false,
  }
)

Alfonsus Ardani

2023-12-11T14:02:54.000Z

the solution isnt limited to react query. However, you can implement what react query do with raw js. use query just makes your live easier without needing to worry about recomputing at component re-mount

const [finished, setFinished] = useState(false)
const [data, setData] = useState(null)
useEffect(()=>{
  async function compute(){
    const data = await expensiveComputationData(params.product)
    setData(data)
    setFinished(true)
  }
  compute()
},[])

if(!finished) return <>Loading... </>

else{
  return <>{data}</>
}

<Suspense> would probably make the code tidier but i havent tried that approach.
and i dont think its the right use case for dynamic()

PepeWOP

2023-12-11T14:05:04.000Z

Hmmm ok

You did this: const data = await expensiveComputationData(params.product)

But the computation is not async

Just a bunch of filter(), map(), reduce(), etc

to transform the data

Alfonsus Ardani

2023-12-11T14:06:38.000Z

then make promise :D

PepeWOP

2023-12-11T14:08:35.000Z

Ok I'll try

And out of curiosity why do you think that dynamic import is not the right use case ?

Because after trying it works as expected

I can the see page except ProductVariantSelector (only its fallback) and after some time it renders

Alfonsus Ardani

2023-12-11T14:10:03.000Z

its for lazy loading. are you sure the computation are still done in the browser?

PepeWOP

2023-12-11T14:10:55.000Z

Yes because it's working

Alfonsus Ardani

2023-12-11T14:16:13.000Z

hmmm

might want to checkout next/dynamic again then

especially its use with Suspense

PepeWOP

2023-12-11T14:16:55.000Z

I've remove the Suspense around ProductVariantSelector

Alfonsus Ardani

2023-12-11T14:17:07.000Z

oh i meant the loading attribute, my bad