What exactly is the purpose of measuring "First Load JS" in the @next/bundle-analyzer tool?

The analysis generated by the NextJS bundle analyzer appears as follows:

Page                                                                         Size     First Load JS
┌ λ /                                                                        12 kB           368 kB
├   └ 79.202101.46dabc.chunk.css                                             10.3 kB
...
+ First Load JS shared by all                                                195 kB
  ├ chunks/0e69992b3e9a8d51f37748cf97b75268d47a0f0c.f372af.js                27.6 kB
  ├ chunks/cf0e5769c2fa5761a95adfa95a4e062fb86f8f05.272397.js                91.4 kB
  ├ chunks/commons.9707f2.js                                                 9.01 kB
  ├ chunks/framework.efaa9a.js                                               46.9 kB
  ├ chunks/main.9965a5.js                                                    6.39 kB
  ├ chunks/pages/_app.a4ce0d.js                                              11.4 kB
  ├ chunks/webpack.8e3a04.js                                                 2.72 kB
  └ 62.202101.796f1f.chunk.css                                               3.7 kB

Can someone clarify what exactly "First Load JS" signifies and why it does not add up to the total of "First Load JS shared by all" along with the sizes of the page and its sub-pages? According to this data, one would anticipate that "First Load JS" equals 12 kb + 10.3 kb + 195 kb, rather than 368 kb.

Appreciate any insights on this matter.

javascriptnext.js

Answer №1

According to the documentation:

Size – Refers to the number of assets downloaded when a user navigates to a page client-side. This measurement only includes dependencies for each route.

First Load JS – Indicates the number of assets retrieved when a user initially visits the page from the server. The shared amount of JavaScript is displayed as a separate metric.

If you find the above explanation confusing due to circular references, you're not alone. It can be even more perplexing in your case with only one listed route (although there are likely more that were cut off). However, the docs do mention that the information provided pertains to each route specifically.

Essentially, when a user lands on the site for the first time, they will download the First Load JS specific to their requested route from the server before proceeding to load additional assets client-side while the page loads.

The presentation of this data may seem convoluted at first, but once you grasp the terminology, the numbers start to make sense.

On a separate note, First Load JS shared by all refers to JS assets common across and loaded for every single route visited. In your scenario, the shared value equals 195KB, which approximately corresponds to the sum of (27.6+91.4+9.01+46.9+6.39+11.4+2.72) ...excluding CSS since it's excluded for being non-JS (a seemingly arbitrary distinction).

The significance of the "shared by all" metric lies in the potential reduction of necessary downloads on each route if you manage to minimize this figure, making it an ideal starting point for optimization efforts.

If the aforementioned details still leave you puzzled, perhaps a clearer breakdown would look something like this:

Page Route-Specific Client-Side Route-Specific Server-Side Total Server-Side Total (Server + Client)
/ 12KB 161KB (368KB - 195KB - 12KB) 356KB (368KB - 12KB) 368KB

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

javascriptcssreactjsstyled-components

The issue with Next.js getStaticProps() is that it is not accurately rendering static HTML

Here is an example of my component: import React from "react" function team(props) { return ( <> <h2>Team members:</h2> <ul> {props.members.map((member) => { return <li>{mem ...

reactjsreduxnext.js

What is the process for removing the body of a table?

My goal is to reset the table body, which has been filled with JavaScript loaded data previously. https://i.stack.imgur.com/7774K.png ` getTableData = function (clicked_id) { if (clicked_id != '') { $.ajax({ async : f ...

javascriptphpjqueryajax

Several adhesive panels on a dynamic webpage

In the content area of my page, a dynamic number of rows are generated. Each row consists of two columns: a side block and a content area. The goal is to have the side block stick while the page scrolls down until the next block appears and pushes the prev ...

javascripthtmlcssmootoolssticky

Using AJAX to save data while dealing with duplicated forms

Project Details: In the midst of developing an asp.NET web application, I am faced with a challenge. The user interface (UI) I have created allows users to generate multiple instances of an object by inputting data into forms. Consequently, numerous ident ...

javascriptajaxasp.net-coreasp.net-web-apiasp.net-ajax

Blending ASP.NET Core 2.0 Razor with Angular 4 for a Dynamic Web Experience

I am currently running an application on ASP.NET Core 2.0 with the Razor Engine (.cshtml) and I am interested in integrating Angular 4 to improve data binding from AJAX calls, moving away from traditional jQuery methods. What are the necessary steps I need ...

javascriptangulartypescriptasp.net-core-mvcrazorengine

Error encountered: JSHint is flagging issues with setting a background gradient using

I have been experimenting with animating a background gradient using jQuery, and here is the code snippet I am working with: this.$next.css('line-indent', 0).animate({ 'line-indent': 100 }, { "duration": 750, "step": functi ...

javascriptjqueryjshint

Is it possible for SEO/Google Crawler to detect the hidden URL when using nextjs Link?

Is Nextjs Link SEO-friendly? How can I optimize it for SEO? I have multiple Link elements on my landing page, each linking to a different page on my website. For example: <Link href='/california-hotels'> California </Link>, <Link ...

reactjsnext.jsseo

Is utilizing getStaticProps the best approach for handling offline data in Next.js?

My current project in Next.js involves offline static data for the webpage content. I am using an array to store the data for later mapping. Do you recommend using getStaticProps in this scenario? For example, here is a snippet of my code: import { data } ...

javascriptnode.jsreactjsapinext.js

What is the best way to bring files into your project from a different directory?

Recently, I've been working on an app that consists of a backend repo and 2 frontend repos. Now, I'm facing the challenge of sharing code between these two frontend repos. app/ mySecondApp/ Despite my efforts, I'm unable to successfully imp ...

javascriptreactjs

Importing the class results in an undefined outcome

In the process of developing my Vue app, I'm focusing on creating some helper classes: File a.js: export default class Base {//...} File b.js: import Base from "./a" export default class Middle extends Base { // ... } File c.js: import Mi ...

javascriptvue.js

JavaScript radio button returning value as undefined issueThe problem with radio buttons

http://jsfiddle.net/jngpjbjm/ Take a look at the provided fiddle link. I'm having an issue where the radio button value is showing up as undefined. I can't figure out why this is happening. Any assistance would be greatly appreciated. <input ...

javascripthtml

Primary tag badge using Bootstrap design

I am currently following a React tutorial by Mosh, where he is using the badge badge-primary class in a span tag. import React, { Component } from "react"; class Counter extends Component { state = { count: 0, }; render() { return ...

javascriptreactjs

Having trouble with Ajax not sending data to PHP in JSON format

After attempting various methods using different ajax techniques, I still cannot get this to work. Being new to ajax and json, I initially thought that the issue might be due to the data not being in a proper form. However, other ajax processes structured ...

javascriptphpjqueryajaxjson

What is the process for adding a Background Image in Nextjs?

In my current project, I am utilizing Nextjs and Material-UI. However, I have encountered an issue when trying to set a background image compared to previous projects using React. As this is my first time working with Nextjs, I attempted importing Image ...

next.jsmaterial-uibackground-image

Locate a string containing a series of words separated by a character, with the last word being able to end with any combination of characters through the use of regex

Here are some words to consider: const words = ["apple", "orange", "tomato"] const str = "apple.orange.tomato.$COULD_$_BE_ANY_STRING_HERE" I am in search of a regular expression to verify the format of this string. ...

javascriptregex

Is there a better option than using public methods when transitioning from class-based to function-based React components?

When working with React components that utilize hooks, they must be function-based rather than class-based. I've encountered a challenge transitioning from calling methods on child components in class-based components to achieving the same functionali ...

javascriptreactjsreact-hooks

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

My current task involves sending the same query to multiple identical endpoints (about five) across various Kubernetes clusters. The goal is to aggregate the results without any delays and report failures to the user while continuing with the process seaml ...

javascripttypescriptpromisecancellation

Rely on the razor method for generating URLs

I need to direct to a specific page, so I have implemented a JavaScript function in my MVC project: function rootUrl(url) { var _rootUrl = '@Url.Content("~")'; var x = url; if (url. ...

javascriptjqueryasp.net-mvcrazor

Tips for troubleshooting ImageArray loading issues in AngularJS

Having some trouble learning Angular and getting stuck with this Image array. Can someone please help me understand what's wrong with my code and how to fix it? FilterAndImages.html <!DOCTYPE html> <html ng-app="store"> <head> < ...

javascriptangularjshtml