Comments (7)
I will try using useInstantSearch
. If I'm not mistaken, I had issues relying on it early on, which is why I resorted to router.query
. I'll give it another try.
from instantsearch.
Is this the same as #5987? If you patch InstantSearch to use history.pushState
instead of the next router, does it work?
from instantsearch.
@Haroenv I'm using NextJS 12.3.4, which only has a page router.
How can I patch it to use history.pushState
? The same as the Remix example in the docs?
from instantsearch.
Ah I misunderstood the problem, that's indeed not related. If you add a button unrelated to InstantSearch that pushes to the router like this (https://codesandbox.io/p/devbox/nextjs-routing-issue-forked-t7w35v?file=%2Fpages%2Findex.tsx%3A60%2C1-64%2C16):
<button type="button" onClick={() => {
router.push('?something=true', undefined, {shallow: true})
}}>
add to url
</button>
It behaves the exact same. I believe because the push is shallow, next doesn't consider that the router and app component needs to re-render, but only what has listeners to the beforePopState router event.
What use case do you have for having the router
being updated, does it cause downstream issues? I wonder if something can be said to the router in the beforePopState function (
routeChangeComplete
is possible, but I wouldn't bet on it.
I don't believe the router should be "not shallow", as then the backend gets fetched, which is definitely a waste of resources.
from instantsearch.
@Haroenv I'll give you an example from our app:
- Navigate to https://www.ajmadison.com/c/dryers/
- The title is Dyers
- Click on Fuel Type: Electric
- The tile Electric Dryers
- Hit the back button
- The title is still Electric Dryers
We use router.query
to calculate the title, that's why we can't rely on a shallow update.
Same goes for which facets are shown on the page, they are dependent on the current route.
What would the alternative be? Should I be checking useInstantSearch
instead?
Would it be possible add an option for shallow: false
?
from instantsearch.
I'm not convinced shallow: false
would even solve the issue if that's what's going on, however using useInstantSearch
definitely will be updated with the ui at all times, so I recommend you use that for your source of truth instead of router
. Does that work for you?
from instantsearch.
I guess an issue you may have is if it's inside InstantSearch, there may be a chance of a render where the component doesn't render (although I think that's just a client rendering potential problem, shouldn't happen when you server side render)
from instantsearch.
Related Issues (20)
- Vue 3 <ais-dynamic-widgets> does not work with child v-for <ais-panel>s HOT 2
- infinite hits (vue-instantsearch): isLastPage has wrong value after loading previous items
- Duplicated queries network request when using search-insights setAuthenticatedUserToken
- Headers are being used in client component HOT 3
- Installation problem: Cannot find type definition file for 'googlemaps' HOT 3
- Dynamic Code Evaluation error in next.js HOT 1
- Installation problem: Property 'MarkerOptions' does not exist on type 'typeof maps'' HOT 8
- Unnecessary client-side query with SSR HOT 11
- React-Instantsearch Typescript, hits is depreciated on 7.12.0 HOT 2
- Refinement search input resets when a refinement with a different attribute is selected HOT 1
- Circular dependency in `react-instantsearch-core` HOT 2
- Refinement list gets populated and empty again when entering search page directly from URL HOT 3
- RecommendedResults break types when Server-side rendering in Remix/BFF
- Configure props of type PlainSearchParameters instead of SearchParameters (react-instantsearch) HOT 3
- Trouble building instantsearch.js from source HOT 1
- create-instantsearch-app --config.json builds an app that doesn't work HOT 1
- Send click events in vue 3 - TypeError: window.aa is not a function HOT 6
- Hydration Issues with NextJS 14 App Router HOT 2
- react-instantsearch import fails in jest jsdom environment since 7.11.0 HOT 1
- Dynamically rendering Index components from arrays results in incorrect teardown on unmount HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from instantsearch.