Describe the bug
In the current release branch, pretty much every page has this issue:
I've been able to eliminate this hydration error by wrapping any...
- server components
- ...that suspend
- ...which are passed as children to client components
... with a <Suspense> boundary.
This might be a bug in Hydrogen. This might be a bug in React.
However, I have confirmed with the React team that this behavior is not intended (e.g. you should be able to pass server components to client components as children which suspend without needing a boundary inside the bounds of the client component).
It is very difficult to tell, because we are many experimental releases behind, and a lot of work has gone into how Suspense & Hydration works.
I've attempted to fix this in #907 but I've failed, because something is messing with the E2E tests locally. This fix is not correct, either, because it suspends at the router level with a fallback of null. This causes the page to flash from rendered (SSR) to fallback (RSC) to rendered (RSC). This is not good.
One might impose a rule on Hydrogen developers that they should NOT use useShopQuery or anything that suspends at the top level page server component, but rather provide a Suspense boundary with a fallback which matches their page design and render another component in the same file that does suspend. However, this feels like a weird rule to impose if it's not an actual restriction and just a bug with our implementation.
To Reproduce
- Visit a page in the main branch
Describe the bug
In the current release branch, pretty much every page has this issue:
I've been able to eliminate this hydration error by wrapping any...
... with a
<Suspense>boundary.This might be a bug in Hydrogen. This might be a bug in React.
However, I have confirmed with the React team that this behavior is not intended (e.g. you should be able to pass server components to client components as children which suspend without needing a boundary inside the bounds of the client component).
It is very difficult to tell, because we are many experimental releases behind, and a lot of work has gone into how Suspense & Hydration works.
I've attempted to fix this in #907 but I've failed, because something is messing with the E2E tests locally. This fix is not correct, either, because it suspends at the router level with a fallback of null. This causes the page to flash from rendered (SSR) to fallback (RSC) to rendered (RSC). This is not good.
One might impose a rule on Hydrogen developers that they should NOT use
useShopQueryor anything that suspends at the top level page server component, but rather provide a Suspense boundary with a fallback which matches their page design and render another component in the same file that does suspend. However, this feels like a weird rule to impose if it's not an actual restriction and just a bug with our implementation.To Reproduce