Backend Search with React InstantSearch
Frontend vs backend search
Why is frontend search recommended?
Speed. Speed 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 frontend 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 frontend 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.
Why backend search?
- Server-side preprocessing: 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 more easily managed.
Doing backend 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 backend search and use InstantSearch on the frontend
- Perform backend search and build your own UI
Option 1: backend 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 frontend.
Option 2: Backend search with an API client
This option is a full server-side solution with your own frontend development. You manage all queries and responses, and you build the frontend 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.