How to Prevent Page Refresh on Language Switch in Next.js App Router

[tuzkiiiii233]

When switching languages, the entire page refreshes. This happens in Next.js with the app router, whether using next-intl or directly storing the language in a cookie. This issue didn’t occur when using the page router before. How can I prevent the global refresh when switching languages in the app router?

[stepan662]

Hey, could you go into more detail with this issue? Our testapp (https://github.com/tolgee/next-app-example) is using a server action, which invalidates cookie and that forces all server components to re-rendered. However there is no hard refresh (in traditional sense). I believe this is correct behavior.

[tuzkiiiii233]

I just ran next-app-example and next-app-intl-example locally, and added a client component Test in src/app/[locale]/page.tsx.

"use client"

import { memo } from "react";

const Test = () => {
    console.log("test");

    return (<div>test</div>)
}

export default memo(Test)

When switching languages, I noticed that Test keeps refreshing as well. Is this the correct behavior? Is there any way to avoid the refresh of the Test component? In my actual project, this refresh causes all requests on the page to be re-sent when switching languages, essentially re-rendering the page, even though the data is the same. This results in a poor user experience. If there’s any solution, please let me know. Thank you! 🙏

[stepan662]

I'm not sure, honestly. We are basically keeping this behavior up to next.js. Basically we just use the next.js API to change the cookie and I guess that causes next.js to re-render everything.

I found this issue, seems like that could be it: https://github.com/vercel/next.js/issues/50163