CartProvider causes SSR warning in the terminal

[jeremyagabriel]

What is the location of your example repository?

No response

Which package or tool is having this issue?

hydrogen-react

What version of that package or tool are you using?

2024.10.0

What version of Remix are you using?

2.15.0

Steps to Reproduce

1. Wrap the root's layout with ShopifyProvider and CartProvider from @shopify/hydrogen-react
2. Run npm run dev and observe warning in terminal

Expected Behavior

Expected behavior is that there is no SSR warning in the terminal.

Actual Behavior

Actual behavior is this warning in the terminal every time the server loads or reloads:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at CartProvider (/Users/...)
at ShopifyProvider (/Users/..)
...

[willmclellarn]

Following...

[wizardlyhel]

You shouldn't be using the CartProvider and the ShopifyProvider from hydrogen-react package if you are using Hydrogen generated template.

You should have access to the cart from the root loader.

const data = useRouteLoaderData<RootLoader>('root');
// data.cart - deferred data

or have it available from the loader like in our template: https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/routes/cart.tsx#L96-L110

If you need the cart object be available as a provider, put it in a normal React provider. Don't use hydrogen-react's CartProvider. This cart provider is a full client-side cart implementation.

[jeremyagabriel]

Thanks for the reply Helen! I'm not sure what you mean by Hydrogen generated template. Our templates are custom and the client side cart, and not the server cart, is intentional. Our platform requires the use of a client side cart while editing content. This code is being used in several active storefronts. Is the solution to this error to ignore it indefinitely? Can it not be investigated? Why is the automatic solution to not even use the package?

[wizardlyhel]

Hydrogen generated templates - project generated when using npm create @shopify/hydrogen@latest. build on top of Remix.

If client side side is intentional. Then make sure, whatever JS framework you are using, doesn't render the <CartProvider> when server rendering. For example, if using NextJS, then you need to ensure to wrap the <CartProvider> in a component and use the use client directive on that file.

I don't recommend ignoring the error because it would mean that your SSR render doesn't match when hydrated on the client side and thus losing all benefits of SSR rendering because client side would have to re-render anyways.

[jeremyagabriel]

Thanks for the reply! We are still using Remix for reference. Wouldn't making CartProvider client side only then render the majority of our codebase (i.e. the children) as client side too? Thus eliminating the server side rendering altogether? Aside of course what's outside the provider.

[wizardlyhel]

Again .. that depends on how the JS framework decides to render it.

As for Remix, wrapping children in a provider won't make the children all client side render. If you wrap it in a <Suspense>, then yes, it will be all client rendered.

A quick test you can do is to check the raw html response on a full reload and see if the children rendered properly.

A SSR'ed provider is simply a wrapper with a default context. Only after it reaches the client-side, it will execute the client-side effects like useEffect.

The error you have on useLayoutEffect, this is not in the hydrogen codebase so that means it is somewhere in your code base or other libraries that somehow stack chain to the <CartProvider>. Make sure that useLayoutEffect isn't run on the server side. You can prevent it by checking for existence of window.

[jeremyagabriel]

Got it thank you! I didn't realize you could make one component client side but leave its children as server side.
Though useLayoutEffect is not used within our codebase; I can get the same warning in the terminal if I add CartProvider to the Hydrogen demo store. Possibly, a library shared between our codebase and the demo store. Either way, I'll just client side the cart provider. Thank you!

[jeremyagabriel]

Upon initial implementation this doesn't work because if CartProvider is client side only, then every use of the useCart hook would break the build on the server since that hook would not exist. To make every instance where useCart is used as also client side only would not be ideal and very cumbersome. If I instead create my own useCart that returns static data on the server, but returns the return from Hydrogen's useCart client side, I would still get hydration errors.

[wizardlyhel]

Try this doc: https://shopify.dev/docs/storefronts/headless/hydrogen/cart/render-client-side

Note: there is a bug in the useEffect that I haven't found the chance to fix yet.

That guide goes over creating a cart provider in Remix but the cart query operations still exists on the server side