Why does layout rerender on redirect() but not on router.push()

[nphmuller]

I've prepared a small app that has 3 buttons:

• One using Next's <Link />
• Client component using router.push()
• Client component calling server action that uses redirect()

On initial render '!!! render' is logged to the console, this is expected.
But only when clicking the button that uses redirect() the message is logged again.

Why is this? Why does the server action that uses redirect() cause the root layout to rerender?

https://stackblitz.com/edit/stackblitz-starters-9z86me?file=app%2Flayout.tsx

Why is this a problem for me?

If I data fetch in my layout, using redirect() would cause the data to be refetched every time its called.

[BorhanSaflo]

<Link /> and router.push() handle navigation on the client side, meaning they update the page using JS without reloading the entire page. The layout components are reused, avoiding a full re-render. This is why the message is not logged again.

redirect() performs server-side navigation by issuing a 307 HTTP response, which tells the browser to load a new page completely. This causes the entire React component tree, including the root layout, to be recreated and re-rendered. Hence, the message appears again.

Also keep in mind that by default, Next.js automatically caches the returned values of fetch in the Data Cache on the server, so if the response is found, it's returned immediately and doesn't initiate a new request.

[nphmuller]

It seems the (client-side) app router handles the 307 response and it does some magic with it, because the browser page doesn't refresh and the state of the component is kept (so the state isn't reset). Are you really sure redirect() does a full page refresh?

[BorhanSaflo]

It seems the (client-side) app router handles the 307 response and it does some magic with it

I don't think it's possible to handle a 307 response (or any redirect response) at the app level due to security reasons. The browser will simply follow the redirect, which causes the React component tree to be recreated. Next.js does a really good job at caching data, making these redirects seamless.