Hi @frail perch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#All page transitions have hard refresh in production.
severe graniteBOT
Based on the information provided in the extracts, there could be a few reasons why you're experiencing a hard refresh during page transitions in production.
-
Usage of
<a>elements instead ofnext/link: If you're using<a>elements to navigate between your Next.js pages, this could cause unnecessary full-page refreshes. Thenext/linkcomponent is required to enable client-side route transitions between pages and provide a single-page app experience. You can read more about this in the No HTML link for pages (https://nextjs.org/docs/messages/no-html-link-for-pages) section. -
State Preservation: When navigating to the same page in Next.js, the page's state will not be reset by default as React does not unmount unless the parent component has changed. If you want to reset the state after navigation, you can manually ensure each state is updated using
useEffector use a Reactkeyto tell React to remount the component. You can read more about this in the Resetting state after navigation (https://nextjs.org/docs/pages/api-reference/functions/use-router) section. -
Soft Navigation: By default, the browser performs a hard navigation between pages. 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. You can read more about this in the Soft Navigation (https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating) section.