Hi, I encounter that the browser page doesn't reload when I change my codes in App Router, but in Pages Router the browser page reloads anytime I change my codes as usual without any problem
#NextJS App Router refresh problem
lucid basalt
lethal windBOT
Hi @lucid basalt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The behavior you're experiencing is due to the different routing and navigation mechanisms used by the App Router and the Pages Router in Next.js.
The App Router uses a hybrid approach for routing and navigation. On the server, your application code is automatically code-split by route segments. And on the client, Next.js prefetches and caches the route segments. This means, when a user navigates to a new route, the browser doesn't reload the page, and only the route segments that change re-render. This improves the navigation experience and performance source (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating).
By default, the browser performs a hard navigation between pages. This means the browser reloads the page and resets React state such as useState hooks in your app and browser state such as the user's scroll position or focused element. However, in Next.js, the App Router uses soft navigation. This means React only renders the segments that have changed while preserving React and browser state, and there is no full page reload source (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating).
If you want to force a page reload in the App Router, you can use the router.reload method. Here's an example:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.reload()}>
Click here to reload
</button>
)
}