Batch Recommend requests with Recommend React
The Recommend context provider enables automatic batching of multiple Recommend requests.
Consider using batching if you:
- Use the Recommend React client in your app
- Display multiple Recommend carousels in your pages
- Want to improve performance by reducing the number of HTTP requests sent by the frontend
You’re billed per Recommend request, not per HTTP request. Batching Recommend requests doesn’t imply a cost reduction. For example, 5 HTTP requests for 5 Recommend requests are charged the same as 1 HTTP request for 5 Recommend requests.
Getting started
The following examples assume familiarity with the Recommend React library.
To use the Recommend context provider, first install Algolia Recommend React library version v1.10.0 or later.
1
2
3
yarn add @algolia/recommend-react
# or
npm install @algolia/recommend-react
Once you’ve installed and set up your project, you can use the Recommend context provider.
The following example shows how batching can be enabled by wrapping the Recommend components within the <Recommend /> context provider.
For a more comprehensive list of parameters and options, refer to the API reference.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { FrequentlyBoughtTogether, RelatedProducts, Recommend } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
function Product({ item }) {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}
function App({ currentObjectID }) {
// ...
return (
<Recommend recommendClient={recommendClient} >
<RelatedProducts
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={Product}
/>
<FrequentlyBoughtTogether
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={Product}
/>
</Recommend>
);
}
Mixing batched and non-batched requests
The Recommend context provider is compatible with the standalone behavior of Recommend React components library.
You can wrap any Recommend component within the <Recommend> context provider.
If a component can’t be batched because it’s querying a model on a different Algolia application, you can pass a different instance of the Recommend client to the component.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { FrequentlyBoughtTogether, RelatedProducts, TrendingItems, Recommend } from '@algolia/recommend-react';
import recommend from '@algolia/recommend';
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = 'YOUR_INDEX_NAME';
function Product({ item }) {
return (
<pre>
<code>{JSON.stringify(item)}</code>
</pre>
);
}
function App({ currentObjectID }) {
// ...
return (
<Recommend recommendClient={recommendClient} >
<RelatedProducts
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={Product}
/>
<FrequentlyBoughtTogether
indexName={indexName}
objectIDs={[currentObjectID]}
itemComponent={Product}
/>
<TrendingItems
recommendClient={recommendClient2}
indexName={indexName}
itemComponent={TrendingItem}
/>
</Recommend>
<TrendingFacets
recommendClient={recommendClient}
indexName={indexName}
itemComponent={TrendingFacetItem}
facetName={facetName}
/>
);
}
In the preceding example, the Recommend provider batches the recommendations requests of <RelatedProducts /> and <FrequentlyBoughtTogether /> components.
The recommendations request from <TrendingItems /> and < TrendingFacets /> will be executed separately.
If you provide a recommendClient parameter to a component that’s wrapped in the <Recommend /> context provider, the component will be excluded from the batched request.
