Note here for the future: we need to figure out how this would work with out-of-order hydration. Suspense and ErrorBoundary are even more critical than context. I.e., if we hydrate a children component that throws (an error or a promise) before we hydrate the parent component that catches it (with ErrorBoundary or Suspense) the system may not work as expected.

I'm afraid the Suspense component is not working correctly; it fails during hydration. 😬

Let's say we render the fallback during save(). That's what toVdom() will transform into the initial vDOM.

So, this JSX

<Suspense fallback={<div>Loading...</div>}>
    <LazyParagraph>Hello!</LazyParagraph>
</Suspense>

produces this HTML.

<div>Loading...</div>

Then, when Suspense is hydrated, we have two cases:

1. the lazy loaded component is still being loaded and cannot be rendered; it renders fallback, and so children once the component is ready.
2. the lazy loaded component is ready and renders children right away.

Surprisingly, the fallback is preserved in both cases when children is rendered.

<p>Hello!</p>
<div>Loading...</div>

I'll look deeper later to see if we can make this work.

It turns out that Suspense is not rendering the fallback during hydration. 😕

It does, though, if Suspense is rendered after hydration (e.g., using useEffect() to update some state)...

I've tested this in isolation, and even though I can't make Suspense work with preact-render-to-string (I'm not sure it supports it), it works fine when I create the SSR manually: https://codesandbox.io/s/sad-poincare-zzrql8?file=/src/index.js

I'm not sure what we are doing differently here.

I'm not sure if I'm doing something wrong, but in isolation, I'm not getting the same behavior with Preact's Suspense as with React's Suspense.

@DAreRodz and I were able to reproduce the same behavior on Preact, so it's not something we are doing wrong: https://stackblitz.com/edit/vitejs-vite-r6rhtx?file=src%2Fmain.jsx

It looks like Suspense in Preact is still a bit buggy (it's still an experimental API).

I've removed the Suspense example. We can merge the useErrorBoundary one and try again with Suspense once the API is more stable.