SSR with Next.js dynamic URLs and URL Sync

I’ve built a version of my app following the Next.js example provided. The key difference is that I would like to use Next.js’s Clean URLs.

The issue I’m having is that whenever router.push() is called, I get a full reload rather than just a client-side reload. Relevant code block here:

onSearchStateChange = searchState => {
  clearTimeout(this.debouncedSetState);

  this.debouncedSetState = setTimeout(() => {
    const href = searchStateToUrl(searchState);

    this.props.router.push(href, href, {
      shallow: true,
    });
  }, debounceDuration);

  this.setState({ searchState });
}

When I take my page and make it a non-dynamic URL (i.e. change from pages/search/[slug].js to pages/seach.js) everything works as expected.

My issue seems to be similar to lkbr’s issue in some ways. However, his was fixed by removing URL sync, which is something that I would like to keep.

Hello,

Could you reproduce your problem with a minimal example in CodeSandbox?

You can use this template as a starting point: https://codesandbox.io/s/github/algolia/react-instantsearch/tree/master/examples/next .

Thank you.

Sure thing! Thank you for the very convenient template. Here’s my CodeSandbox:

What I’ve done is:

  1. Created a new directory: pages/search/.
  2. Copied all of the code in pages/index.js and created a new identical file in said directory: pages/search/[slug].js.
  3. Created a link at the top of both pages that points to the other page.

So the only difference between the two pages should be their directory structure.

So, the expected result, and the result you’ll find on the “Regular Search” (pages/index.js), is that when refinements are made – either through the Refinement List or the Search Box – that the results are updated on client side only. The “Console” window should log “Rendering,” and the “Terminal” window should not.

However, this is not the case with the “Dynamic URL Search” (pages/search/[slug].js). This is easiest to see by typing into the search box slowly. With the Regular Search, everything is fine, but with the Dynamic URL Search, you’ll find that the page has refreshed and your cursor will no longer be in the search box.

Not a Next.js expert here, but apparently when pushing the new route to the router you need to pass the path inside the pages directory as first parameter (and not the dynamic one):

 this.props.router.push("/search/[slug]", href, {
   shallow: true
 });

Here’s the fixed CodeSandbox: https://codesandbox.io/s/example-next-p6nr8

Sources:

1 Like

Me neither, clearly. Thank you for the help! That solved it.