Next.js Discord

Discord Forum

Prevent file from being "reloaded" multiple times in dev mode

Answered
Batimius posted this in #help-forum
Open in Discord
BatimiusOP
Hello there. I'll make this short. I have a file called getComparison.ts and in it there is the function getComparisonClass(). This function gets called by every API route and what it does is it checks if a Comparison class instance exists, and if not, creates one. The creation of the class should be done once and then any new calls should return that instance. This does work as it should when I build and run my application, but things get funky when in dev mode. Whenever in dev mode, for every page that gets "compiled", the file gets refreshed, getting rid of the saved variable completely. Of course, this messes up my application entirely.

My question is, how would I be able to prevent the file from being "reloaded" every time I make an API request while in dev mode? I'll link the code below, as well as two pictures of how it should be VS how it is. Thank you for your time and help!
Answered by Rafael Almeida
I don't think there is a way to reliably cache a module without using a custom server. If you go the custom server route you can cache this service in the app entrypoint and somehow pass it to each page render function, but I never did that so I am not sure how it would look like

The issue with using a custom server is that it has a few limitations and I am not even sure if you can use the app dir with it, you might need to use the old router
View full answer

10 Replies

BatimiusOP
// Import \\

import Comparison from "./ComparisonClass"

// Variables \\

var currentComparison: Comparison

console.log("\x1b[103mINITIALIZED!!!\x1b[0m")

// Exports \\

export async function getComparisonClass(): Promise<Comparison | undefined>
export async function getComparisonClass(create: boolean): Promise<Comparison>
export async function getComparisonClass(create?: boolean): Promise<Comparison | undefined> {
    console.log("\x1b[96mI've been summoned!!\x1b[0m")

    if (create && !currentComparison) {
        const comparison = new Comparison()
        await new Promise((resolve) => {
            comparison.comparisonEvent.on("ready", () => {
                resolve(0)
            })
            comparison.create()
        })
        currentComparison = comparison
    }
    return currentComparison
}
How the output should look like (app running normally):
How it actually looks like (app running in dev mode):
@Rafael Almeida Shouldn't the "Initialized" log be inside the code branch that instantiates the class? 🤔 Either way, this is not really unexpected because your code should not rely on module caching, each page in production is a different process (if deployed to lambdas) so the cache won't be shared anyway
BatimiusOP
Ah. Well, all API routes are dynamic (the app itself won't really be deployed, just making this for practice plus for some friends to use), and I kind of need all of them to use the same Comparison instance (my whole app revolves around the interaction of that one class instance). Is there a way for me to somehow "cache" the currentComparison in dev mode?
(If needed for any reason, I can make the whole GitHub repository public if it helps)
Rafael Almeida
I don't think there is a way to reliably cache a module without using a custom server. If you go the custom server route you can cache this service in the app entrypoint and somehow pass it to each page render function, but I never did that so I am not sure how it would look like

The issue with using a custom server is that it has a few limitations and I am not even sure if you can use the app dir with it, you might need to use the old router
Answer
Rafael Almeida
Yeah I would recommend trying to change the architecture of the code so it doesn't rely too much on a class instance and module caching, but if nothing really works with what you are trying to do then a custom server might be the way to go, especially since you aren't actually deploying the app