Back-End Search with React InstantSearch
On this page
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.
Front End vs Back End Search
Front End Search - Why is this recommended?
Speed. We could stop there. That alone justifies the choice. Going from a client’s browser to Algolia’s server, and back, is going to be far faster than going from the browser, to your server, to Algolia, back to your server, then back to the browser. It’s not just the cost of 2 additional trips; it also undermines everything Algolia has done to optimize its engine and infrastructure to provide an as-you-type search.
InstantSearch. Given the importance of speed, Algolia does everything to make it easy for you to build a front-end solution. Additionally, Algolia wants you to get started as quickly as possible, to allow you to focus on configuring relevance and building the best possible search experience. Therefore, Algolia has developed an entire front-end solution for you: InstantSearch.
Eliminating your own resources from the process. Not only do you free up your servers and overall infrastructure, your team will have less to do.
Then, Why Back End Search?
- Server-side pre-processing: Perhaps the most important reason for a back-end 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 more easily managed.
Doing Back End Search
Only a few lines of code are needed to send a query to Algolia and receive a response. The response contains everything you’ll need to build your UI. You have two options:
- Perform back-end search and use Instant Search on the front end
- Perform back-end search and build your own UI
Option 1: Back End InstantSearch
This option offers you the best compromise. You perform the search on your servers, doing whatever pre-processing you need to do, and then you send your results to InstantSearch’s widgets. This enables you to control the query and response, but saves you the work of building your own front end.
Option 2: Back End search with an API client
This option is a full server-side solution with your own front-end development. You manage all queries and responses, and you build the front end UI. The response from Algolia contains everything you need to build your UI: Displaying results (hits) is as simple as parsing the response, which is a JSON object.
- The hits contain all the display-relevant information you had put in your index.
- The hits are already formatted for display (full record content, embedded HTML, image URLs, etc.).
- All highlighting and snippeting is managed by Algolia and present in each hit.
- Pagination is also managed by Algolia.