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.

[mansigeek]

It's working..

[JCs3lma]

I am using window.history.pushState or window.history.replaceState, but when I try to access the parameters with useParams, it doesn't provide the updated parameters. I have opened a discussion about this; you can find it here: #70779

Any workaround? I like to use window.history.pushState as it is more faster the router.push or router.replace

[earthlingdavey]

Hey @JCs3lma 👋 I found a novel workaround... npm uninstall next

[topolanekmartin]

Okay. Why did I come to this solution with version 15.3? 🤔 I don't like it at all, but it works.

timer.current = setTimeout(() => {
    window.history.state.__PRIVATE_NEXTJS_INTERNALS_TREE[1][
	    'children'
    ][1]['children'][0][1] = newPathnameUrl
    
    window.history.replaceState(
	    window.history.state,
	    '',
	    newAbsoluteUrl,
    )
}, 500)

[GrahamQuan]

i learn this api from their ai-chatbot app

[bamdadfr]

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.

[bamdadfr]

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.

[kcrwfrd]

Next.js app router monkey patches pushState and replaceState specifically to trigger a re-render so that usePathname() and useSearchParams() will return the correct, updated URL when it changes -

next.js/packages/next/src/client/components/app-router.tsx

Lines 476 to 520 in 5969a09

	/**
	* Patch pushState to ensure external changes to the history are reflected in the Next.js Router.
	* Ensures Next.js internal history state is copied to the new history entry.
	* Ensures usePathname and useSearchParams hold the newly provided url.
	*/
	window.history.pushState = function pushState(
	data: any,
	_unused: string,
	url?: string | URL | null
	): void {
	// Avoid a loop when Next.js internals trigger pushState/replaceState
	if (data?.__NA || data?._N) {
	return originalPushState(data, _unused, url)
	}
	data = copyNextJsInternalHistoryState(data)
	if (url) {
	applyUrlFromHistoryPushReplace(url)
	}
	return originalPushState(data, _unused, url)
	}
	/**
	* Patch replaceState to ensure external changes to the history are reflected in the Next.js Router.
	* Ensures Next.js internal history state is copied to the new history entry.
	* Ensures usePathname and useSearchParams hold the newly provided url.
	*/
	window.history.replaceState = function replaceState(
	data: any,
	_unused: string,
	url?: string | URL | null
	): void {
	// Avoid a loop when Next.js internals trigger pushState/replaceState
	if (data?.__NA || data?._N) {
	return originalReplaceState(data, _unused, url)
	}
	data = copyNextJsInternalHistoryState(data)
	if (url) {
	applyUrlFromHistoryPushReplace(url)
	}
	return originalReplaceState(data, _unused, url)
	}

I don't think it will be possible to avoid re-render because of this, but you can accomplish at least accomplish the equivalent of a "shallow" transition by using window.history.pushState or window.history.replaceState.

[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

[espensorby]

Has the issue with Next 14 and router.push/router.replace no longer accepting "{ shallow: true } still not been addressed?

[jeromevvb]

I am using Next 14.2.5.
In my case, the user creates a new post by going to /posts/new
In the background, I created the post and changed /new with the ID of the created post
The following code works like a charm.

window.history.pushState({}, '', `/posts/${id}`)

[ekebobrown]

This worked for my use case where I needed to load a document server an ODM source onto a different component (preview) when a list item is clicked from a different component, both client components and imported into another component (server component). The idea being that when the URL changes the preview component will fetch and re-render using a parameter in the URL.
I prefer the history's pushState for some reason being that when the user click the back button the last item previewed will be shown.

[David05500]

Any input on this from the official team?

As doing a workaround like this seems like a bad practise, considering this functionality was working fine in page router

 const createQueryString = useCallback(
    (updates: { [key: string]: string }) => {
      const params = new URLSearchParams(searchParams);
      Object.entries(updates).forEach(([key, value]) => {
        params.set(key, value);
      });
      return params.toString();
    },
    [searchParams],
  );

  function prevPage() {
    const newPage = localPage > 1 ? localPage - 1 : 1;
    const newUrl = `${pathname}?${createQueryString({ page: newPage.toString(), limit: localLimit.toString() })}`;
    window.history.replaceState(
      { ...window.history.state, as: newUrl, url: newUrl },
      "",
      newUrl,
    );
    setLocalPage(newPage);
  }

[earthlingdavey]

Hi @David05500 ... it's been a while since I've read this issue, but I think it did/does affect page router also.

[kaurkaelep]

A replacement for { shallow: true }

it is really important that you tie your state to either usePathname() or/and useSearchParams().

const pathname = usePathname(),
 id = pathname.split('/').pop()

Whenever you call either pushState or replaceState, the pathname will be updated.
window.history.replaceState(null, '', newUrl)

[ptvty]

Exactly. usePathname and useSearchParams work but useParams doesn't, which I don't see any valid reason why. As all three hooks are client-side hooks. I opened #73656 for this.