Migrating from Algolia to Headband

Why migrate?

Four reasons we hear over and over:

The 3-step migration

npm i @headband/react

Side-by-side: SearchBox + Hits

import algoliasearch from 'algoliasearch/lite';
import {
  InstantSearch, SearchBox, Hits
} from 'react-instantsearch';

const searchClient = algoliasearch(
  'APP_ID', 'SEARCH_KEY'
);

function App() {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="products"
    >
      <SearchBox />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

import { headband } from '@headband/react';
import {
  HeadbandSearch, SearchBox, Hits
} from '@headband/react';

const searchClient = headband({
  url: 'https://api.headband.dev',
  apiKey: 'YOUR_HEADBAND_KEY',
});

function App() {
  return (
    <HeadbandSearch
      searchClient={searchClient}
      indexName="products"
    >
      <SearchBox />
      <Hits hitComponent={Hit} />
    </HeadbandSearch>
  );
}

That's it. The Hit component is unchanged. Your CSS selectors are unchanged. Most of your refinement components will work without modification.

Feature mapping

What doesn't migrate yet

Being honest: Algolia has spent ten years building features that aren't a weekend port.

If any of these are critical to your business right now, stay on Algolia for those features and migrate the rest. Headband is happy to be one of several layers in your stack.

Cost comparison

For a representative mid-size catalog (~500k records, ~2M monthly search operations):

The point isn't that we're always cheaper -- for small workloads Algolia's free tier is fine. The point is that Headband's price doesn't escalate with success, because it isn't priced per search.

Next steps