Exploring Next.js: The difference between Client Side Navigation and direct html modifications

Question

Exploring Next.js: The difference between Client Side Navigation and direct html modifications

Currently, I am diving into the next.js tutorial, but there are some aspects that have me puzzled:

In the tutorial, it mentions here, that when you click a <Link> element, it does not trigger a server request but instead performs "Client-side navigation", which involves adjusting the page content with JavaScript:

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.

This raises three immediate questions:

To me, this sounds like standard SPA React routing without Next.js. Is that an accurate assessment?
Even if I disable JavaScript in Chrome's developer tools, the <Link> still functions. Does this contradict their statement about the transition happening with JavaScript?
After right-clicking on the page and selecting "view source" in Chrome, the HTML content before and after clicking the <Link> differs (unlike traditional React behavior). How does this align with the concept of "Client-side navigation"?

Moving ahead in the tutorial, it explains here:

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of relying solely on client-side JavaScript.

This seems to conflict with the previous statement. Can someone provide clarification? When I click the <Link>, what exactly occurs? Is a new HTML file loaded? If so, how is this considered "client side"? Thanks!

reactjs next.js server-side-rendering client-side

Answer 1

Answer №1

Let me explain my understanding:

The unique approach taken by Next.js in client-side navigation combines elements of SPA-style and traditional navigation

In SPA-style navigation, a "link" functions as a component with JS logic, without an actual <a> element. Clicking on it triggers the rendering of a new page through JS, making navigation impossible without JS enabled;
In traditional navigation, a link is represented by an <a> element which, when clicked, completely reloads the page. Even without JS, navigating to a different page is still possible;
Next.js navigation incorporates both approaches: a "link" operates as a component with JS logic while also containing an underlying <a> element. When clicked, JS executes to render the new page and override default <a> navigation. This means that even if JS is disabled, traditional navigation through the <a> element remains functional. The pre-rendered page gets fetched and loaded, thereby aiding SEO efforts (especially since web crawlers may not have JS capabilities) - a core problem addressed by Next.js.

To sum up, with JS enabled, Next.js navigation mimics SPAs; without JS, it behaves like traditional websites.

Additional Update:

I have created a video to illustrate this concept further: https://www.youtube.com/watch?v=D3wVDE9GGVE

Answer 2

Let me explain my understanding:

The unique approach taken by Next.js in client-side navigation combines elements of SPA-style and traditional navigation

In SPA-style navigation, a "link" functions as a component with JS logic, without an actual <a> element. Clicking on it triggers the rendering of a new page through JS, making navigation impossible without JS enabled;
In traditional navigation, a link is represented by an <a> element which, when clicked, completely reloads the page. Even without JS, navigating to a different page is still possible;
Next.js navigation incorporates both approaches: a "link" operates as a component with JS logic while also containing an underlying <a> element. When clicked, JS executes to render the new page and override default <a> navigation. This means that even if JS is disabled, traditional navigation through the <a> element remains functional. The pre-rendered page gets fetched and loaded, thereby aiding SEO efforts (especially since web crawlers may not have JS capabilities) - a core problem addressed by Next.js.

To sum up, with JS enabled, Next.js navigation mimics SPAs; without JS, it behaves like traditional websites.

Additional Update:

I have created a video to illustrate this concept further: https://www.youtube.com/watch?v=D3wVDE9GGVE

Answer 3

Answer №2

Greetings!

One crucial concept to grasp when delving into the world of Next.js framework is the idea of Server Side Rendering. This essentially involves preparing all page contents on the server side, sending already rendered files to the browser, thus conserving resources on the client-side of an application.

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

Moreover, Next.js boasts its own <Link /> component that utilizes the next-router module for seamless navigation between pages.

In a standard setup, each <Link /> component on a page prompts Next.js to preload that page and its resources (which will also be server-rendered upon the initial request from the browser) so as to be immediately accessible when clicked.

A key distinction compared to regular Single Page Applications (SPA) is that in SPAs, switching between pages typically takes longer since they are not readily available.

Answer 4

Greetings!

One crucial concept to grasp when delving into the world of Next.js framework is the idea of Server Side Rendering. This essentially involves preparing all page contents on the server side, sending already rendered files to the browser, thus conserving resources on the client-side of an application.

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

Moreover, Next.js boasts its own <Link /> component that utilizes the next-router module for seamless navigation between pages.

In a standard setup, each <Link /> component on a page prompts Next.js to preload that page and its resources (which will also be server-rendered upon the initial request from the browser) so as to be immediately accessible when clicked.

A key distinction compared to regular Single Page Applications (SPA) is that in SPAs, switching between pages typically takes longer since they are not readily available.

Answer 5

Answer №3

From what I understand:

To me, it seems like this is just regular SPA react routing without the use of next.js or similar frameworks. Am I correct in thinking this?

Yes, you are correct. It functions similarly to regular SPA react routing. When a user clicks on a Link, it will be handled by JavaScript much like Create React App.

I noticed that the functionality still works even if I disable javascript in Chrome's dev tools. This implies that the transition is not dependent on JavaScript. Does this contradict their statement?

This occurrence happens because when JavaScript is disabled, the Link simply behaves like a standard <a href="..." />. In this case, the browser recognizes it as an anchor element and actions associated with clicking work as expected since it relies solely on traditional HTML.

Upon right-clicking the page and selecting "view source" (in Chrome), I observed different HTML before and after clicking the link. This differs from typical react behavior. How can this be classified as "Client-side navigation" then?

The explanation lies in the following statement:

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

In essence, when you view the source, the browser fetches the server response to display the HTML. Since Next.js pre-renders, the outcome will vary across pages. This distinction has no relation to client-side navigation. However, displaying the browser response in view source may differ across browsers.

Answer 6

From what I understand:

To me, it seems like this is just regular SPA react routing without the use of next.js or similar frameworks. Am I correct in thinking this?

Yes, you are correct. It functions similarly to regular SPA react routing. When a user clicks on a Link, it will be handled by JavaScript much like Create React App.

I noticed that the functionality still works even if I disable javascript in Chrome's dev tools. This implies that the transition is not dependent on JavaScript. Does this contradict their statement?

This occurrence happens because when JavaScript is disabled, the Link simply behaves like a standard <a href="..." />. In this case, the browser recognizes it as an anchor element and actions associated with clicking work as expected since it relies solely on traditional HTML.

Upon right-clicking the page and selecting "view source" (in Chrome), I observed different HTML before and after clicking the link. This differs from typical react behavior. How can this be classified as "Client-side navigation" then?

The explanation lies in the following statement:

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

In essence, when you view the source, the browser fetches the server response to display the HTML. Since Next.js pre-renders, the outcome will vary across pages. This distinction has no relation to client-side navigation. However, displaying the browser response in view source may differ across browsers.

Exploring Next.js: The difference between Client Side Navigation and direct html modifications

Answer №1

The unique approach taken by Next.js in client-side navigation combines elements of SPA-style and traditional navigation

Additional Update:

Answer №2

Answer №3

Similar questions

A simple guide on how to easily retrieve the index of a StepConnector in MaterialUI

Setting today's date as the default option for the Material UI datepicker

Problem with session cookies not being included in cross-origin replies using Express, Redis, and Next.js

Execute JavaScript function on click event in NextJS

Why does "react-hot-loader/babel" cause issues in my build process?

Infinite API calls leading to performance issues in a NextJs application due to the utilization of JavaScript's toISOString

The function mustAsync onSuccess is not present in this type (typescript)

What could be the reason for the handleOpen and handleClose functions not functioning as expected?

Unusual behavior of Typescript with Storybook's addon-docs

I'm encountering a TypeError where setGameState is not recognized as a function. Any suggestions on how to resolve this

Combining Switch components with a universal NoMatch element in React Router Version 4

How can I convert base64 data to a specific file type using React Cropper JS?

Update the next-auth session object once the user has been successfully updated through a patch request

Updating ListItemText styles in MUI when active with react-router

"Customize the underline color of textfields in Material UI's Next Dialog

Using SVG files as properties in React from a data.js file

What is the method for including the `meta:redirect` or `<meta http-equiv="refresh" content="0; url=http://example.com" />` in the metadata object for Next.js version 13?

Error occurred while trying to launch React application with "npm start" command due to ELIFECYCLE issue

Server-side rendering issue arises post updating to Material UI 5 (with Next.js)

What impact does including a parent View Tag have on the styling in React Native?