Algoliaのフロントエンドの検索UIにはalgoliasearch-liteを使おう🔎

技

2021.12.10

Algolia Advent Calendar 2021の12月15日の記事になります。

AlgoliaのJavaScriptクライアントをnpmでインストールしたり、HTMLでCDNからロードしたりする場合に、algoliasearch-lite というライブラリを見かけたりしたことがある方もいらっしゃるのではないでしょうか？

AlgoliaのJavaScriptのサンプルを見ると👇のように algoliasearch をimportしているものと、

import algoliasearch from 'algoliasearch';

👇のようにalgoliasearch/liteをimportしているものなどがあったります。

import algoliasearch from 'algoliasearch/lite';

HTMLでロードする場合は👇とか、

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script>

<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch.umd.js"></script>

👇といったような形です。

<script type="module">
  import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.esm.browser.js';

  import algoliasearch from 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch.esm.browser.js';
</script>

この lite とそうでないものの違いは何かというと、以下のようになります。

algoliasearch-lite は検索専用のクライアントライブラリで、サポートする機能がsearchだけに制限されているためサイズが小さいというのが特徴です
algoliasearch は全機能が備わっているため、その用途はsearchだけに限らずデータのindexing、分析、オペレーション等の操作を行うことができます

AlgoliaのJavaScriptクライアントはフロントエンド(ブラウザ)とバックエンド(Node.js)のどちらも同じAPIで動くようになっています。これはとても便利なことではありますが、バックエンド(Node.js)においては、Algoliaの権限の強いAPI Keyを使うことになると思うので、その取扱については特にご注意いただければと思います。

ということで、Algoliaのフロントエンドにおける検索UIにはサイズが小さく、用途がsearchに限定されている lite の方をお使いいただければ幸いです。