How to not reload page on App folder when changing url ?
Unanswered
Bully Kutta posted this in #help-forum
Bully KuttaOP
Hello, i saw that when using pages folder is possible to prevent reloading page when changing url by using
However my codebase is running on App folder, and this solution is not working. tried also push state and other methods. How is usually done on Nextjs with App folder ?
Basically, i have filters like these, when clicking i want to update url like for SEO reasons.
Even reloading there isnt much impact on page, problem is the background image is reloading, which is bad.
router.push(goToUrl, { shallow: true, scroll: false });However my codebase is running on App folder, and this solution is not working. tried also push state and other methods. How is usually done on Nextjs with App folder ?
Basically, i have filters like these, when clicking i want to update url like for SEO reasons.
/[game]/[filter]Even reloading there isnt much impact on page, problem is the background image is reloading, which is bad.
2 Replies
I believe the new router doesn’t support shallow navigation, the guys from [nuqs](https://nuqs.47ng.com/) (url state management, basically) do provide ways to do client side navigations that allow to pass a
Alternatively, you can use the native
shallow:trueAlternatively, you can use the native
window.history.pushState and window.history.replaceState, they [won’t trigger a reload](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api) of the page, while still synchronizing the hooks useSearchParams and usePathName@LuisLl I believe the new *router* doesn’t support shallow navigation, the guys from [**nuqs**](<https://nuqs.47ng.com/>) (url state management, basically) do provide ways to do client side navigations that allow to pass a `shallow:true`
Alternatively, you can use the native `window.history.pushState` and `window.history.replaceState`, they [won’t trigger a reload](<https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api>) of the page, while still synchronizing the hooks `useSearchParams` and `usePathName`
Bully KuttaOP
Hey Luis, i watched a good video about it and used a similar implementation:
https://www.youtube.com/watch?v=ukpgxEemXsk
But pushState and replaceState were also triggering reload, which is strange. Cant tell why. I just used searchParams and now is not reloading 🙂
Thanks, have a good day
https://www.youtube.com/watch?v=ukpgxEemXsk
But pushState and replaceState were also triggering reload, which is strange. Cant tell why. I just used searchParams and now is not reloading 🙂
Thanks, have a good day