react-async-ssr

react-async-ssr copied to clipboard

If a promise uses NO_SSR option to display fallback on server render, and there is other content within the Suspense boundary, a hydration error is logged to console.error.

The cause is that React on client-side renders content in the Suspense boundary but with style="display: none".

So far, I've not seen any mis-renders due to this, but still it'd be great to find a workaround.

One possible workaround would be to create a replacement Suspense component, which initially renders as a <Suspense>{fallback}</Suspense> and then converts to <Suspense fallback={fallback}>{content}</Suspense> once hydration is finished.

But difficulties with this include:

1. Tracking which Suspense boundaries are suspended and passing that info to client in a way that allows it to correctly suspend the right boundaries (and only them).
2. Possibly state in the fallback component will be lost (treated by React as a new element rather than an update).

Another solution would be to hack React directly.

Either way, tricky!