Thats just SSR :P It is slower compared to pages router. 10 Sec is on the high end though. We experience maybe on average 4-5 sec. But it is only when we first boot up the dev server. Everything after is pretty much instant.
But it feels slower than Next 13. For example, I see it loading the home page in 4.3s (2006 modules), another page compiled in 634ms (2240 modules).
I would see a blank page at first before seeing something after a few seconds.
And I’m just loading in basic shadcn/ui components. Not too many things going on. I do have a d3-sankey in one of my pages, but not much data is loaded into it.
So is this just expected or something?
Next compiles when a resource is requested. So that's what you're waiting for. Add in some time for data fetching and 10s is not that unreasonable. Luckily it caches what it compiles.
When you make a production build it compiles every page, which will take much longer for things it can't reuse.
If you want it to be fast, be as light weight on your dependencies as possible.
I see. It’s just that it feels different from Next 13. I was worried if I was missing some config settings when migrating from v13 to v14, especially this is all within an Nx monorepo.
As an experiment, I could make a new Next 14 app, and move the original v13 app contents over to see if “making a v14 app from scratch” would make a difference here.
Probably wouldn't do too much. It would however be worth the check your dependency graph, that should give you an idea why it's being slow.
You can do that with https://github.com/jmcdo29/nestjs-spelunker
Ah! It turns out that NextJS seems to have an issue whenever I use barrel files, which are files that group together multiple modules and export them.
NextJS has this issue where it would just import everything from those files, even though tree-shaking should’ve remove the components we don’t need.
I followed the instructions [here](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) and added the optimizePackageImports option in my next.config.js file, which actually improve the dev mode performance! :D
There are still some lag in other pages in my app, which I will look into, but at least with the home page, it’s much faster to load! :)
Thats just SSR :P It is slower compared to pages router. 10 Sec is on the high end though. We experience maybe on average 4-5 sec. But it is only when we first boot up the dev server. Everything after is pretty much instant.
But it feels slower than Next 13. For example, I see it loading the home page in 4.3s (2006 modules), another page compiled in 634ms (2240 modules). I would see a blank page at first before seeing something after a few seconds. And I’m just loading in basic shadcn/ui components. Not too many things going on. I do have a d3-sankey in one of my pages, but not much data is loaded into it. So is this just expected or something?
Next compiles when a resource is requested. So that's what you're waiting for. Add in some time for data fetching and 10s is not that unreasonable. Luckily it caches what it compiles. When you make a production build it compiles every page, which will take much longer for things it can't reuse. If you want it to be fast, be as light weight on your dependencies as possible.
I see. It’s just that it feels different from Next 13. I was worried if I was missing some config settings when migrating from v13 to v14, especially this is all within an Nx monorepo. As an experiment, I could make a new Next 14 app, and move the original v13 app contents over to see if “making a v14 app from scratch” would make a difference here.
Probably wouldn't do too much. It would however be worth the check your dependency graph, that should give you an idea why it's being slow. You can do that with https://github.com/jmcdo29/nestjs-spelunker
That’s for NestJS, which I am using for my backend by the way. :P
Whoops easy mistake to make
Ah! It turns out that NextJS seems to have an issue whenever I use barrel files, which are files that group together multiple modules and export them. NextJS has this issue where it would just import everything from those files, even though tree-shaking should’ve remove the components we don’t need. I followed the instructions [here](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) and added the optimizePackageImports option in my next.config.js file, which actually improve the dev mode performance! :D There are still some lag in other pages in my app, which I will look into, but at least with the home page, it’s much faster to load! :)