ais-state-results component doesn't work with SSR

[Gef]

StateResults.vue relies on listeners which only seem to run clientside. Even if you just inject an empty component with no arguments, the slot placeholder text won't render serverside.

Adding a call to this.renderFn() in the created() hook seems to solve this problem. Not sure if this is the best solution.

[Haroenv]

Can you clarify what you use the stateResults for? Is it to conditionally render other widgets? If you have a sandbox or similar that would be useful.

It's right that in created we could send a call to renderFn, although in many cases the state and results won't yet be available (the network request not having happened yet), thus still causing a mismatch between server and client dom.

Looking forward to see what you're exactly trying to create, so we can see what the best way of resolving is

[Gef]

Hi Haroenv, we have a set of carousels which are conditionally rendered based on number of hits. So if there are no results i.e nbHits is 0 from StateResults for a given keyword then we don't render the carousel.

I don't have a sandbox but this is the basic code in question. overidden-state-results is a copy of the ais-state-results component.

[Haroenv]

Right, that makes sense, so with this override (calling renderFn in created) you have what you expect, or does it still prevent rendering the hits in initial results?

[Gef]

The override ensures the state-results component works serverside and clientside. Without that, the state-results component effectively only works clientside.

This may all be by design, but there is nothing in the documentation to state that and it took a fair amount of debugging to work out what the issue was (hydration errors are my nemisis). Hence the ticket. Even if the change isn't something workable in the core component, if others run into the same issue at least there is a workaround!

[Haroenv]

I've created a PR with your suggestion, thanks for bringing it up! #1156

[Gef]

Perfect, many thanks!