4 replies

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

YouTubeTheo - t3․gg

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...