search

algolia / vue-instantsearch

👀 Algolia components for building search UIs with Vue.js
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue
MIT License
854 stars 157 forks source link

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

Closed Gef closed 1 year ago

Gef commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.

image

Haroenv commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

I've created a PR with your suggestion, thanks for bringing it up! https://github.com/algolia/vue-instantsearch/pull/1156

Gef commented 1 year ago

Perfect, many thanks!