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:
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 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.
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.
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 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 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:
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 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.
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:
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:
Learn more →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 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 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:
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.
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 |
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:
Thanks for reading!
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Angular’s two-way data binding has evolved with signals, offering improved performance, simpler syntax, and better type inference.
Fix sticky positioning issues in CSS, from missing offsets to overflow conflicts in flex, grid, and container height constraints.
From basic syntax and advanced techniques to practical applications and error handling, here’s how to use node-cron.
The Angular tree view can be hard to get right, but once you understand it, it can be quite a powerful visual representation.
