Ability to push changes to url without re-rendering

[matthewwolfe]

I am working on a project that has a page which works similar to google maps. As a user zooms/moves the map around, the url should be replaced with the updated center latitude and longitude values.

The url looks something like this:
/@30.7921211,-101.7344277,7.23z Where the first value is the lat, second is the long

And as the map is moved, these values change.

I've been trying to use the nextjs router replace to update the url, but every call to router.replace causes the application to re-render. I am able to prevent re-rendering by using history.pushState, but that breaks routing with the back button: ie. after pushState has been called, the nextjs router cannot correctly update and re-render a new page when the back button is pressed.

So either:

1. I use router.replace which causes tthe application to re-render
2. I use history.pushState to prevent re-rendering, but that breaks other aspects of navigation

Is there any way that I can use NextJS routing to basically say: I want to update the url to X, but don't attempt any rendering?

[jamesmosier]

causes the application to re-render

Do you mean React internally renders again? Or do you mean the page refreshes/reloads and visually repaints?

Also, have you taken a look at shallow routing?

[matthewwolfe]

I have looked at shallow routing, but that has not solved the issue for me. React internally renders again, and parts of the application that should not be affected are re-rendering again.

Here is a picture of the profile when using Router.replace(href, as, { shallow: true }) when going performing the following:
original url: /map?lat=50&lng=50 => /map?lat=40&lng=40:

I would not expect the entire application to be re-rendering here.

Alternatively, the profiler does not record any re-rendering when performing the same action using window.history.replaceState, which makes sense, but I would like to be able to achieve that with the nextjs router if possible.

This is what I am currently using to avoid any re-rendering:
window.history.replaceState(window.history.state, "", href);

[jamesmosier]

Unfortunately with next/router you won't be able to avoid React re-rendering. next/router uses the Context API and updates its internal state to reflect whatever router.* method you call.

It hard to say what could help in this situation without seeing the code, but if you want to update the url without the page being effected your only choice would be using the window.history API as you mentioned.

Sorry I'm not able to help more 🙏

[matthewwolfe]

That's what I figured, and the confirmation of that from you is comforting.

[matthewwolfe]

Leaving this comment here in case others have the same question in the future:

I ended up going with

window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, '', newUrl);

for when I wanted to update the url without doing any re-rendering. I also check against Router.pathname and only use history.replaceState when remaining on the same page. Otherwise I use the nextjs Router.

Specifying window.history.state is mandatory because it maintains some nextjs state internals. If you pass {} instead of window.history.state, moving forward/back will potentially be broken. This was the hardest issue for me to fix.

[vissaf]

hi @matthewwolfe can you explain what to provide as newUrl? should it be the whole url with the new query params? or just the query params? Thanks in advance 🙏

If you're using Next.js, you can do something like this:

const newUrl = `${
      router.asPath.includes("?")
        ? router.pathname + `?existingQuery=${router.query.existingQuery}` + `&newQuery=${formattedDate}`
        : router.pathname + `?newQuery=${formattedDate}`
    }`;

Hope this helps! 🙂

[bombillazo]

This was a Godsend, thank you all!!!!

[EarthlingDavey]

whole, fully built, url

Hey, path (and query) works ok for me, but I discovered a bug with using the full url (inc. protocol and host).

To reproduce

1. Navigate one or more times with window.history.replaceState
2. Click a standard next/link - it works.
3. Click back, it doesn't work as expected.
   The url reverts to https://example.com/template where it should be https://example.com/template/slug1/slug2

[kirandash]

The following works for me: window.history.replaceState(window.history.state, '', newUrl);

Hence I am curious why we need as and url in: window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, '', newUrl);

I don't see as and url prop in the window.history.state when I log it.

[JimCarnicelli]

Wow! I can vouch for the need for the spread operation and the "as" and "url" properties. You will not have a good time if you express it like this:

window.history.replaceState(window.history.state, '', newUrl);

I found when I would hit the back button on my browser to return to the page that did all the URL rewrites, the URL would be there for a moment. Then it would clear out to the original state with no query string (as I had altered). Very frustrating.

Good job. Thank you for sharing.

[bamdadsabbagh]

Having the same re-renders on RouterContext change, I started with the suggestion from @matthewwolfe and noticed url and as properties should have different values.

I ended up creating the next-replace-url npm package to support this functionnality.

Browser action like back button works for me, no full page refresh.

[akash-mahmud]

Hi,
I have checked his package. I have an issue. How can I send my full query object using this package? Because in this package it seems that it will just accept query parameres in key-value pairs.
But how can I pass an object of multiple query parameters here like router.push?
Any help will be appreciated.

[bamdadsabbagh]

Hi @akash-mahmud,
Thanks for looking into the package and for your feedback.
Your request is relevant, feel free to open a PR to support this functionality.

[72L]

I am using:

window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, '', newUrl);

as suggested but it looks like the re-rendering is still happening.

using app router, next version 13.4.10

[HelaGone]

I'm also having this issue with 14.0.4. the funny thing is that it only happens in production environment and not in localhost tho.

[ajstokar]

I tried this but the back button isn't working for me.

[EarthlingDavey]

I think you'll need pushState instead of replaceState.

https://stackoverflow.com/questions/17507091/replacestate-vs-pushstate

replaceState() will change the URL in the browser (ie. pressing the back button won't take you back)

pushState() will change the URL, and keep the old one in the browser history (ie. pressing the back button will take you back)

I would also advise thorough testing as push/replace state does not keep the nextjs router in sync. i.e. running pushState with a new path, then router.asPath, you will get incorrect path.

[federicoWax]

Neceisto hacer esto pero con link en nect 14, la prop shallow de Link no funciona para rsc

[ronny1020]

Is there any update after the next 14 with app router?

[antofa]

same, not working for next 14

[tvkiranm]

I have one issue with pages router when i click on the redirection then my page is refresh Why it behave like this in next js
When I set the query param in the URL