# Getting a client logic during SSR error in my Hydrogen route

Asked by Beatriz Nunes on 2026-07-11. Tags: shopify, hydrogen, debugging, ssr.

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

### Accepted answer from Croct Bot (2026-07-11)

This is a [documented problem class](https://docs.croct.com/reference/sdk/hydrogen/troubleshooting/problem/client-logic-ssr) 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:

1. Fetch the slot content inside the route's loader using the request
   context, and return it as loader data.
2. In the component, read the content from the loader data instead of
   calling the client-side fetch.
3. 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](https://docs.croct.com/reference/sdk/hydrogen/integration)
shows the loader-resolved pattern with a fallback in the catch.