Getting a client logic during SSR error in my Hydrogen route
I am refactoring a promo banner on our Hydrogen store from a client-fetch pattern to a loader pattern and started getting this during server render:
Error: Client logic cannot run during server-side rendering.The component still calls the client-side SDK method to fetch the slot content, but now it renders on the server as part of the route. What is the right way to structure this? I assumed the SDK would just no-op on the server but apparently not
1 answer
This is a documented problem class for the React, Vue, and Hydrogen SDKs: client-side SDK methods cannot run while a page is being rendered on the server. Client hooks only work after hydration, so calling them from a server-rendered component raises exactly the error you are seeing.
Since you are moving to a loader pattern, finish the move:
- Fetch the slot content inside the route's loader using the request context, and return it as loader data.
- In the component, read the content from the loader data instead of calling the client-side fetch.
- Remove the client-side fetch entirely; keep client hooks only for things that genuinely happen after hydration, such as tracking an interaction.
This also removes the content swap you had with the client-fetch version: the banner arrives already resolved in the server-rendered HTML, so there is nothing to replace on the client.
The Hydrogen SDK integration guide shows the loader-resolved pattern with a fallback in the catch.