Shallow Routing and Back Button Issue in Next.js
Unanswered
Call.Me.Abhi posted this in #help-forum
Hi everyone,
I’m working on a Next.js application and facing an issue with shallow routing on a specific page. We want to add query parameters to the URL without triggering a new page request, and for this, we’re updating the browser’s routing history. The method we are using is:
We’ve also tried using the shallow routing option provided by Next.js itself. However, in Next.js v12, this causes the screen to flash, resulting in a poor UI experience.
The problem arises when we try to navigate to the previous page using the browser’s back button. Next.js does not consider this as a page request, so the content on the page is not updated according to the URL with the query parameters. I have attached a screenshot too.
Additionally, we need this page to be SEO-friendly, so client-side rendering is not an option for us.
Has anyone faced a similar issue or have any suggestions on how to handle this scenario? We’re currently using Next.js versions 12, 13, and 14.
Any help or pointers would be greatly appreciated!
Thank you!
I’m working on a Next.js application and facing an issue with shallow routing on a specific page. We want to add query parameters to the URL without triggering a new page request, and for this, we’re updating the browser’s routing history. The method we are using is:
window.history.pushState({window.history.pushState}, "", window.location.pathName + queryparams);
We’ve also tried using the shallow routing option provided by Next.js itself. However, in Next.js v12, this causes the screen to flash, resulting in a poor UI experience.
The problem arises when we try to navigate to the previous page using the browser’s back button. Next.js does not consider this as a page request, so the content on the page is not updated according to the URL with the query parameters. I have attached a screenshot too.
Additionally, we need this page to be SEO-friendly, so client-side rendering is not an option for us.
Has anyone faced a similar issue or have any suggestions on how to handle this scenario? We’re currently using Next.js versions 12, 13, and 14.
Any help or pointers would be greatly appreciated!
Thank you!
8 Replies
I've been also facing the same issue please help.
Jonangi
Router.push({
pathname: pathName,
query: params
}, undefined, {
shallow: true
})This is for pages API
https://nextjs.org/learn/dashboard-app/adding-search-and-pagination this may also help you
Hey @Jonangi used this already for next 12 but I don't think we can use shallow routing for next 14.
@Jonangi Router.push({
pathname: pathName,
query: params
}, undefined, {
shallow: true
}) This updates the URL without refreshing the page
This is for pages API
Hey @Jonangi
I have tried that already in nextJs 12
on any shallow page transition it flashes the screen for a bried moment. Which infact is very annoying from UX perspective.
I have tried that already in nextJs 12
on any shallow page transition it flashes the screen for a bried moment. Which infact is very annoying from UX perspective.
@Call.Me.Abhi regarding native back button of the browser, it's not avoidable. It's called b/f cache
and why are you afraid of a new page request when query parameters change?
@James4u and why are you afraid of a new page request when query parameters change?
Hey @James4u
Basically, requesting a new page takes much more time than mutating the content in fully loaded page.
To us updating the page content as quick as possible is the priority.
Basically, requesting a new page takes much more time than mutating the content in fully loaded page.
To us updating the page content as quick as possible is the priority.