algolia / instantsearch

⚡️ Libraries for building performant and instant search experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

Home Page:https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Extra client-side call being made when navigating to Algolia page (Next 13, pages dir)

KarinMeijvogel opened this issue · comments

🐛 Current behavior

When using the boilerplate code, navigating from a simple page to a page using InstantSearch, unwanted Algolia requests appear in the network tab in the browser:

Scherm­afbeelding 2023-09-22 om 16 51 13

In my older projects where I'm using NextJS 12, this issue does not occur. The page simply loads without a client-side call to algolia.

🔍 Steps to reproduce

  1. From the homepage, click on the "Go to algolia page" link
  2. Notice how a new Algolia request appears in the network tab, as soon as the Algolia page loads

Live reproduction

https://codesandbox.io/p/sandbox/focused-hoover-z58yzs?file=%2Fpages%2Fsearch.tsx%3A21%2C10-21%2C15

💭 Expected behavior

No client-side algolia call when switching between pages.

Package version

instantsearch 7.1.0, next 13.5.1

Operating system

No response

Browser

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

This should be fixed in #5854 I believe, can you try that out?

@Haroenv Changing the react-instantsearch version in my package.json like this did indeed help! (Although I'm not sure if this is the correct way to test it):

{
  "name": "example-react-instantsearch-next-example",
  "version": "11.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "algoliasearch": "4.14.3",
    "instantsearch.css": "8.1.0",
    "next": "13.5.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-instantsearch": "https://pkg.csb.dev/algolia/instantsearch/commit/432a6884/react-instantsearch",
    "react-instantsearch-router-nextjs": "7.1.0"
  },
  "devDependencies": {
    "@types/node": "17.0.40",
    "@types/react": "18.0.12",
    "eslint": "8.4.0",
    "eslint-config-next": "12.0.7",
    "typescript": "5.1.3"
  }
}