Add shallow routing option with next/navigation's router

[elanmed]

Goals

Provide an option in next/navigation's router's push method to allow for shallow routing, similar to Next 12's shallow routing.

Background

Currently, the recommended approach to mutate search params is to use router.push to update the url. However, this causes the page to reload and all the components to remount. This can have undesirable affects, such as triggering animations or other effects that trigger on mount. If the search params are being updated frequently, say with each keystroke, this can cause a very jarring experience. A { shallow: true } option like in Next 12's router would allow the consumer to mutate the url without remounting the components.

[mr-rpl]

+1

another work around right now we are leveraging is to only use Layout and having the page component return null. Layout does not re-render on navigation change

[jayenashar]

this isn't working for me. the root layout (which uses dynamic APIs) isn't re-rendering, but the layout in the dynamic route with dynamic rendering is re-rendering. the root layout doesn't have access to the dynamic route params.

i'll list what i'm trying to achieve, in case someone sees this and knows how to do it with the app router:

• urls:
  • /
  • /[id]
• one route group (i didn't implement other route groups yet)
• components for Header, MainContent, and Footer.
• Header and Footer are independent of url (so i have put them in the root layout as server components).
• Header contains <Link>s
• / uses dynamic APIs (headers)
• the parent of MainContent should be a server component, as it uses node.js APIs to access a database
• MainContent should re-render but not re-mount (this is where i'm spending time. either it doesn't re-render or it re-mounts.

[elanmed]

In the meantime, I've been using

window.history.pushState({}, "", `${pathname}?${params.toString()}`);

in a useEffect with no noticeable unintended consequences

[sinclairnick]

I've come across this issue in the past, in the earlier days of using middleware.ts. I've found using a query param as a "copy" of internal state to work quite well.

E.g. on initial render, read the query param and set to in-memory state. Every time you write to the internal state, it also mutates the window.history. This way no re-renders are created, but if your components pull from the useState call, then components are re-rendered client-side only as you would expect them to.

This could, in theory, create state mismatches with the Next router, but I've found it to be a pretty successful and stable workaround, mimicking shallow routing fairly well.

[mi-na-bot]

@sinclairnick This works pretty well until you want to use to navigate to the original URL that next thinks the page is still on, even though the actual query params on the URL are now different.

[sinclairnick]

@MinervaBot Yeah turns out there isn't a great solution that doesn't inevitably run into weird edge cases. Deviating from the next router path is asking for trouble, unfortunately

[mi-na-bot]

@sinclairnick It really is a good approach and something I have always wished Next.js would implement in some way. On an old project, I used memorization to do it "The Next Way", but there was still a lot of extra jank on each event handler!

[mawsyh]

to achieve that I used the code below to watch for the url changes on the components i need:
history.pushState = (data, title, url) => { History.prototype.pushState.apply(history, [data, title, url]); refetch(); };

[mawsyh]

@ElanMedoff i've noticed bypassing like this can leave the internal state of navigation invalid. Anything inside of the app still thinks we're at the old route.

To achieve this and basically watch the URL changes on components I used the code below:

history.pushState = (data, title, url) => {
    History.prototype.pushState.apply(history, [data, title, url]);
    refetch();
};

[work7z]

Up to now, it seems shallow routing option has not been supported in next/navigation's router yet.

I have a project named LafTools(laf-tools.com) using next.js, to avoid reloading page, I'm currently using other workaround as below

1. define a Link in layout, mark it as hidden element

<Link id='grouter' href='/default-workaround-link' className='hidden'></Link>

2. push to specific router programtically

function push(url: string){
let ele = $("#grouter")
ele.href=url
ele.click()
}

Just FYI, hopefully it makes senses.

[wali-1money]

Official recommended writing method

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SortProducts() {
  const searchParams = useSearchParams()
 
  function updateSorting(sortOrder: string) {
    const urlSearchParams = new URLSearchParams(searchParams.toString())
    urlSearchParams.set('sort', sortOrder)
    window.history.pushState(null, '', `?${urlSearchParams.toString()}`)
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  )
}