if you're using the latest next version (15) try using turbopack


npm run dev --turbopack

other than that, while navigating you can see the console that routes take some time to compile for the first time

but still 15 second sounds alot, and is not normal at all

If this happens even after initial compilation of pages, and the app works well in production, I'd take a closer look into the code - certain performance issues come up only in development as development is slower. They might still happen in production as your project grows.
Here's how I would investigate this:
- Check memory usage during development. Maybe dev server hits upper limits of your system?
- Are you running off HDD or SSD? Node dependencies are brutal on HDD
- If you are using WSL to develop, I'd suggest moving to native node on windows. WSL is also known for very slow disk IO in some scenarios. It'll also split your system memory between wsl and native Windows.
- Take a look on general resource utilization in your system - especially memory and disk usage.
- Turbopack is not a bad idea, but I doubt it will fix entire problem
- Have you tried enabling React Compiler? I recommend it as it will often auto-fix your hidden performance issues, especially around memoization.

Turbo pack is on. But actually for some reason it seems to be faster without turbopack. Still slow, but maybe almost twice as fast.

And thank you, I'll take a look. I'm working on a surface laptop at work and I don't know the specs. I'll take a look tomorrow when I am back there.

I'm a new developer and I do have a question about how I intend to build something will affect performance.
Lets say I've got a database these databases:
- Parts (Contains 20,000 items)
- PartType (500 items)

There's a relationship between parts and part part type where a part belongs to a part type.

I am creating a form and there are <select> tags to select a part from this database. First you select a part type, after that you use a second select to filter through based on part type to select the part.

Something like this:

export default async function PartPage() {
  const parts = await prisma.parts.findMany();
  const partTypes = await prisma.partType.findMany();

  return <PartForm parts={parts} partTypes={partTypes} />
}

With that much data, is it bad to pass as props? I don't currently have that data in the database like that but I have a ton like 30 to 40 pages for creating, updating, and deleting things in a database that have a similar structure. What's the scalability for something like this look like?
@Roseate Spoonbill

Well, it depends how much raw data is in there. As a rule of thumb, for anything that is more than 50 items, I tend to implement async search, pagination etc. Not only from performance perspective, but also UX - people will rarely engage in more than 20 items at a time.