Instant Search SSR fetches data on server and client

Bug 🐞

What is the current behavior?

TL;DR: Algolia SSR setup results in duplicate queries, one on the server side and another on the client side.

When Algolia data is fetched on the server side, I write it to window.__ALGOLIA_STATE__:

context.algoliaState = instantsearch.getState();

Then, on the client side, I hydrate from that in-page state:

instantsearch.hydrate(window.__ALGOLIA_STATE__);

The data is properly fetched on the server side, and I see a populated window.__ALGOLIA_STATE__ variable in the server response. But when the application boots up on the client side, I see an Algolia query execute. This doesn’t seem like the expected behavior.

Make a sandbox with the current behavior

You can see this behavior when using the Algolia Vue InstantSearch server-side-rendering demo project

After seeing this behavior in my local environment, I pulled that project down to verify the behavior.

I used the current version of Vue, SSR, etc., but upgraded algoliasearch and vue-instantsearch to their current versions.

What is the expected behavior?

There would be no client-side query on a fresh page load because the data would be hydrated from the server side.

Does this happen only in specific situations?

No.

What is the proposed solution?

When hydrating from server side, do not run a duplicate query.

What is the version you are using?

• algoliasearch: 4.0.3
• vue-instantsearch: 2.7.0

Always try the latest one before opening an issue.

[gwardwell]

@Haroenv Thanks for the response and explanation.

What’s preventing Vue InstantSearch from looking at window. __ALGOLIA_STATE__ in a similar way too how you’re handling hydration in React InstantSearch? Or utilizing the Vue plugin architecture to control state server side caching and client side hydration like @Akryum does with Vue CLI Plugin Apollo?

My big concern is that we’ll get a server/client DOM mismatch from loading the data twice. Is the client side hydration accomplishing anything? Or should instantsearch.hydrate(window.__ALGOLIA_STATE__); be removed from my code?

[francoischalifour]

Is there a way to manually hydrate the cache until a fix from Algolia comes along?

Assuming you’re using algoliasearch v4, you can read more on our cache section.

The duplicate (client side) request causes more data over the wire and artificially inflates the number of Algolia queries the website makes. I suppose since Algolia pricing is based on query count, this isn’t such a bad thing for Algolia! 😉

That’s a heavy statement. That’s definitely not our team’s intention; our libraries aim at minimizing the cost while providing complete search features. Sometimes, these optimizations come after other features that need to be shipped faster.

It wasn’t prioritized enough yet because we want to solve this duplicate request issue at a generic level by providing a SSR API shared among all InstantSearch flavors (InstantSearch.js, Vue InstantSearch, React InstantSearch and Angular InstantSearch). In the meantime though, we should write a guide available on our documentation to help users avoid this second request.