バックエンドなしでウェブサイトに検索機能を追加する方法

静的サイトやJAMstackアプリケーションを構築したとします。高速で、ホスティングコストが安く、メンテナンスも簡単です。しかし、ユーザーが検索機能を求めてきた場合、「これだけのためにサーバーやデータベースを立ち上げる必要があるのか?」と疑問に思うでしょう。

答えは「いいえ」です。現代的なアプローチを使えば、バックエンドインフラストラクチャなしでクライアントサイド検索を実装でき、サイトを完全に静的なままに保つことができます。このガイドでは、3つの実用的なオプションを紹介します:Pagefindを使った静的サイト検索、ブラウザ内JavaScriptライブラリ、そしてホスト型検索APIソリューションです。

「バックエンドなし」の実際の意味

静的サイト検索やバックエンドなしのクライアントサイド検索について話すとき、それは自分で管理するランタイムサーバーが不要という意味です。サイトはCDNやシンプルなホスティングから配信される静的ファイルの集合のままです。

ただし、ほとんどのアプローチではビルドステップが必要です。デプロイ時に、コンテンツから検索インデックスを生成します。このインデックスはHTMLと一緒に静的ファイルとして配信され、ランタイムでサーバーがクエリを処理することはありません。

検索は、ユーザーのブラウザ内で完全に実行されるか、管理されたサードパーティサービスへのAPI呼び出しを介して行われます。

Pagefind:静的サイトの現代的なデフォルト選択肢

Pagefindは、静的サイトの検索ソリューションとして主流になっています。サイトのビルド後に実行され、HTMLをクロールし、チャンク化された検索インデックスを生成します。

Pagefindの仕組み

1つの大きなインデックスファイルを作成する古いツールとは異なり、Pagefindはインデックスをフラグメントに分割します。ユーザーが検索すると、ブラウザはWeb Workersを介して関連するチャンクのみをダウンロードします。これにより、初期ページロードを高速に保ちながら、数千ページのサイトをサポートできます。

Pagefindには、すぐに使えるUIコンポーネントが含まれており、多言語コンテンツを適切に処理し、Hugo、Eleventy、Astro、またはプレーンHTMLなど、あらゆる静的サイトジェネレーターと連携します。

Pagefindを選ぶべき場合

Pagefindはほとんどの静的サイトに適しています。ドキュメントサイト、ブログ、マーケティングページを、複雑な設定なしで処理できます。トレードオフはビルドステップです:CIパイプラインは、HTMLを生成した後にPagefindを実行する必要があります。

数千ページもあるサイトでも、Pagefindは通常、管理可能なインデックスサイズで良好なパフォーマンスを発揮します。

クライアントサイドライブラリ:Lunr、Fuse、そしてその限界

Pagefind以前は、開発者はLunr.jsやFuse.jsなどのライブラリをよく使用していました。これらは今でも機能しますが、現実的な制約があります。

インデックスサイズの問題

これらのライブラリは、検索インデックス全体をブラウザのメモリにロードする必要があります。小規模なブログであれば問題ありません—おそらく50KB程度です。しかし、大規模なサイトでは、インデックスが数メガバイトに膨れ上がり、モバイルデバイスや低速接続でのパフォーマンスに悪影響を及ぼす可能性があります。

ブラウザ内ライブラリが適している場合

LunrやFuseを検討すべき場合:

• サイトのページ数が数百ページ未満
• ファジーマッチングやカスタムスコアリングロジックが必要
• 外部依存関係をゼロにしたい

それ以上の規模では、Pagefindのチャンク化アプローチやホスト型検索APIの方がユーザーにより良いサービスを提供できます。

ホスト型検索API:Algoliaとその代替

静的インデックスが提供する機能を超えたもの—タイポ許容、パーソナライゼーション、アナリティクス、または頻繁に更新されるコンテンツのリアルタイムインデックス化—が必要な場合があります。

ホスト型検索の仕組み

Algolia(ドキュメントサイト向けのDocSearchを含む)やOrama Cloudなどのサービスは、検索インフラストラクチャを維持します。コンテンツインデックスをアップロードし、フロントエンドのJavaScriptから彼らのAPIにクエリを送信します。

自分でバックエンドを実行するのではなく、彼らが実行します。サイトは静的なままで、強力な検索機能を獲得できます。

考慮すべきトレードオフ

料金:ほとんどのサービスは使用制限付きの無料プランを提供しています。サイトの成長やトラフィックの増加に応じて料金が発生することが予想されます。

プライバシー:サードパーティスクリプトにはGDPRの影響がある可能性があります。検索クエリは外部サーバーを経由するため、一部のユースケースでは重要な考慮事項です。

ベンダー依存:彼らの稼働時間と継続的なサービスに依存することになります。

大規模サイト、動的コンテンツ、または高度な機能が必要な場合、ホスト型APIはこれらのトレードオフを正当化することが多いです。

適切なアプローチの選択

典型的な静的サイト検索のニーズには、Pagefindから始めましょう。静的インデックスでは対応しきれなくなった場合や、高度な機能が必要になった場合は、ホスト型ソリューションに移行します。

まとめ

バックエンドなしでウェブサイトに検索機能を追加することは、完全に実用的です。Pagefindはほとんどの静的サイトをエレガントに処理し、ブラウザ内ライブラリは小規模プロジェクトに適しており、ホスト型検索APIソリューションは必要に応じてスケールします。

重要なのは、サイトのサイズ、更新頻度、機能要件に合わせて選択することです。ほとんどのJAMstackサイトでは、Pagefindが静的ホスティング設定を損なうことなく、シンプルさと機能性の最良のバランスを提供します。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.