How to change URL query parameters without rerendering client component?

[arepp23]

Related to this issue which was never solved.

I have a search box which updates the ?query= query param when a user types a value. The goal is to have the table on the page update based on the query given.

'use client';

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const { replace } = useRouter();

  const handleSearch = useDebouncedCallback((term) => {
    const params = new URLSearchParams(searchParams);
    if (term) {
      params.set('query', term);
    } else {
      params.delete('query');
    }
    replace(`${pathname}?${params.toString()}`);
  }, 300);

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
        defaultValue={searchParams.get('query')?.toString()}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

This works fine when it's used inside of a server component, as changing the query params doesn't cause a full rerender of the server component. However, when used inside a client component, the whole client component rerenders when the search box is updated, which is not desirable behavior. Is there a way around this?

[skarensmoll]

Did you find a workaround? @arepp23

[SamjiDiamond]

Use this instead

  // create an updated router path object
  const newPathObject = {
    pathname: router.pathname,
    query: params
  }

  // update the URL, without re-triggering data fetching
  router.push(newPathObject, undefined, { shallow: true });

[ifozest]

This works for PagesRouter, appRouter's router has another method signatures

[bleonardio]

same problem here. my goal was to clear a query parameter after processing the value, without disrupting the user if they had already started interacting with the page (expanding ui elements, scrolling). This approach works with app router and prevents a disruptive scroll to the top of the page:

const newPathname = 'current path with edits made';
router.replace(newPathname, {
  scroll: false,
});

[gigigimay]

for appRouter, use window.history.replaceState instead.

from the doc:

Next.js allows you to use the native window.history.pushState and window.history.replaceState methods to update the browser's history stack without reloading the page.

window.history.replaceState({}, '', `/some-path?query=xxx`)

[Eli250]

Thanks @gigigimay. This worked for me.