fix(next-app-router): do not use SSR context for CSR #6534

aymeric-giraudet · 2025-01-17T10:41:20Z

Summary

Fix looks simple but it took time as it was really difficult to debug.

Basically, when navigating with category pages, InstantSearchNext remounts and recreates a whole new InstantSearch instance (this is a root problem we may want to deal with later by ensuring we always use a single instance).
It does so too with back and forward buttons, BUT, this particular piece of code behaves differently (was really hard to find) :

instantsearch/packages/instantsearch.js/src/lib/InstantSearch.ts

Lines 698 to 710 in 7721896

    
           const originalScheduleSearch = this.scheduleSearch; 
        
           // We don't schedule a first search when initial results are provided 
        
           // because we already have the results to render. This skips the initial 
        
           // network request on the browser on `start`. 
        
           this.scheduleSearch = defer(noop); 
        
           // We also skip the initial network request when widgets are dynamically 
        
           // added in the first tick (that's the case in all the framework-based flavors). 
        
           // When we add a widget to `index`, it calls `scheduleSearch`. We can rely 
        
           // on our `defer` util to restore the original `scheduleSearch` value once 
        
           // widgets are added to hook back to the regular lifecycle. 
        
           defer(() => { 
        
             this.scheduleSearch = originalScheduleSearch; 
        
           })();

defer is really unreliable on Next.js and Remix IIRC, here when we navigate it did properly remove the noop, but with back and forward buttons it didn't which is why we had the initial issue where it would display empty results.

The fix that was made for that worked but it caused issue #6479, as now CSR ran the hydration logic which is to add widgets during render, causing a lot of duplicate addWidgets in CSR.

Result

Now if we're doing CSR (on the browser, no hydration), we just remove the server contexts to make sure it behaves the same way as regular react-instantsearch would.

fixes #6479

FX-3211

codesandbox-ci · 2025-01-17T10:48:30Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bd74a3c:

Sandbox	Source
example-react-instantsearch-getting-started	Configuration
example-react-instantsearch-next-app-dir-example	Configuration
example-react-instantsearch-next-routing-example	Configuration
example-vue-instantsearch-getting-started	Configuration

Haroenv

thanks!

fix(next-app-router): do not use SSR context for CSR

bd74a3c

aymeric-giraudet requested review from a team, dhayab and sarahdayan and removed request for a team January 17, 2025 10:41

Haroenv approved these changes Jan 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(next-app-router): do not use SSR context for CSR #6534

fix(next-app-router): do not use SSR context for CSR #6534

aymeric-giraudet commented Jan 17, 2025 •

edited by jira bot

Loading

codesandbox-ci bot commented Jan 17, 2025

Haroenv left a comment

	const originalScheduleSearch = this.scheduleSearch;
	// We don't schedule a first search when initial results are provided
	// because we already have the results to render. This skips the initial
	// network request on the browser on `start`.
	this.scheduleSearch = defer(noop);
	// We also skip the initial network request when widgets are dynamically
	// added in the first tick (that's the case in all the framework-based flavors).
	// When we add a widget to `index`, it calls `scheduleSearch`. We can rely
	// on our `defer` util to restore the original `scheduleSearch` value once
	// widgets are added to hook back to the regular lifecycle.
	defer(() => {
	this.scheduleSearch = originalScheduleSearch;
	})();

fix(next-app-router): do not use SSR context for CSR #6534

Are you sure you want to change the base?

fix(next-app-router): do not use SSR context for CSR #6534

Conversation

aymeric-giraudet commented Jan 17, 2025 • edited by jira bot Loading

codesandbox-ci bot commented Jan 17, 2025

Haroenv left a comment

Choose a reason for hiding this comment

aymeric-giraudet commented Jan 17, 2025 •

edited by jira bot

Loading