Next.js App vs. Pages Router - Which One is Better?

hey and welcome to another video where the title accurately describes what the video is going to be about you can read so I'm not going to repeat it which one is better app router or the pages router and if you've ever used nexjs before you've been using the pages router the app router is only introduced at least in a stable version since a couple months ago so it's pretty new and not what people are used to you see it's actually really different to the pages router nested layouts aerostates loading States you can all handle that with reserved file names and it's really well done the entire architecture of the new app router is based on react server components that allow you to Mark components as asynchronous to do a top level await which was completely unheard of in any previous next year s version okay so the layouts and loading States and error States sound cool but where's the main benefit in using the app router over the pages why should you make the effort to switch well first off one big benefit is how routing and navigation works in the new app router for example the Pages directory used client-side routing whereas the new app directory uses server-centric routing which has the main benefit that a route map does not need to be downloaded to the client and that is a performance Improvement especially for apps that have a multitude a wide range of different routes that you're making use of and while the routing itself is server-centric in the new app router you've got things like the link component that enable you to do client-side routing so no hard reload of the page when you navigate between pages and what's really cool about that performance wise is that when you switch between different routes the router will actually store the payload of the react server components in an inner memory cache to make navigating between subsequent sites that you've already visited much faster than if you loaded them for the first time and they are cached at the route level so what that allows you to do is invalidate certain portions of what the user has been to but keep others so you've got a very granular caching approach you can leverage with the new app router that was not possible with the Pages directory so that would be one big reason in terms of developer experience and user experience because of the caching to switch over to the app router that sounds cool but on the other hand the Pages directory is really well established it's battle tested it's been used in production so many times by so many different corporations is it worth switching away from it and the answer is it might be because you see even though the app directory was marked as stable production ready you can use it for Enterprise grade applications it has been criticized for not being that production ready after all and for sale for pushing it too early to make a very Apple like amazing reveal presentation of their app router and while some of the critique is very valid and I've experienced myself I've also made the experience that the next JS team especially Lee Robinson is very good in addressing these issues publicly and making sure that people are grasping the New Concept of the app router properly and really taking the time to elaborate on Concepts and taking the community very seriously and let's just take this Reddit thread as an example the first point was my biggest issue or is my biggest issue with the app router and that is the caching because in the app router things are cached pretty much automatically and very aggressively so while things might work very properly on your local Development I've just had that with the Reddit clone I was developing it all worked super well on my local development but then when you build out the application there is a new caching in place what I've just mentioned with the router caching the RSC payload and that is not always what you want and this specific caching issue is addressed in the documentation so you can't complain about that but you have to know that oh there is a difference between my local caching and the build out caching which in highly Dynamic apps like the Reddit clone where you always want to have the freshest posts or the freshest comments and fresh votes is not really what you want there's a million different things you can use for caching which really confused me and I think a lot of you too you can have the fetch cache and specify that you can specify the revalidation on a per page or per layout basis you can specify in the parameters that are passed for each request whether versel should cache this or not there's the um custom fetched API that handles like a caching property of store no store there's like a million different places that are really confusing to me to handle caching and it's just really confusing when you first get into the app router it makes for a really good topic for a new YouTube video to elaborate on this and really get into the nitty-gritty stuff of what does what to really understand it but I feel like especially this part about the caching makes the entrance or the hurdle to get into the app router much harder than it actually needs to be but even if you like the new abroad approach which I personally do with react server components top level await loading States error States very granular control over caching and so on there's still one good reason to not make the switch over to the app directory and instead stay with the pages and that is the tools that make you productive are not ready for the app router an example for that is the T3 stack web dev Cody has recently talked about it and I found it very interesting that he prefers the Pages directory solely for the reason of using the T3 stack in it and I get it right T3 stack is really good it gives you full stack type safety it has a very easy command to set up and it makes you pretty productive so yeah that would be a very good reason to not make the switch to the app directory and you can hold off until that is actually ready and compatible with the new app router there's one more reason and that is performance Jack herricken has recently talked about it the app router seems to be slower in terms of requests per second than the Pages directory but I didn't want to list this as a separate point because that might not necessarily be the bottleneck of your application performance in the first place so overall at least I feel like the experience and the app router is far superior to the Pages directory do I recommend it for production yes to me the user experience and developer experience are massively benefiting from this new app router architecture with its react server components of course this is a very subjective decision that also mainly comes down to your risk aversion chances for questions of the new app router not being answered online are higher than for the Pages directory just because the Pages directory is more established that said most questions I've had with the app router or all of them have already been answered publicly and also incremental adoption is really easy so at least my suggestion for now would be start in the app router build your applications using it I think you'll like it and if something should not work in the app router like you expected to then you can always switch back to the Pages directory on a very granular basis so you can just Define that certain page that should not work by the way I've never had the experience that something didn't work in the app router but you you can always go to the Pages directory and do just that page that doesn't work as expected right there so you've got the option to always switch back incrementally without transitioning your entire application from the app router to the pages you don't need to do that so if any feature doesn't work just switch over I really hope you enjoyed my take on this whole situation I'd be super interested in hearing your thoughts app router Pages router which one do you prefer and that's gonna be it for me thank you very much for watching I'll see in the next one have a good one and bye bye

Channel: Josh tried coding

Views: 15,630

Keywords: nextjs app router, app router, nextjs pages router, nextjs app dir, nextjs 13, nextjs 13 app router, josh tried coding, joshtriedcoding

Id: EYDOXzpTRvw

Length: 7min 30sec (450 seconds)

Published: Mon Jun 19 2023