2

The problem:

when attempting shallow routing with changing (adding or removing NOT updating) the query string in Next.js the page is reloaded and the shallow ignored.

How can I prevent reloading while changing the query string?

Example:

from: example.com/page1/?a=2

to: example.com/page1/?a=2&b=3

Code:

const newSearch = '?a=2&b=3'
router.push(`/page1/${newSearch}`, null, { shallow: true })

I also try:

const newSearch = '?a=2&b=3'
router.push(`/page1/${newSearch}`, `/page1/${newSearch}`, { shallow: true })
Masoud Aghaei
  • 775
  • 7
  • 20
  • 3
    Passing [`shallow: true`](https://nextjs.org/docs/routing/shallow-routing) in the `router.push` call simply prevents data fetching methods (`getStaticProps`, `getServerSideProps`) from rerunning. It does not prevent the page from re-rendering (that can't be prevented, as the route changes and that always triggers a re-render) - the page should not fully reload however. – juliomalves Dec 29 '21 at 19:28

2 Answers2

0

router.push(/page1?${finalQuery.join("&")}, undefined, { shallow: true, });

Harsh saini
  • 1
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 14 '23 at 14:42
-3

I just disable the shallow since this is an Autmatic static optimization I realized that it avoids query string updates. It works for me only disabling shallow. Anyway, I see the getServerSideProps ever runs with/without shallow.

Jesus Hernandez
  • 1