SolidJS•2y ago

Different suspense boundaries between client and server

During my work I noticed that by using only one global suspense boundary, many components unnecessarily rerender on the server. Wrapping the components with Suspense boundaries would reduce the amount of rerenders on the server. But adding these extra suspense boundaries impacts the client side navigation experience. What I'd like to do is to create different suspense boundaries depending if I am on the client or on the server, like so:

<Show when={isServer} fallback={<BlueprintComponent />}>
  <Suspense>
    <BlueprintComponent />
  </Suspense>
</Show>

<Show when={isServer} fallback={<BlueprintComponent />}>
  <Suspense>
    <BlueprintComponent />
  </Suspense>
</Show>

Sadly this pattern results in hydration mismatches 😁 . Thank you in advance for any ideas and feedback!

9 Replies

Alex Lohr•2y ago

Suspense should have an optional disable attribute to simplify such a thing, then you could use disable={isServer}. I guess you could try to disable server fetching of resources?

Katja (katywings)OP•2y ago

If I disable the server fetching on the resources I loose ssr, not an optimal trade-off 😆

Suspense should have an optional disable attribute to simplify such a thing

That would be very useful!

thetarnav•2y ago

Is it because of Suspense, or simply because of doing control flow with isServer? Like you want to have the same condition result in server and client to avoid mismatches

thetarnav•2y ago

What if you tried using isHydrated instead? https://primitives.solidjs.community/package/lifecycle#ishydrated

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

Katja (katywings)OP•2y ago

The mismatch is because of the isServer control flow. isHydrated looks very handy 😮! But I dont think it helps me in my quest to reduce component rerenders during ssr 😅.

high1•2y ago

Component rerenders during SSR? How could that be happening?

thetarnav•2y ago

Suspense boundaries rerun children when their state changes. Because there is no reactivity on the server and you have to first run the children to “catch” resource reads

high1•2y ago

Makes sense. What would be the purpose of Suspense on server? Is it possible to render the first html, and update it after suspense resolves, and then continue client side?

thetarnav•2y ago

depends on the rendering mode I guess sync will stop at any triggered suspense and just send what it can async will wait for all boundaries, re-rendering components in the process and streaming will send what it can first, fetch, resolve, rerun, send another chunk

Gaming

Programming

Different suspense boundaries between client and server