Backend search with React InstantSearch

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

Frontend versus backend search

Algolia recommends that you use frontend search because:

• It offers a better response speed. Speed alone justifies the choice. Backend search requires two more trips between a user’s browser and Algolia’s servers. This decreases the effectiveness of Algolia’s engine and infrastructure optimizations.
• UI libraries aid development. Algolia’s UI libraries (InstantSearch, Autocomplete, and Recommend) help build a frontend solution so that you can focus on configuring relevance and creating the best possible search experience.
• It frees up your resources. Algolia reduces the need for development and eliminates the requirement for additional server deployments and its associated infrastructure.

Why backend search?

• Server-side pre-processing. Perhaps the most important reason for a backend solution is to make complex calculations or format your data before displaying the results.
• Real-time availability updates (like Airbnb)
• In some situations, SEO is easier to manage.

How to implement backend search

You only need a few lines of code to send a query to Algolia and receive a response. The response contains everything needed to build your UI.

You can perform backend search with either InstantSearch or an Algolia API client.

Backend InstantSearch

Backend InstantSearch offers a good compromise. You perform the search on your servers, carry out any required pre-processing, and then send your results to InstantSearch’s widgets. This enables you to control the query and response but saves you the work of building a custom frontend.

Backend search with an Algolia API client

This option requires a server-side solution and custom frontend development. You manage all queries and responses, and you build the frontend UI. You need to parse the API response: a JSON object. The response includes:

• Results already formatted for display (full record content, embedded HTML, image URLs, and so on).
• Highlighting and snippeting
• Pagination.