next.js: App router slow performance when using dynamic route
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:38:43 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8112
Binaries:
Node: 18.16.0
npm: 9.6.6
Relevant packages:
next: 13.4.3
eslint-config-next: 13.4.3
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
Routing (next/router, next/navigation, next/link)
Link to the code that reproduces this issue or a replay of the bug
https://github.com/manuelseisl/nextjs-demo
To Reproduce
Open link: https://nextjs-demo-six-kohl.vercel.app
Go to “console -> network” Document loading time is about 30 - 40 ms
when opening link with dynamic route: https://nextjs-demo-six-kohl.vercel.app/de/asdf Document loading time is about 170 - 180 ms
Describe the Bug
Loading performance is about 4 times slower when using dynamic routes. We also tried with page router and the result was the expected behavior
Expected Behavior
Better loading performance for document when using dynamic routes with app router
Which browser are you using? (if relevant)
Chrome 113.0.5672.127
How are you deploying your application? (if relevant)
Vercel
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 18
- Comments: 29 (3 by maintainers)
Similar issue here.
The app router is incredibly slow for me during dev as well. Also it looks like it prefetches routes that it shouldn’t, including hundreds of dynamic paths - flooding the server memory pretty much. 7000 modules that used to be compiled in 6 seconds using the /pages directory now take somewhere like 60-90 seconds. And that’s per route.
Not sure if it’s related to appDir (which I assume it is) or that it doesn’t config.modularizeImports properly?
Sometimes it takes even 2-3 minutes for the initial build. And when navigating between routes or when editing a file, it’s like it re-compiles all modules. Maybe there’s a bug between the App directory, transpiled modules, and modularized imports? It’s acting as if no modules are getting modularized (i.e. @mui) and as if it needs to reload all of them for some reason.
I can replicate that too. The root path is fine, dynamic paths are actually quite a bit slower. This phenomenon did not occur in pages router.
The App directory was a great idea, but the realization is very disappointing. We encountered more than 16 bugs that made our development and production much worse than before.
Running this on an 8-Core Intel Core i9 64 GB RAM so it’s not a hardware resource issue. In pages dir it’s around 6 seconds. But in appDir, RIP.
Same 7000 modules takes 40 seconds
Even on an M2 Max with 96GB RAM it still takes an insane amount of time to compile. Someone here suggested a downgrade to an older Next version, but there’s gotta be a tweak coming, right? I mean this is a pretty critical bug in Next.
The same, hope this topic can resolve soon 😦(. It still take more than 200% cpu of my laptop for compile, i am using mac m1 but it very hot when I use next 13
Also having a same issue, starting to regret using Next.js for development because of the horrible performance in the dev environment.
Yaaaa damnnnn
I saw another thread about 1 hour ago where people were talking about how slow turbopack is.
any news on this? Problem still occurs
I will when have a chance send you a trace, and for turbopack I don’t know how to send you that as turbo pack does not yield any trace.
But you can simulate this very easily using material ui with next-intl and you will see this only putting one component. I have optimized already the import as much as I can and still really slow, 30 seconds per page.
thanks for responding.
Downgraded to 13.2.3 and compile times are a LOT better. I’m not using Turbopack because of the complexity of our project and all the unsupported features, but I think webpack projects should get a fix too. Also referenced a bunch of other related issues because this seems to be related to something other than just dynamic routes. It’s pretty much every route.
originally it was about the performance in production mode. the catch-all routes are slower in response than in the pre App Router version. Hopefully this will be fixed soon.
Turbopack won’t work me at all. It can’t resolve paths and it won’t even start up. But why would the app router have a 20X worse performance?
Yep, it prefetches too much for some reason.
Turbopack is even worse getting 50 seconds to build simple pages. Hot reloading is fast super fast but cold or lazy build is a disaster
Have any of you guys tried this with turbo pack?
(I have not used it nor known its limitations)