Written by Saleh Mubashar✏️
In the highly competitive field of ecommerce, every click matters. A good search experience plays an important role in this. In this article, I will discuss four tools for implementing search functionalities in a React frontend. The tools include:
- Algolia
- Typesense
- Meilisearch
- Elasticsearch
We will explore key features that every search tool should have, such as auto-complete suggestions, typo tolerance, real-time results, and more. While these tools offer diverse ecommerce solutions beyond search, our focus will be on their search capabilities.
Algolia
Algolia is one of the most popular hosted search engines, offering multiple solutions in the ecommerce field. It integrates seamlessly with major frameworks, libraries, and platforms like Shopify and WordPress.
Algolia provides API clients for various programming languages and platforms, along with pre-built UI components and libraries for direct integration.
Algolia features
- Instant search: Algolia offers InstantSearch libraries for most frameworks and libraries, allowing users to search as they type, as well as the option to filter and sort results
- Auto-complete: Algolia provides an open source JavaScript library for building auto-complete search components. It also provides a recommendation library that works with its API client
- Latest AI tools: With Algolia, you gain access to NeuralSearch, which allows the engine to understand natural language and deliver relevant results
- Typo tolerance: Algolia's search engine can handle typos, as well as offering parameters to adjust the level of tolerance
- Relevance tuning: You can fine-tune the relevance of search results so that the most relevant items are displayed first
Algolia pricing
A big drawback of third-party tools like Algolia is that the cost of searching and indexing can escalate as your application scales. However, Algolia offers a decent free tier, sufficient for getting started.
The free tier includes 10k search requests per month and up to a million records. However, certain advanced features, such as AI capabilities, are accessible only through premium plans. Additional requests cost $0.50 per 1k requests and $0.40 per additional 1k records per month.
Algolia demo
Now, let’s create a simple search field using Algolia in React. For this, we can use React InstantSearch, an open source React library that uses Algolia’s search API to create search functionalities. The library contains pre-built widgets such as InstantSearch, AutoComplete, GeoSearch (to search for locations), and ecommerce-specific options like sorting and filtering.
The InstantSearch component is the root provider of all widgets and hooks. You need to pass it the indexName, which is your search UI’s main index, and the searchClient, which is an object containing your application ID and search API key. For this demo, I will use the keys and index provided in the official docs.
Within the InstantSearch component, you can add multiple different widgets. For this example, I am adding a simple SearchBox widget. Next, we can use the Hits component to display the results. The complete demo and code can be seen in this CodeSandbox example.
Typesense
Typesense presents itself as an open source and easy-to-use alternative to Algolia. It offers many similar search features, but Typesense lacks the extensive suite of tools beyond search functionalities that Algolia provides.
Typesense is a lightweight engine, resulting in better performance, but this means that it is only truly optimized for smaller datasets.
Typesense can either be self-hosted or run on the Typesense cloud. It provides client libraries for JavaScript, Python, PHP, and Ruby, while community-maintained client libraries are available for other languages and ecosystems. Like Algolia, Typesense supports all the major ecommerce platforms, CMSs, and frameworks.
Typesense features
- Autocomplete and search-as-you-type, similar to those in Algolia
- Out-of-the-box typo tolerance and handling, as well as all the basic features like tuneable search rankings, filtering, and sorting and grouping data
- Integration of major LLMs to provide AI-assisted search features like similarity search, semantic search, visual search, recommendations, etc., using vector search
- Image and voice search. Typesense is the only one of the four tools mentioned in this article that supports image and voice search
- Offers a built-in conversational search feature that allows users to send questions and get responses, based on the data indexed in Typesense
- Emphasis on user privacy. No collection of usage analytics or personal data
Typesense pricing
Typesense is a much more affordable option than Algolia, particularly for smaller-scale applications. It follows a fixed pricing model where users are charged per hour for using the dedicated cluster. The number of searches or queries is not priced:
- The self-hosted version is open source and so, completely free, excluding your infrastructure costs
- A cluster in the cloud-hosted version cost $0.03 per hour, with the first 720 hours free. The outgoing bandwidth costs $0.11 per GB, with the first 10 GBs free
Typesense demo
Now, let’s create a simple search field using Typesense in React. For a search UI using Typesense, you can use the same InstantSearch library created by Algolia. The Typesense Instantsearch Adapter allows you to utilize the core Instantsearch.js library while using the TypeSense API.
Within the InstantSearch library, there are different wrappers for different frameworks. For React, you can use react-instantsearch. You can install all the required packages in your React App using the following command:
npm install --save typesense-instantsearch-adapter react-instantsearch-dom @babel/runtime
The basic widgets, steps, and layouts are exactly like the ones discussed in the Algolia demo. The main difference is in the search client setup. TypesenseInstantSearchAdapter is used to create an adaptor. Your API key and information about the node is specified in the configuration. This search client is then used for the InstantSearch component.
The complete code can be seen below. Keep in mind that you will need to sign up with TypeSense to get the API key, so I will only be providing the code and not the full demo:
import React from "react";
import ReactDOM from "react-dom";
import { SearchBox } from "react-instantsearch-dom";
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
server: {
apiKey: "your-api-key",
nodes: [
{
host: "hostname",
port: "port",
path: "", // Optional.
protocol: "http",
},
],
}
});
const searchClient = typesenseInstantsearchAdapter.searchClient;
const App = () => (
<InstantSearch indexName="products" searchClient={searchClient}>
<SearchBox />
<Hits />
</InstantSearch>
);
Meilisearch
Meilisearch is a relatively new search engine that aims to provide a fast search experience for smaller and simpler applications where performance is the priority. It provides both a self-hosted open source version and a cloud-hosted one.
The platform supports API wrappers and SDKs for all major languages, as well as support for platforms like Firebase and Gatsby. Integrations for popular frontend frameworks are also provided. Meilisearch accepts data in JSON, NDJSON, and CSV formats, allowing you to search through this data via a RESTful API.
Although Meilisearch lacks the variety of features found in larger tools like Algolia, it is excellent for simpler use cases such as a basic search bar or sorting table. Due to its smaller size, Meilisearch is also highly performant.
Meilisearch features
- Built-in typo tolerance
- Search-as-you-type and fast response times
- Support for multiple languages, including Chinese, Japanese, Hebrew, and languages using the Latin alphabet
- Customizable search. You can adjust the relevance of search rankings, apply filters, and highlight certain words
- It provides a Geo Search feature that allows users to sort results based on geographical location
- Cloud-hosted plans provide search analytics, website crawling, and an interface to manage your data
Meilisearch pricing
Like Typesense, Meilisearch is a decently affordable option. Besides its open source version, users have three tiers to choose from in the cloud-hosted version. Keep in mind that most search features are consistent across both versions. However, additional features like analytics and a data management interface are limited to the cloud-hosted version.
The open source version is completely free, but, you will have to self-host it. The cloud-hosted version includes the following plans:
- Build plan: Starts at $30 per month with a 14-day free trial. Includes 100k searches and 1m documents
- Grow plan: Starts at $300 per month. Includes 1m searches and 10m documents
- Enterprise: Custom quote
Meilisearch demo
Now, let’s create a simple search field using Meilisearch in React. Once again, we will use the InstantSearch library by Algolia to create our search field. You can get started by installing react-instantsearch alongside the Meilisearch client using the following command:
npm install react-instantsearch @meilisearch/instant-meilisearch
Next up, you need to create your master key and then use it alongside the hostname to create the searchClient object. This will allow you to connect to the Meilisearch client. The search bar itself will be created exactly how we did in the previous examples. The code will look somewhat like this:
import React from 'react';
import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
const { searchClient } = instantMeiliSearch(
'host',
'masterkey'
);
const App = () => (
<InstantSearch indexName="products" searchClient={searchClient}>
<SearchBox />
<Hits />
</InstantSearch>
);
export default App
You can see the official React example in this CodeSandbox.
Elasticsearch
Elasticsearch is a RESTful search and analytics engine focused on searching through large amounts of data and performing text analysis. Unlike the other tools discussed in this article, Elasticsearch is not primarily focused on frontend development; instead, it is a general search engine designed for handling large datasets.
Elasticsearch offers a wide range of integrations, plugins, and tooling support. Although it is not the easiest to set up, it can be a great option for larger teams. It provides search clients for all major languages and frameworks. However, tools like Algolia, Meilisearch, and Typesense offer better support for ecommerce platforms and CMSs like WordPress, as well as better frontend integrations.
Elasticsearch features
- Ecommerce focused search features such as relevancy and personalized suggestions, along with user insights
- Support for LLM (Large Language Models) with the Elasticsearch Relevance Engine to integrate AI into search applications
- Typo-tolerance is supported, although not as performant as the other tools discussed
- Geospatial search and the ability to search across multiple datasets
- Search features like relevance scoring, sorting, and filtering
- Excellent security features, including password protection, role-based access control, and IP filtering
Elasticsearch pricing
Elasticsearch is one the more pricier options for search functionality tools. As a result, it is often suited for larger applications and companies that have large datasets. Although it has a free self-hosted version, there will be significant infrastructure costs.
For the cloud-hosted version, there are four tiers:
- Standard: $95 per month containing all the core Elastic Stack features, including security
- Gold: $109 per month. Additional features like reporting and multi-stack monitoring
- Platinum: $125 per month. Advanced Elastic Stack security features and machine learning
- Enterprise: $175 per month
Elasticsearch demo
You can create a search application in React using Elastic Search UI, a JavaScript library, with Elastic’s react-search-ui. You can see a cool demo here.
Another common approach is to use the UI components provided by Reactive Search, which is an open source UI components library for React and React Native that works with Elasticsearch backends. You can see a demo here.
Comparing the tools
The differences and pros and cons of each tool can be seen in the table below:
| Algolia | Typesense | Meilisearch | Elasticsearch | |
|---|---|---|---|---|
| Hosting | Cloud-hosted, no self-hosting option. Also, not open source | Self-hosted or cloud-hosted. Open source. | Self-hosted or cloud-hosted. Open source | Self-hosted or cloud-hosted. Open source |
| Pricing model | Free tier; premium plans available | Free open source and self hosted version; cloud-hosted plans | Free open source and self hosted version; cloud-hosted plans | Free open source and self hosted version; expensive cloud-hosted plans |
| Search features | Instant search, autocomplete, typo tolerance | Autocomplete, typo tolerance, Vector search | Typo tolerance, Search-as-you-type, Geo Search | Relevance scoring, Typo tolerance |
| Ecommerce focus | Yes | Yes | Yes | Limited |
| AI features | Only available under paid plans | Semantic search and relevant suggestions | Semantic search, Vector store, and relevant suggestions. | Semantic search, embeddings, and search vectors |
| Performance | High | High | High | Comparatively slower |
| Integration | Major frameworks, libraries, platforms. Largest number of integrations available | Major frameworks, libraries, platforms | Major frameworks, libraries, platforms | Major languages, however lack of support for CMSs and ecommerce platforms |
Use cases
It’s important to consider the specific needs and scale of your application when choosing a search engine for your project. Here are some use cases for the search engines we covered in this article:
- Algolia: Algolia is ideal for large-scale applications where search performance, relevance, and user experience are crucial. It's suitable for ecommerce platforms, marketplaces, and websites where users expect instant and accurate search results. It can be particularly useful when paired with other Algolia tools like analytics
- Typesense: Typesense is well-suited for smaller-scale applications that prioritize simplicity, affordability, and performance. It's suitable for startups, small businesses, or projects with limited resources where self-hosting or a fixed pricing model is preferred. Preferred for ecommerce platforms with large product catalogs and complex queries
- Meilisearch: Meilisearch is best for simpler use cases such as basic search functionalities in websites, blogs, or content management systems. It's suitable for projects where performance is critical, but advanced search features are not required, and cost-effectiveness is important. It is also a good pick for global ecommerce audiences due to its superior language support
- Elasticsearch: Elasticsearch is ideal for large-scale applications and enterprises with massive datasets that require advanced search capabilities, analytics, and scalability. It's suitable for ecommerce platforms, enterprise search solutions, and applications with complex search and robust security requirements
Thanks for reading!
Get set up with LogRocket's modern React error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()must be called client-side, not server-side.
NPM:
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Script Tag:
Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
3.(Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
Top comments (0)