Next 14 (app/router) is extremely slow (on dev) + tRPC + Turbopack
This is an issue we've been having in our App for a long time, and after months of suffering, I finally have the answers and the solutions, so I will provide bullet points here for anyone else who suffers with it now or in the future.
Problem:
Developing with Next 14 has became extremely slow when mixing up with tRPC.
The reason:
tRPC is actually not the issue at all, the way we are encouraged to use it kinda is. What I mean is, with tRPC we feel very comfortable to call the queries inside the components and have those fully contained components. But if you watched this video https://www.youtube.com/watch?v=lcLbYictX3k, you know why that may just be a terrible idea.
Fully contained components cause the fetch Waterfall problem, which causes re-render and fetches to happen again. This issue extremely visible on components that require certain permissions to render, you'll probably notice pages with those components will be the slower ones.
The problem with Turbopack:
I've noticed that the slowness is even worse with turbo, even if the compilation time is about 10x faster. I don't understand the turbo magic completely, but I noticed is causes all fetches to be slightly slower, but when you mix it with the Waterfalling, this "slightly" slower becomes exponentially slower. Developing with turbo + tRPC + App Router was impossible.
tRPC + app Router:
Pages inside app/router that use many of these components that fetch data with tRPC are extremely slow. But if you rewrite that page to fully use app router, or you query all your data on the page, you'll notice extremely improvements on speed
Theo - t3․gg
YouTube
The "Wrong Way" To Use React
The "render on fetch" vs "fetch on render" debate has gotten a bit chaotic, and this blog post inspired me to do a deep dive. I hope this is useful to y'all! Sorry for the chaos
SOURCE https://bobaekang.com/blog/component-colocation-composition/
MENTIONS
https://www.youtube.com/watch?v=SJjK_YWfngU
https://x.com/bobaekang
TIMESTAMPS
00:00 - No...
4 Replies
TLDR:
- components that call tRPC within them and are inside an app-router app/page will be very slow (Waterfall)
- Turbopack seem to make fetching data slower, which exponentially slows down the more Waterfalling you have
Interesting.
Following this thread
so how to fix? what's the tldr recommended approach?
Only solution I could figure is to fully migrate to Next 14, using actions instead of trpc every time you can, tbh