Next.js: Calling import from different endpoint executes the code again - node.js

Question

Here's the simplified example I made for this question.
Let's say I want to keep a state on the server side.
components/dummy.ts
console.log('init array')
let num: number = 0
const increment: () => number = () => num++
export { increment }
Also I have two end-points, p1 and p2 that I want to share that state.
pages/api/x/p1.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { increment } from '../../../components/dummy'
export default function handler(
req: NextApiRequest,
res: NextApiResponse<number>
) {
res.status(200).json(increment())
}
pages/api/x/p2.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { increment } from '../../../components/dummy'
export default function handler(
req: NextApiRequest,
res: NextApiResponse<number>
) {
res.status(200).json(increment())
}
These are are the two APIs, and then I have some pages fetching the same using getServerSideProps
pages/x/p3.tsx
import { GetServerSideProps } from 'next'
import React from 'react'
import { increment } from '../../components/dummy'
interface CompProps {
num: number
}
const Comp: React.FC<CompProps> = ({ num }) => <>{num}</>
export default Comp
export const getServerSideProps: GetServerSideProps = async ({}) => ({
props: {
num: increment(),
},
})
pages/x/p4.tsx
import { GetServerSideProps } from 'next'
import React from 'react'
import { increment } from '../../components/dummy'
interface CompProps {
num: number
}
const Comp: React.FC<CompProps> = ({ num }) => <>{num}</>
export default Comp
export const getServerSideProps: GetServerSideProps = async ({}) => ({
props: {
num: increment(),
},
})
So basically 2 issues.
On Dev (yarn dev)
Now when I hit api/x/p1 I get a 0 then 1, 2, 3.
But now when I hit api/x/p2 I get a 0, and now p1 is also reset to this new value, from this point on, p1 and p2 are sharing the same state. I can alternate between p1 and p2 and get a constant increment.
What I want to understand here is the nature of import.
How can I avoid the code to run again with each import coming from a new end-point.
On Prod (yarn build && yarn start)
On prod it's better because api/x/p1 and api/x/p2 share the same state.
But by using GetServerSideProps api/p3 and api/p4 share the same state between themselves. But that is a different one shared by p1 and p2.
So basically using the /api routes and GetServerSideProps have their own state that's not being shared.

Answer 1

I couldn't reproduce you issue.
I've created a sample project in order to check the module behavior, and have confirmed that the modules are imported only once, cached, keeping state.
Check it out:
/* index.js */
import './mod1.js'
import './mod2.js'
/* mod1.js */
import { increment } from "./shared.js";
setInterval(() => {
increment()
}, 2000);
/* mod2.js */
import { increment } from "./shared.js";
setInterval(() => {
increment()
}, 2000);
/* shared.js */
let num = 0
const increment = () => {
num++
console.log(num)
}
export { increment }
node index.js
outputs:
1
2
3
4
5
6
7
8
^C
My guess: When you're running the app in development mode, NextJs compiles modules on demand, when it's needed. So, when you go to the first route, you can see in stdout (vscode console) nextjs printing logs compiling files. When it finishes, there's a feature in development mode called hot-reload which will load automagically the new compiled module into memory. Then, when you go to the second route, the other module starts compiling, and when is ready, Next Js will hot reload this new fresh module into memory. This sometimes may cause the state of the app to be reset (unload modules then reload it again). I guess this is whats happening. To confirm, you can try run the builded app (next build command). Then there will be no hot reload when running the compiled/bundle application, so no state will be changed.