Skip to main content

Refreshing a page versus navigating

In Next.js, the behavior you observe when refreshing a page versus navigating to it from another page is due to how Next.js handles server-side rendering (SSR) and client-side navigation.

Refreshing a Page​

  • Server-Side Rendering (SSR): When you refresh a page, Next.js performs a full server-side render of the page. This means that all components, including client components, are pre-rendered on the server and sent to the client as fully rendered HTML. This is why you see the client component instantly, as it is part of the initial HTML payload.

  • Hydration: After the HTML is loaded, Next.js hydrates the page by attaching React's event listeners to the pre-rendered HTML. This process is usually fast and seamless, making the page appear interactive almost immediately.

Navigating from Another Page​

  • Client-Side Navigation: When you navigate from one page to another using Next.js's built-in <Link> component or next/router, the navigation is handled on the client side. This means that only the JavaScript bundle for the new page is fetched, and the page is rendered on the client.

  • No Initial HTML: Since the page is not pre-rendered on the server during client-side navigation, the client component is not instantly visible. Instead, the component is rendered after the JavaScript bundle is loaded and executed.

  • Loading States: During client-side navigation, you might see loading states or skeletons if they are implemented, as the components are being fetched and rendered on the client.