Wiring the Croct request context into my Hydrogen loaders, is this a lot of plumbing?
standing up a fresh Hydrogen storefront on React Router 7 and adding Croct to it.
my assumption going in was that I would have to construct a Croct instance somewhere central and then thread it through every loader by hand so each route could fetch content. that is a fair amount of boilerplate across a storefront with a lot of routes, and it is easy to get wrong.
is that actually how it works, or is some of that wiring done for me by the setup? trying to figure out how much is manual before I commit to the pattern
2 answers
Almost none of it is manual. I did this same setup on a new storefront last month. When you run the init and it detects a Hydrogen project, the CLI installs the SDK, wires the provider, and sets up the request context for you. After that context.croct is already available in your loaders, so you are not constructing an instance or passing it around by hand.
From there each loader just calls the fetch and returns the content with the rest of its data. Because that resolves on the server inside the loader, the page arrives already personalized and there is nothing to swap on the client.
honestly resolving content right in the loaders was the cleanest headless wiring I have done, the request context was already set up after init so I never touched the plumbing you are worried about.
Once it is running, check the dashboard Integration page. The green "Received traffic in the past 24 hours" indicator is how you confirm the context is actually feeding events, no guessing.
that clears it up, thanks. was bracing for the manual threading and it turns out there is nothing to thread
To add one detail on where things live: the provider the CLI adds sits in your root, so the client side has what it needs, but the piece you actually use in loaders is the request context on the server. You will see context.croct on the loader argument. If you ever add a new route, you do not re-wire anything, the context is already there per request.