Next.js - Client Side Navigation vs. changes in html

2
votes

I'm currently working through the next.js tutorial, but I'm struggling to understand the following:

The tutorial is telling me here, that clicking a <Link> element won't trigger a server request, and instead do "Client-side navigation", i.e. adjusting the page content with js:

The Link component enables client-side navigation between two pages in the same Next.js app. Client-side navigation means that the page transition happens using JavaScript

Three questions right away:

  • This sounds like regular SPA react routing without next.js etc. to me. But it isn't, right?
  • The <Link> still works if I disable javascript in Chrome dev tools. This shows that the transition is actually not happening with js. Is this a contradiction to their statement?
  • When I right click the page and click "view source" (in Chrome) I get different HTML before and after clicking the <Link>. (Contratry to the "regular" react behavior). How can this be considered "Client-side navigation"?

Going further in the tutorial, they tell me here:

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript

This statement sound like a contradiction to the other one quoted above. Can you help me to clarify this? When I click the <Link> what exactly is happening? Is a new html file loaded? If so, how can this happen "client side". Thank you!

1
reactjsnext.jsserver-side-renderingclient-side
I have the exact same question in 2021 :|, have you figured out the answer for it? Thank u in advance. – HM-Dave

1 Answers

2
votes

There!

I think the main concept that you should be getting familiar with Next.js framework is Server Side Rendering, which basically means that all contents of a page are pre-processed in the server, that ships to the browser the files already rendered, saving resources from the client-side of an application.

By default, all of your Next.js pages are pre-rendered when you use the build command.

Next.js also has its own <Link /> component which uses the next-router module to navigate between the pages.

By default, every <Link /> component in a page tells Next.js to pre-fetch that page and it's resources ( which will also be rendered by the server on the initial request from the browser ) and be "instantly available" when you click it.

I think the main basic difference than a regular SPA is that in those, when you change pages, it takes longer because they won't be already available to you.