Use Algolia Recommend with React meta-frameworks

Algolia Recommend React is compatible with the most popular React meta-frameworks, including Next.js, Remix, Gatsby and Astro.

The Recommend React getting started guide provides a useful introduction to this Algolia library. However, the Recommend React package only supports client-side rendering.

For server-side rendering, you must use the Algolia Recommend client and handle the integration yourself.

Next.js

If you’re using Next.js, with:

Pages Router, use Recommend React as in any React app.
App Router, add the "use client" directive at the top of the file.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
// src/app/page.jsx

import FrequentlyBoughtTogether from "./components/FrequentlyBoughtTogether";

export default function MyPage() {
  return (
    <div>
      {/* ... */}
      <FrequentlyBoughtTogether objectID="your_object_id" />
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/app/components/FrequentlyBoughtTogether.jsx
"use client";

import algoliarecommend from "@algolia/recommend";
import { FrequentlyBoughtTogether } from "@algolia/recommend-react";

const recommendClient = algoliarecommend('YourApplicationID', 'YourSearchOnlyAPIKey');

export default function FBT({ objectID }) {
  return (
    <FrequentlyBoughtTogether
      recommendClient={recommendClient}
      indexName="your_index_name"
      objectIDs={[objectID]}
      itemComponent={({ item }) => <code>{JSON.stringify(item)}</code>}
    />
  );
}

Remix

If you import a Recommend React component into a Remix app, it will generate an error similar to:

Copy

1
2
3
import { Recommend } from "@algolia/recommend-react";
         ^^^^^^^^^
SyntaxError: Named export 'Recommend' not found. The requested module '@algolia/recommend-react' is a CommonJS module, which may not support all module.exports as named exports.

Fix the ESM import error by adding the following to your remix.config.js file:

Copy
export default {
  // ...
  serverDependenciesToBundle: [
    /^@algolia\/recommend-react/,
    /^@algolia\/recommend-vdom/,
    /^@algolia\/recommend-core/,
  ],
}

Astro

If you’re using Astro, you can use Recommend React in an interactive island.

In the astro.config.mjs file, add the parameter legacy.proxySsrExternalModules: true to the Vite configuration. Then, import your React component as an interactive island with the client:load template directive.

Copy

1
2
3
4
5
6
7
8
export default defineConfig({
  integrations: [react()],
  vite: {
    legacy: {
      proxySsrExternalModules: true,
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import algoliarecommend from "@algolia/recommend";
import { FrequentlyBoughtTogether } from "@algolia/recommend-react";

const recommendClient = algoliarecommend('YourApplicationID', 'YourSearchOnlyAPIKey');

export default function RecommendIsland() {
  return (
    <div>
      <FrequentlyBoughtTogether
        recommendClient={recommendClient}
        indexName="your_index_name"
        objectIDs={["your_object_id"]}
        itemComponent={({ item }) => <code>{JSON.stringify(item)}</code>}
      />
    </div>
  );
}

If you’re using other React meta-frameworks, such as Gatsby, Recommend React should work seamlessly.

Feedback

If you encounter any difficulties or have questions or suggestions about Algolia Recommend, feel free to engage in the GitHub Discussions.

Recommend with React Native

Did you find this page helpful?

Use Algolia Recommend with React meta-frameworks

Recommend React

Next.js

Remix

Astro

Recommend React with other React meta-frameworks

Feedback