Prevent state from resetting when router.push causes a re-render in Next.js 13 app directory

[jschuur]

Summary

I seem to be in a Catch 22 situation when using Next.js 13's new app directory routing because conflicting requirements need my root layout to be server side and client side rendered respectively (which obviously can't be the case).

I have a Next.js 13.3 app using the app directory and a context provider wrapped around a descendent of app/page.tsx to provide access to state. At that level, when I perform a router.push I get a re-render of app/page.tsx, which resets my state that I get via the provider. This state was modified elsewhere, and I don't want it reset.

I can move the provider higher up, so a re-render doesn't trigger it, but that conflicts with another provider.

Additional information

Prior to the new app directory routing, I think the solution would have been to use shallow routing, but Next.js 13's new routing doesn't have such an option.

At first glance, the solution is to move the provider higher up into app/layout.tsx, which doesn't get re-rendered. However, this then requires me to make the layout a client side only component (because the provider uses state), and in my app, I need that layout to be server side rendered so I can wrap it in a ClerkProvider for auth purposes.

I can't quite wrap my head around how to structure things so that I can have a server side rendered layout, and a client side rendered provider, and have the provider state persist when the router pushes a new route. I think need a server side rendered component higher than app/context.js to wrap my ClerkProvider around.

Example

I've put up an example to show the problem.

https://codesandbox.io/p/github/jschuur/context-router-next13/main

Click the button and you can see the layout wrapped provider shows a state of 'abc' after the route change as desired. The page based provider on the other hand only briefly shows 'abc' and quickly resets back to '(intialized value)' after re-rendered. Click it again and they are both in sync, because the page URL didn't change, so a page re-render didn't occur.

Full code also at https://github.com/jschuur/context-router-next13

[PeterCastilloG]

I have the same issue, did you find something to to solve your problem?

[jbbae]

Facing same issue... I saw this solution from this other thread, but feels like an unelegant & hacky way of doing things that probably have negative implications (but I'm not as an expert to tell what those would be...):

You need to put your context provider in a place where it doesn't get unmounted when you do a page transition. For that you can use pages/_app.js and wrap your page with the provider.

[adambprograming]

I had the same problem and after two days of reading hundreds of posts about this issue, I found out the solution. I am a little bit sad because it's extremely simple.

Import the redirect
import { redirect } from "next/navigation";

Use this magic line of code that will change URL without rerender (https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
window.history.pushState('new url', undefined, '/en')

Use redirect (https://nextjs.org/docs/app/api-reference/functions/redirect)
redirect({pathname}, 'replace');

I hope it will help 👍

[pablojsx]

redirect won't keep state

[Chrys-code]

Just solved it by using Use Redirect method above.

I think your problem might be that the redirect method re-renders your route segment. What it does not re-render is a layout.tsx.

So at the root of the sub-application that needs that state in your app, place the relevant provider into a layout.tsx instead of just wrapping a route segment. layout.tsx does not get re-rendered, and you won't lose state while it will be able to re-render the route.

The author of this post actually mentions this solution but he is in a specific case.

[vipuljbhikadiya]

Summary

I seem to be in a Catch 22 situation when using Next.js 13's new app directory routing because conflicting requirements need my root layout to be server side and client side rendered respectively (which obviously can't be the case).

I have a Next.js 13.3 app using the app directory and a context provider wrapped around a descendent of app/page.tsx to provide access to state. At that level, when I perform a router.push I get a re-render of app/page.tsx, which resets my state that I get via the provider. This state was modified elsewhere, and I don't want it reset.

I can move the provider higher up, so a re-render doesn't trigger it, but that conflicts with another provider.

Additional information

Prior to the new app directory routing, I think the solution would have been to use shallow routing, but Next.js 13's new routing doesn't have such an option.

At first glance, the solution is to move the provider higher up into app/layout.tsx, which doesn't get re-rendered. However, this then requires me to make the layout a client side only component (because the provider uses state), and in my app, I need that layout to be server side rendered so I can wrap it in a ClerkProvider for auth purposes.

I can't quite wrap my head around how to structure things so that I can have a server side rendered layout, and a client side rendered provider, and have the provider state persist when the router pushes a new route. I think need a server side rendered component higher than app/context.js to wrap my ClerkProvider around.

Example

I've put up an example to show the problem.

https://codesandbox.io/p/github/jschuur/context-router-next13/main

Click the button and you can see the layout wrapped provider shows a state of 'abc' after the route change as desired. The page based provider on the other hand only briefly shows 'abc' and quickly resets back to '(intialized value)' after re-rendered. Click it again and they are both in sync, because the page URL didn't change, so a page re-render didn't occur.

Full code also at https://github.com/jschuur/context-router-next13

have you get solution for this ?

[stealth-sg]

Approach to the Problem :
You can use LocalStorage or any web Storage to store context before redirection/reload and retrieve the data on with a function(define a function to retrieve and set to context states in ContextProvider),on Mounting call the function, It will update the context from LS. Now you can have the access to context with data.

This problem especially got me for pages based routing, so you have to wrap the provider for respective page also.
I know It's not the best way to solve, It's just an approach.

[finom]

I was using useRouter with app router to set query parameters ?foo=bar but once the app grown bigger, we started to get significant lags. The query parameters just store some IDs that are used by components, so we don't need to rerender the entire app, but just a couple of components. Is there any way to avoid that? Or we should stick with location.hash?

[luishdez]

Just to help to others. If you found this situation. Where you want to keep the history. Eg: navigation google maps , you have the problem when nextjs renders again the whole page and "Eg google maps" , use native push state, and set a native popState listener, and set the state. you will work outside the router. but keeping react state and native browse history

  useEffect(() => {
    window.addEventListener('popstate', handleUpdateFromParams);

    return () => {
      window.removeEventListener('popstate', handleUpdateFromParams);
    };
  }, [handleUpdateFromParams]);