Re-render a component in NuxtJS when SSR is used

Hello, we are using vue-instansearch and AisInstantSearchSsr component for an e-shop built with nuxtjs. We are using the example from here => https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/#combining-with-nuxtjs

The thing is that we need to re-render the view explicitly when a query param changes in the URL. This query param is not sth controlled by vue-instantsearch.

We have managed to listen for this change inside vue component, then make a new query with instantsearch.findResultsState and finally update the local state with { algoliaState: instantsearch.getState() } in asyncData.

We see updated data coming from API but the view doesn’t re-render no matter what. We tried with instantsearch.hydrate(this.algoliaState) without any result. It seems that this is working only for the very first rendering of the component. Any clue? Thanks for reading this

1 Like

This query param is not sth controlled by vue-instantsearch.

This seems to be the reason why it’s hard to sync with Vue InstantSearch.

hydrate indeed works only on the initial render.

A solution would be to listen to router changes and sync those with InstantSearch via a ais-configure widget for instance. However, this will conflict with the next search interactions. Note that Vue InstantSearch will soon support a controlled mode where you’ll be able to manage which UI state to inject at any time.

Would you be able to describe what kind of query parameters you’re trying to sync with Vue InstantSearch? Perhaps there’s a way to plug it within the library lifecycle.

Hi! Any ideas when the “controlled mode” will be available?

@ianfortier It’ll be out next week in InstantSearch.js 4, and available from Vue InstantSearch 3 (no ETA yet).

Awesome news!! Thanks :+1: