ルーティングによる検索

概要#

TwitterやYouTube、Googleなどの検索では検索に使われるキーワードや条件がURLにクエリーパラメータとして付与されます。たとえば React というキーワードでGoogle検索した場合、以下のようなURLに遷移します。

https://www.google.com/search?q=react

これによりこのURLにアクセすることで常に同じキーワードの検索結果を表示することができます。このクエリーパラメータに基づいて検索結果を表示する実装は現在主流となっています。

したがって検索結果の表示は以下のフローで行われます。

1. 検索フォームに入力して検索ボタンをクリック
2. クエリーパラメータ付きのURLに遷移
3. クエリーパラメータに基づいて検索結果を表示

実装#

検索条件をクエリパラメーターに反映する#

const Home = () => {
  const router = useRouter();

  const updateQueryParams = (state: SearchState) => {
    router.push(
      {
        query: {
          q: state.query || [],
          hitsPerPage: state.hitsPerPage || [],
          page: state.page || [],
          sortBy: state.sortBy || [],
          ...state.refinementList,
        },
      },
      undefined,
      {
        shallow: true,
      }
    );
  };
  
  return (
      <InstantSearch
        onSearchStateChange={updateQueryParams}
        searchClient={searchClient}
        indexName="dev_users_desc"
      >...</InstantSearch>
  );
}

InstantSearch の onSearchStateChange は検索条件が変更されるたびに実行されます。そのタイミングで Next.js の router を使ってクエリパラメーターつきのURLに遷移しています。shallow を true にすることでページを置き換えずにURLの変更のみをおこなっています。

クエリパラメーターを検索条件に適用する#

各ウィジェットの defaultRefinement にクエリパラメーターの値をセットします。

一例
// 検索ボックス
<CustomSearchBox defaultRefinement={router.query.q as string} />

// ページング
<CustomPagination
  defaultRefinement={Number(router.query.page) || 1}
/>

それぞれの初期値のセットは各ウィジェットのPARSE記事を参照してください。