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

Question

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!

Elute

I have the exact same question in 2021 :|, have you figured out the answer for it? Thank u in advance. – Nicollenicolson

@Nicollenicolson Please see my answer below: https://mcmap.net/q/1190048/-next-js-client-side-navigation-vs-changes-in-html, hopefully it will help :) – Heliochrome

Answer 1

Here is how I understand it:

The approach Next.js takes for client-side navigation is a mixture of SPA-style navigation and traditional navigation

• In SPA-style navigation, a "link" is a component with some JS logic. It does not have a <a> element. When you click on it, some JS will run to render the new page. If you disable JS then you can't navigate to a new page;
• In traditional navigation, a link is really a <a> element. If you click on it, then the browser will discard the current page and load the new page entirely. If you disable JS then you can still navigate to the new page;
• In Next.js navigation, a "link" is a component with some JS logic, but it also has this <a> element under the hood. When you click on it, some JS will run to render the new page and prevent the default <a> navigation. So even if you disable JS, you'll still be able to navigate in a traditional fashion through the <a> element. The pre-rendered page will be fetched and loaded. This is really useful in terms of SEO (as crawlers typically don't have JS enabled), and is the main problem Next.js wants to solve.

In short, when JS is enabled, Next.js navigation behaves just like in SPAs; when JS is disabled, it behaves just like in traditional websites.

Update:

I made a video to further demonstrate the concept: https://www.youtube.com/watch?v=D3wVDE9GGVE

Heliochrome

Thank you! It's already a year since I came across the issues, but this explanations makes perfect sense to me – Elute

I use <Link> instead of a href, but after the navigation, my browser download all the js, css files again. why? – Trophy

Answer 2

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.

Misconceive

Thank you, that already clarified a couple of things for me. However what I still don't understand: How can such a pre-fetched html be "instantly available", especially without js? Can a browser fetch a html file, cache it, and load it instantly on demand without js? – Elute

it is worth mentioning, althought, that after the initial request, the nextjs will then work as a "regular" SPA. The first (initial) request is handled by the server and after that the frontend handles the routing (at least in the case of Next.js). – Misconceive

Answer 3

AFAIK:

This sounds like regular SPA react routing without next.js etc. to me. But it isn't, right?

Yes. It's like a regular SPA react routing. When user clicks on Link, it will do it in JS just like CRA.

The 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?

This is happening because, if you disable JS, what you get is a simple <a href="..." />. ie, browser will still count it as a anchor element, click events will work as expected because it's just our old HTML.

When I right click the page and click "view source" (in Chrome) I get different HTML before and after clicking the . (Contratry to the "regular" react behavior). How can this be considered "Client-side navigation"?

Your answer lies in the next statement where:

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

ie, when you "View source" browser will hit the server and show you the HTML. Since Next prerenders, it will be different for different pages. This has nothing to do with client navigation. This behaviour of showing browser response in view source can vary from browser to browser though.

Loosing