Next.js Discord

Discord Forum

App vs Page Router Comparison

Unanswered
American Sable posted this in #help-forum
Open in Discord
American SableOP
Does anyone have a file structure graphic or something that shows how the newer app router works and is structured?

The older page routing seemed quite intuitive, however the recent changes with the app router, ssr/csr changes etc seem to be very over complicated, and seem to be resulting in a lot of unnecessary modularisation

7 Replies

American SableOP
For instsance, a page with say a button that needs on click, then eitiher requires the page to be loaded client side, or that button turned into a component itself
Asian black bear
I am a long-time user of the pages router and think the app router solves pretty specific frustrations. The biggest one is probably needing to fetch data for every component at the page level then needing to drill/context it through the entire tree.
With the page dir every bit of html is actually sent twice, once as the SSR and then again as JS. Even worse the page bundle JS has to run and rehydrate.
It is kind of ironic, but when React was released a pretty common paradigm was to use it only in small interactive islands on an otherwise entirely static non-react page. Then outfits like Next put everything in React which was "pretty cool" and "just fast enough". Now, we are back to islands of interactivity with RSC.
American SableOP
The biggest one is probably needing to fetch data for every component at the page level then needing to drill/context it through the entire tree.

That's a fair comment. I seemed to be forever passing data into context, or then passing it down and down through props
Asian black bear
I was using it for a production web app and RSC with the complicated nesting was really the only way to make it get good web vital scores
Right now the whole data-fetching in RSC and passing it down is kind of unexplored territory so it feels super chaotic. Hopefully some preferred paradigms and best practices will eventually emerge from the muck.