How does Next avoid page reload when navigating between pages?

Answered

House Finch posted this in #help-forum

House FinchOP

2023-09-28T10:29:18.000Z

I have 2 pages say /users and /todos
both pages use a fetch on the server to retrieve data to render...

  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users: User[] = await res.json();

each page also has a link to the other page...

<Link href="/todos">Go to Todos Page</Link>

So, If I hard reload the /users page.. I get a full page reload and Next downloads the fully rendered page (see pic).
Then if I click the 'Go to Todos page' link, Next does not do a full page reload, the page changes to the Todos page but the todos fetch is done on the server. only 3 things are visible on the network tab, a 'chunk' js and 2 weird requests.

This is obviously cool, I didn't want a page refresh, I did want the data to fetch on the server... but it's a lot of magic. How does this work? and when does it 'break'?

Answered by fuma

How does this work?

It's the magic of Next.js, the initial render is just static HTML reserved by the server so that no Javascript is needed.
This gives your application a good page load speed.

Afterward, Next.js only fetches the payload for pages when navigating. Since javascript is loaded, you no longer need static HTML anymore.
Hence, the payload only includes components, props, and paths pointing to required javascript/assets. the client will automatically download missing chunks.
This is also how Next.js prefetches a page, it fetches for payload rather than the whole page.

These rsc requests are the payloads (only exists on App Router)