why every client component is wrapped by Suspense

[nabildroid]

many places where the page or layout is server side rendered, and it uses a client component, the client component is wrapped by Suspense

in product/[handle]

<Suspense
              fallback={
                <div className="relative bg-red-900 aspect-square h-full max-h-[550px] w-full overflow-hidden" />
              }
            >
              <Gallery
                images={product.images.slice(0, 5).map((image: Image) => ({
                  src: image.url,
                  altText: image.altText
                }))}
              />
            </Suspense>
          </div>

          <div className="basis-full lg:basis-2/6">
            <Suspense fallback={null}>
              <ProductDescription product={product} />
            </Suspense>
          </div>

<div className="hidden justify-center md:flex md:w-1/3">
          <Suspense fallback={<SearchSkeleton />}>
            <Search />
          </Suspense>
        </div>

i asked v0 and told me is mistake ?

[astrodomas]

<Gallery /> component uses useProduct hook. This hook uses ProductContext. However, to create the ProductContext - the ProductProvider function uses useSearchParams. As NextJS app router is using server-centric routing this means, that when you call useSearchParams, it will call the server. As per docs, it is mandatory to wrap useSearchParams in the Suspense boundary.

useSearchParams usage can be found here - https://github.com/vercel/commerce/blob/main/components/product/product-context.tsx . useProduct is also exported here.