Before we go through the steps for adding search to your Gatsby website, let’s examine the components needed for adding search to a website.
There are three required components for adding search to your Gatsby website:
The search index is a copy of your data stored in a search-friendly format. An index is for optimizing speed and performance when executing a search query. Without an index, every search would need to scan every page in your site—which quickly becomes inefficient.
The search engine takes a search query, runs it through the search index, and returns any matching documents.
The UI component provides an interface to the user, which allows them to write search queries and view the results of each query.
Now that you know the three required components, there are a few ways to approach adding search to your Gatsby-powered site.
Using an open source search engine is always free and allows you to enable offline search for your site. Note that you need to be careful with offline search because the entire search index has to be brought into the client, which can affect the bundle size significantly.
Doing so will require you to create a search index when your site is built. For
elesticlunr, there is a plugin called
gatsby-plugin-elasticlunr-search that creates a search index automatically.
For other libraries, you can use a combination of
sourceNodes from the Gatsby node API to create the search index and make it available in GraphQL. For more info on how to do this check out
gatsby-plugin-elasticlunr-search’s source code.
After building the search index and including it in Gatsby’s data layer, you will need to allow the user to search your website. This is typically done by using a text input to capture the search query, then using one of the libraries mentioned above to retrieve the desired document(s).
Another option is to use an external search engine. This solution is much more scalable as visitors to your site don’t have to download your entire search index (which becomes very large as your site grows) in order to search your site. The trade-off is you’ll need to pay for hosting the search engine or pay for a commercial search service.
There are many available both open source that you can host yourself and commercial hosted options.
- ElasticSearch — OSS and has commercial hosting available
- Solr — OSS and has commercial hosting available
- Algolia — Commercial
If you’re building a documentation website you can use Algolia’s DocSearch feature. It will automatically create a search index from the content of your pages.
If your website does not qualify as documentation, you need to collect the search index at build time and upload it using
When using Algolia, they host the search index and search engine for you. Your search queries will be sent to their servers which will respond with any results. You’ll need to implement your own UI; Algolia provides a React library which may have components you’d like to use.
Elasticsearch has several React component libraries for search e.g. https://github.com/appbaseio/reactivesearch