dots Created with Sketch.
Yogesh Chauhan's Blog

How does Next.js load pages faster?

in NextJS on July 7, 2021

Next.js uses Client-Side Navigation to load the pages faster.

The Client-Side Navigation is enabled by the Link component and only between the pages in the same Next.js app.

So, if you add a link using an a tag then the faster pages switch won’t work!

What’s a Client-side navigation?

Client-side navigation is the transition of pages using JavaScript rather than the default transition/navigation by the browser itself.

When you use an a tag to switch between pages, the browser does a full refresh of a page but when you use JavaScript, it won’t does not load the full page.

How to check if the Client-side navigation is working?

Refer to this official gif from Next.js.

Links
  • First of all, add a link using Link component so that you can navigate to each page using link from another page.
  • Then, as you can see, you can change any CSS property of any element that exists on multiple pages.
    • In our case, we are changing the background-color of the html tag itself on both pages!
  • Now, simple visit both the pages and see if the background-color is there. If so, then the Client-side navigation is working.
  • If not, make sure you have added the Link tag to navigate to both pages.

Prefetch

Next.js also prefetches the code for the linked pages that are added using a Link component when they appear in the browser’s viewport. So, by the time you click on that Link, your code is already loaded and it gets served within seconds.

Code splitting

In Next.js, each page loads what’s necessary and that is achieved by splitting the code. That means, when you load one page, code for other pages is not served, which makes the initial rendering faster.

Code splitting helps create isolated pages so that if one page throws an error, other pages won’t get affected by it.

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
How to overwrite file contents with new content in PHP?PHPHow to make a Custom Login Page in WordPress?WordPressCreate a responsive image gallery using CSS gridCSSThe 8 Golden Rules of Programming I Have Learned in My CareerMiscellaneousHow Do You Make a Private VPN?MiscellaneousUse inline if to make a shorter conditional syntax in ReactReact