Nuxt extremely slow on initial request

[kirkbushell]

Environment

• Operating System: Darwin
• Node Version: v16.19.1
• Nuxt Version: 3.4.3
• Nitro Version: 2.3.3
• Package Manager: npm@8.19.3
• Builder: vite
• User Config: css, modules, postcss, rootDir, runtimeConfig, vuefire
• Runtime Modules: nuxt-vitest@0.6.10, nuxt-vuefire@0.1.6, @pinia/nuxt@0.4.9
• Build Modules: -

Reproduction

Start a nuxt project, run npm run dev and then open the site in the browser, now go make a coffee.

Describe the bug

After running: npm run dev, and opening the site in the browser, that initial request takes 2-3 minutes. After that, refreshes are instant.

Additional context

No response

Logs

No response

[warflash]

I guess 2 minutes for really large projects on low performance machines is nothing unreasonable? Depends a lot on your exact setup and project so you might want to provide a reproduction project + specs if you feel like you're running into a bug of sorts.
IIrc docker on mac os has some issues but that's not limited to nuxt, also #20179 is something you might want to check out as that PR specifically adresses dev startup performance

[danielroe]

Would you provide a reproduction? 🙏

[kirkbushell]

I guess 2 minutes for really large projects on low performance machines is nothing unreasonable? Depends a lot on your exact setup and project so you might want to provide a reproduction project + specs if you feel like you're running into a bug of sorts. IIrc docker on mac os has some issues but that's not limited to nuxt, also #20179 is something you might want to check out as that PR specifically adresses dev startup performance

Assuming I had a low-performance machine, sure.

I guess the question is WHY is it doing this?

I took a look at the PR, I don't think the watcher is the issue.

I've also tried disabling SSR, no improvement. Just what on earth is Nuxt doing on that initial request?

[danielroe]

A slower first request is typically due to vite performing on-demand transpilation of the assets needed to render a page. (This can be client-side, not just SSR.)

But 2-3 minutes is not expected behaviour. Which is one reason why I asked for a reproduction.

[kirkbushell]

@danielroe yeah fair enough. I don't see it on native vue apps, using vite, so not sure.

I'll setup a repro.

[glennovische]

Having the same issue, after building to our test env the first initial load is like SUPER slow....

[danielroe]

@glennovische Could you open a new issue with a reproduction? This issue is about dev server initial request performance.

[warflash]

@glennovische This issue in particular is for dev env slow initial requests. Things like vites initial transpilation don't apply to a built app. I'd probably recommend you open a new issue for built apps alongside a reproduction😊

---

damn daniel beat me to it :D

[tobychidi]

I just started experiencing this after pulling up a Nuxt3 version rc12 or something in a new " supposedly better" pc. I have now updated all dependencies but pnpm run dev takes minutes to run. Why could this be happening? to fix this issue I have restarted several times, deleted and reinstalled with node_modules no fix yet. My project is almost empty and I am still troubleshooting. Will start a fresh nuxt project and see if I have the same problem.

Current output:

Vite warmed up in : 32235ms
Nitro built in 165784ms

🙆‍♂️

[tobychidi]

Oh. Wow. Brand new nuxt project

Nuxi 3.5.1                                                                                                                                                                                             14:26:06  
Nuxt 3.5.1 with Nitro 2.4.1                                                                                                                                                                            14:26:06
                                                                                                                                                                                                       14:26:12
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.73.17:3000/

ℹ Vite client warmed up in 16534ms                                                                                                                                                                     14:26:34  
✔ Nitro built in 105166 ms                                                                                                                                                                       nitro 14:28:08
✔ Vite server hmr 19 files in 3808.515ms       

This is unexpected.

My Environment

• Operating System: Windows_NT
• Node Version: v18.16.0
• Nuxt Version: 3.5.1
• Nitro Version: 2.4.1
• Package Manager: pnpm@8.5.1
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

[danielroe]

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here.

The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

[tobychidi]

Oh Wow. That was it. 😅

[kirkbushell]

Happening on mac as well.

[dickofn]

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here.

The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

how and where to set these settings @danielroe ?

[tobychidi]

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here.
The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

how and where to set these settings @danielroe ?

In nuxt.config.ts like this

export default defineNuxtConfig({
   experimental: {
      watcher: "chokidar",
   },
})

[dickofn]

can confirm this fixes my slow start problem

export default defineNuxtConfig({
   experimental: {
      watcher: "chokidar",
   },
})

[HugeLetters]

+1
My start-up time on a fresh project went from 1+ minutes to ~5 seconds.

[sonofmagic]

After I add this config to nuxt.config.ts, Vite client warmed up still very very slow.

repo url: Atinux/content-wind/demo

Operating System: Win10
Node Version: v16.14.2
Nuxt Version: 3.5.1
Nitro Version: 2.4.1
Package Manager: pnpm@8.5.1
Builder: vite

nuxt.config.ts:

export default defineNuxtConfig({
  extends: 'content-wind',
  experimental: {
    watcher: "chokidar",
  },
})

[kirkbushell]

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here.

The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

Where do you define that? I set it up in the nuxt.config.ts as:

experimental: {
    watcher: 'chokidar'
},

And I still see 132 seconds to warm up nuxt server.

[danielroe]

@kirkbushell Nuxt v3.5.2 should no longer have the regression I described above (so no need to modify your config). There is an open PR that should resolve the original issue here but if you can provide a reproduction I can confirm that.

[adiramardiani]

Is any update on this issue ?
Btw my development experience is so bad, I dont know this related to nuxt content, tailwind, or any other thing
But currently my startup time is CRAZY slow, any one experience the same thing again ?
My env is WSL try chokidar, parcel and is same :(

Just wait 3 minute for nitro built :(

[danielroe]

@adiramardiani Would you open a new issue with a reproduction? 🙏 This is really not okay and we want to resolve it for you.

[pi0]

It is likely that in windows something is being wrongly bundling in dev mode. Reproduction would greatly help to resolve relevant issues 🙏

[khalidzamer]

I have a similar issue, in dev mode, the app loads , but it takes another minute or so in the browser to load color mode switcher in the header and for Pinia to become available, meanwhile, some components are available on the page but not interactive I suspect it has to do with anything ClientOnly or Pinia in a project, even if the project is a simple page with a simple layout it is frustrating I hope the issue is analyzed ,

In build mode it does not have this problem

[danielroe]

@khalidzamer We can investigate if you are able to provide a reproduction.

[khalidzamer]

@danielroe , my hero, while I was establishing a new repo that I can share publicly, I tried adding the same packages and configs gradually.. I might have discovered what is causing the issue on my side,

I so far suspect the issue is using localhost vs 127.0.0.1 in the browser has an obvious impact,

localhost takes longer to load the color mode switcher, which is loaded a bit delayed after the header, while with 127.0.0.1 the difference is reduced drastically,

I tried it in my original working app and the reload time difference is massive and the pain is gone!

Speaking of localhost vs. 127.0.0.1 vs 0.0.0.0 , I also notice impact in /server/api requests as well which might behave differently when local vs when deployed, what is your recommendation?

[pi0]

@khalidzamer Can you check nuxi --version? If it is latest (3.8.3) for windows and WSL it should use 127.0.0.1 by default.

[khalidzamer]

@pi0 yes Pooya , that's when I noticed the change in default behavior and suspected something is wrong, although I had this slow behavior last week in previous version, thank you for your efforts

[stevenhurth]

Just wondering ... Any chance the issue with using "localhost" on windows will get addressed?

It will take some time for our development team to get used to using 127.0.0.1 for our nuxt apps.

[pi0]

@stevenhurth That's true. At that very moment, I had been drafting unjs/listhen#126.

So sorry for all the frustrations on this matter. As a security measure, we had to limit the default host and it introduced unforeseen edge cases.

[stevenhurth]

@stevenhurth That's true. At that very moment, I had been drafting unjs/listhen#126.

So sorry for all the frustrations on this matter. As a security measure, we had to limit the default host and it introduced unforeseen edge cases.

No worries at all! Thank you for jumping on it!

[randybastian777]

any update?.
i still have this issues. i cannot use any solutions here.
Windows 11
WSL2 -> Ubuntu 22.04
Nuxt: 3.7.1

WARN Slow module @nuxt/devtools took 55013.7ms to setup.
ℹ [nuxt] compiled plugins/client.mjs in 622.37ms
ℹ Vite client warmed up in 70789ms
✔ Nitro built in 180942 ms

[50l3r]

@danielroe , my hero, while I was establishing a new repo that I can share publicly, I tried adding the same packages and configs gradually.. I might have discovered what is causing the issue on my side,

I so far suspect the issue is using localhost vs 127.0.0.1 in the browser has an obvious impact,

localhost takes longer to load the color mode switcher, which is loaded a bit delayed after the header, while with 127.0.0.1 the difference is reduced drastically,

I tried it in my original working app and the reload time difference is massive and the pain is gone!

Speaking of localhost vs. 127.0.0.1 vs 0.0.0.0 , I also notice impact in /server/api requests as well which might behave differently when local vs when deployed, what is your recommendation?

I confirm that indeed using 127.0.0.1 instead of localhost has a significant impact:

😁 127.0.0.1

chrome_KR2dvXWubI.mp4

😴 localhost

chrome_Xmzq1DRzQ0.mp4

[MGA1600]

Switching from localhost to 127.0.0.1 did the trick for me.
Using Nuxt 3.7.4.
Initial page load went from around 20 seconds to < 1 second.

[garbit]

Experiencing the same issue of slow build / laggy hot-reload:

"nuxt": "^3.7.4"

The fix for me was to use 127.0.0.1:3000 and updating my run command to use nuxt dev --host 127.0.0.1.

[Lars-Apply]

this is still an issue - does Nuxt 3 not support 'localhost'?

[awssam]

this is a real problem i run this on my machine

CPU
Intel Xeon-E 2386G - 6c/12t - 3.5 GHz/4.7 GHz
RAM
32 Go ECC 3200 MHz
Storage
512 Go SSD NVMe

taking almost 1 minutes to run the first request, can not move any further with this, with my laptop 2 minutes as well , even i am on my first steps on the project,

[MateuszZaniewski]

Im too having this problem. App takes about 30-40 sec to load, nitro 40sec. Any HMR is dead for now. Any change in text or style takes about 10-15 sec to load. Changing from localhost to IP does not help :/. Anyony have other solution?

[mklueh]

Same here.

ℹ Vite client warmed up in 27239ms
[nitro] ✔ Nitro built in 25354 ms
ℹ nuxt.config.ts updated. Restarting nuxt...
ℹ Vite server warmed up in 33279ms
ℹ ✨ optimized dependencies changed. reloading (x2)
ℹ Vite client warmed up in 41256ms
[nitro] ✔ Nitro built in 14183 ms

And the page is barely loading at all.

I'm only using these plugins

  modules: [
    "@unocss/nuxt",
    "@nuxt/content",
    "@vueuse/nuxt",
    "nuxt-icon",
  ],

and it's just a really small blog that once was pretty fast in it's current state with the same dependencies.

[danielroe]

@mklueh It looks like you're using 3.8.1 which was meant to seriously improve this. Would you see if you can open a minimal reproduction or share access with me?

[MateuszZaniewski]

Im too having this problem. App takes about 30-40 sec to load, nitro 40sec. Any HMR is dead for now. Any change in text or style takes about 10-15 sec to load. Changing from localhost to IP does not help :/. Anyony have other solution?

I manage to solve this issue. For me it was primevue combined with tailwind - unistall them too make HMR runs again, also vite reduced from 30-40 sec to 10.

In my opinion it was some collision between styles (my css files, tailwind and primevue styles). First I tried removing all <style> tags from every file in my App and i helped to reduce time by half, but waiting 5-6sec to see any changes its still anoying. I hope this helps someone.

[existe-deja]

I just noticed the DOM inspector panel in firefox developer console is related to this. Other panels works fine, but the if the DOM inspector is open it's a nightmare

[rospirski]

Experiencing the same issue of slow build / laggy hot-reload:

"nuxt": "^3.7.4"

The fix for me was to use 127.0.0.1:3000 and updating my run command to use nuxt dev --host 127.0.0.1.

Very nice, it worked for me
THANKSS

[ThomasFindlay]

The same issue still persists with Nuxt 3.8.1. On localhost, the requests to fetch all imports take ages and sometimes even result in a few reloads when Vite finds a new dependency. When serving the app via 127.0.0.1 it's much, much faster.

[Plinpod]

--host 127.0.0.1

Identical issue for me on 3.8.1

localhost is painfully slow, while 127.0.0.1 works fine. Does anyone have a clue why?

Environment is setup via WSL on Windows.

[number304]

Same on mac, 127.0.0.1 is at least better (not by much). I'm using the server directory and it takes ages to load, specially on localhost. Nuxt version 3.8.2

[ManuelOchagavia]

The same for me. Using Nuxt 3.8.2.
The environment is WSL.
Using 127.0.0.1 changed the page load from ~50 secs to <1 sec

[AlansCodeLog]

I was having a similar issue, warmup + nitro build were taking forever. Turns out for me the problem was I had a some large directories in the folder (was trying out .direnv on nix + I had electron building to a non-standard dir .output-electron). After ignoring them times went down from 1 minute or more to just 5 seconds.

[tobychidi]

I was having a similar issue, warmup + nitro build were taking forever. Turns out for me the problem was I had a some large directories in the folder (was trying out .direnv on nix + I had electron building to a non-standard dir .output-electron). After ignoring them times went down from 1 minute or more to just 5 seconds.

How did you implement the ignore? Starting my dev server takes ages. And Nuxt-ui is always being reported as a slow module.

[AlansCodeLog]

@tobychidi Sorry I didn't clarify. You can use .nuxtignore or the ignore option in the config is the same thing.

Am using nuxt now for more complicated projects and putting everything in the root then scanning nearly everything by default is not a good default imo.

Personally I've switched to putting everything in src (using the srcDir option) to avoid any further issues. You can then do the following in the nuxt ignore:

./* # ignore everything
!./src/** # un-ignore src