You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
The text was updated successfully, but these errors were encountered:
@jplhomer Hey! Do you have a sense of when you expect this bug to be fixed? It isn't a blocker for Website Platform this week but we will need this done for a release we have next Thursday.
@karissagenovese I do not unfortunately. Can you tell me more about what this would be blocking? This hydration issue affects initial SSR page loads and reverts to client-side rendering (which is fine). Short of a console warning, I'm curious what else this affects.
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
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
The text was updated successfully, but these errors were encountered: