Does each imported module in a Next.js app run multiple times?

There is a common understanding that when a module is imported multiple times within a JavaScript program, it only executes once during the first import.

Informative article:

The concept is straightforward: each module is evaluated just once, meaning the module-level scope is only executed once. Subsequent imports of the same module skip re-evaluation and make use of the previously resolved exports.

This explains why code placed above a React component runs only once, as mentioned in the official documentation:

Certain logic should be executed only once when the application starts. By placing it outside your components...it ensures that this specific logic runs just once after the page loads in the browser.

My inquiry pertains to Next.js on Vercel:

Do imports run only once when the site is built, and not again thereafter?

Or does this behavior vary between static and dynamic routes (pages)? For example, a static page may execute an import only during build time, while a dynamic route triggers the import every time the page is visited in a browser?

Answer №1

Affirmative, in a Next.js application, modules are executed multiple times when they are imported.

Negative, imports do not solely execute once during the site's construction and then never again.

You can easily verify this in development mode. Within your module:

// main module file
import { v4 as uuid } from 'uuid'

[...]

console.log(`module import ${uuid()}`)

Upon inspecting the browser console, you will notice one output with a specific uuid and another output server-side with a different uuid. This occurs even if the module is imported just once from client-side code (for example, a hook).

Each time a visitor accesses your website, an import takes place on the client-side. On the server side, it is uncertain but likely that the module gets imported upon restarts, deployments of new versions, etc. While my understanding of Vercel's inner workings is limited, utilizing SSR could result in instances where multiple copies of your module run concurrently on the server side.

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

Tips for deleting the displayed URL during a web page print in PHP

Is there a way to remove the URL from a page when printing using PHP? I want to achieve this without requiring my clients to change their browser settings. Any assistance would be greatly appreciated! ...

Creating personalized Date and Time formatting on the X axis in Lightningchart JS

I have an X-axis representing time intervals in 15-second increments. ["2020-05-22 14:20:22", "173.9"] ["2020-05-22 14:20:40", "175.3"] ["2020-05-22 14:20:58", "172.4"] In my attempt to add this data to the chart, I used the following code: for(var key ...

HTML table containing radio buttons styled with Font Awesome icons

I'm having some trouble getting a radio button with Font Awesome to work properly within an HTML table. Outside of the table, it functions as expected, but inside the table, it only seems to hide/show between the two states without displaying the chec ...

Set the value of one email input to another email input in AngularJS

I'm having trouble trying to link an email input field to another in angularjs without success. Here is what I have attempted so far: <div class="row-fluid"> <div class="control-group span12"> <label for="email">Email</labe ...

Deciphering JavaScript's Minus Equals Operator: What's the Significance?

Can you explain the significance of the minus equals symbol -= in the following code snippet? $('#wrapper').animate({ backgroundPosition: '-=2px' })(); Appreciate your help! ...

Updating Angular view based on service parameter change

In-depth Inquiry I have a specific setup with a header view and a main view in my Angular application. The goal is to include a "back" button in the header that should only be visible based on the current page I'm viewing. Actions Taken In my app ...

Ways to eliminate an item from an array when the value of the object is not present

I am facing an issue with removing objects from an array that do not contain the data object. I have attempted to use the filter method but have not been successful. results.filter(obj => obj.data === undefined) results = [ {id: 1, location: 'a&a ...

Utilizing various filters and sorting options on API response within Angular 8

Upon receiving the following API response: [ { "imgPaths":[ "gallery/products/55ccb60cddb4d9bded02accb26827ce4" ], "_id":"5f3e961d65c6d591ba04f3d3", "productName":" ...

How should we provide the search query and options when using fuse.js in an Angular application?

Having previously utilized fuse.js in a JavaScript project, I am now navigating the world of Angular. Despite installing the necessary module for fuse.js, I'm encountering difficulties implementing its search functionality within an Angular environmen ...

Ways to display only particular dates in react-dates

I am working with an array of dates. const availableDates = ["2019-02-01", "2019-02-04", "2019-02-05", "2019-02-06", "2019-02-07", "2019-02-11", "2019-02-12", "2019-02-13", "2019-02-14", "2019-02-15", "2019-02-19", "2019-02-20", "2019-02-21", "2019-02-22" ...

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

Issues with validating the Google Maps API JavaScript tag

Currently working on updating a website to be fully validated with HTML5 using W3C standards. Having trouble validating the Google Maps API JavaScript tag in the code snippet below: <script src="http://maps.googleapis.com/maps/api/js?libraries=places& ...

Issue: Cannot assign type 'Promise<PostInfo>[]' to type 'PostInfo[]' while updating state

At the moment, I am facing an issue with my function that fetches an API and updates state. Specifically, I encounter an error when attempting to assign a Promise to the state. type DataState = { postList: Array<PostInfo>: }; const [state, setSt ...

Prevent the default scroll event triggered by the mousewheel in certain situations. It is not possible to use preventDefault within a passive event

I have a div element with the onWheel attribute. By default, the browser interprets onWheel as scroll behavior. However, I want to prevent the browser's default mouse behavior under certain conditions. Unfortunately, I encountered an error that say ...

Display dynamic web content developed with JavaScript for public viewing

As a newcomer to the world of web development, I'm not sure if it's possible to achieve what I have in mind without using PHP. However, I'm willing to give it a shot. Currently, my webpage functions perfectly with JavaScript, HTML, and CSS, ...

Obtain the final value within a URL's path segment

If we have an href similar to: http://localhost:8888/#!/path/somevalue/needthis Is there a way to extract the last value in the path string (i.e., "needthis")? I experimented with window.location.pathname, but it only returns "/". Another attempt was m ...

Resetting values in Javascript and JQuery when clicking a button

I've recently implemented a feature on my website header where clicking on the search button reveals a search bar, and clicking on the account button reveals an account bar. With some valuable assistance from Madalin, I was able to achieve this functi ...

Establishing a link between numerous web browsers solely through client-side technology

After creating a compact AJAX-powered chat application, I wonder if it is feasible to handle all the communication client-side. Can individual pages recognize each other and share real-time updates without involving the server? Is there a way to achieve th ...

A guide to accessing the innerHTML of a div using React

My current setup involves creating an editable-content field as shown below const Input = () => { const Enter = () => { ... } const Editable = () => ( <div className={"editable"} contentEditable={"true"}> This i ...

"Discovering the method to showcase content based on page number or when the 'previous' or 'next'

Here is how my Vue component looks like: <template> ... <b-col v-for="item in items" v-bind:key="item.id" cols="2"> ... <strong slot="header" class="text-dark" :title ...