Client-Side Search

Putting aside data indexing operations, which are done on your servers, we recommend that your search operations be done directly on the client side, using JavaScript. This significantly improves your search response time, and reduces the load and traffic on your servers.

Generate search keys

Regarding client side implementations, if there is one thing to remember is to use a Search-Only API key. Your Admin API key is very sensitive: you should never share it with anyone and it must remain confidential.

To generate a search key for a given index, use the SearchClient’s generateSecuredApiKey method.

We recommend storing your search-only API key in your environment variables, or generate a new one using the Clients’ addApiKey method.

1
2
3
4
5
6
7
8
9
10
11
$searchOnlyAPIKey = getenv('ALGOLIA_SEARCH_ONLY_KEY');
$validUntil = time() + 3600;

// Generate a new secured API key
$searchKey = \Algolia\AlgoliaSearch\SearchClient::generateSecuredApiKey(
  $searchOnlyAPIKey,
  [
    'restrictIndices' => $this->searchService->searchableAs(Post::class),
    'validUntil' => $validUntil
  ]
);

You must define the indices you want to be accessible by your key. Feel free to change the validUntil parameter to set a validity period for your key.

Integration with InstantSearch

Now that you know how to generate your secured API keys, you can use them to create your front end view with InstantSearch. Head over the InstantSearch.js documentation to know more about how it works and how to implement it in your front end.

InstantSearch is available for Angular, React, Vue and in a framework-agnostic version.