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

[dansurfrider]

You can read, so I'm not going to repeat it. *repeats it in reverse

[Imjoshnewton]

I think this is a natural progression that we go through in tech. New things are introduced to solve a problem or make something better, everyone is excited about it, lots of videos are made about it as it is a hot topic, then people realize it’s not a silver bullet that works for every situation. I’m sure like a lot of people I’m using the app router for side projects and even side hustles. However, the production apps I work on at work aren’t getting rewritten for the app directory any time soon.

[robertmorells]

Hi Josh I think you are the most clear to understand teacher I have ever listened too, I feel I am absorbing the most important information from you than any other teacher out there, Because you are so up to date on the tech stack it’s crazy, please keep making these videos man you are one of the best out there :) P.S can’t wait to this new Open-Ai Functions get out there I would love to see how this new open-AI functions work and what the possibilities are as far as calling outside functions to interact with open-AI :)

[joshlansah]

You are so consistent with your content. Thank you for providing this info for free.

[igrschmidt]

Great content as always!
A video about all the caching possibilities using app router would be lovely.

[saralightbourne]

i've had a very weird issue with app router that forced me to go back to pages. there's loading.tsx fallback file which displays while page.tsx is being loaded and sent back to the client. i was writing client side filters which are synchronised with url query parameters so i used useRouter and .push method to change those parameters. but app's useRouter.push doesn't have {shallow: true} so every time a query parameter is changed, it requests page.tsx to load data again. and it's actually fine, no need to fetch data from client side with react-query or useSWR. but the problem is that it does not trigger loading.tsx so every time i selected new filters, the page was stuck for like 2 seconds while the new data is being rendered. i ended up rewriting that logic with pages router, react-query and getServerSide props for initial load of the content

[bilbobeutlin]

I tried the app router with server components and i loved it, you can replace trpc pretty much with server components.
It`s only confusing that there are no established patterns and best practices so you have to find something that works for you and hope its scales.
But still super exicting to have so much new stuff to learn and explore!

[TheViktors]

Good point about other library support. Currently struggling to implement stripe with next 13 as it is.

Planning a video on that anytime soon?

[muhammadusama]

Great video as always Josh. one thing I don't understand is. All web apps which I build have 90% api calls that have auth headers (user specific calls) in them and they are not cached by default. So does that mean I have to use the React cache function ? In docs they specifically mention that fetch data where you need it and due to deduping we should not be worried how many same calls we making. But when auth headers are present there is no deduping and have to rely on prop drilling which gets nasty. So is the React cache function the right way to do it?

[ghstcloud]

One really nice thing about the T3 bootstrap with tRPC is that it give you a centralized endpoint that you can use to pipe additional context/middleware through. This is really nice for things like logging or authorization. I haven't found a nice way to do something similar with the app router. I might not have found it yet or it might simply be that nextjs is moving away from that paradigm (I guess the app router is more 'serverless' in that sense) . This plus type safety on requests are two things I think that are still missing from the app router. I hope Vercel look at how Nuxt handles their type safe requests. They do it in such an awesome way.

[anwar_thoughts]

Thank you for theses videos, i used app router in local env and my project was working fine wine but when I deployed it even before . When building it I had much errors from fetch to urls to revalidating errors that broke the building so I stopped and switched to pages and the project is fine and deployed now

[HungNguyen-tlkg]

I got into this message when try to use app dir & pages dir together. "Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported."

what does it really mean?

[pylegxb]

even use export const dynamic or revalidate 0, the page still cache, how to fix em ?

[AnweshGangula]

at 5:12, you mentioned D3 stack issues. can you add the link to the resource which talks about the issue?

[qwerty-oryg]

How would you go about implementing a sidebar layout in /blog/id pages but all other pages would have a root layout using nextjs app router

[muhammedmaher]

It's normal for me now to just click the like button even before I see the video, amazing work bro, keep it up. 💪

[sahilaggarwal]

The app router is good, but the one thing that seems lacking to me with RSC is that you can't do client level caching for the pages that show user specific data, which is needed for a better offline experience in a PWA. Sticking with client components until that somehow magically becomes possible.

[miro-hristov]

As of right now, the /app router is completely useless. It is nearly impossible to disable the cache and get new content when using <Link />. Even with revalidate = 0; or fetchCache = "force-no-store"; or prefetch={false} the data remains stale. You may get lucky if you refresh the page but that defeats the purpose of SPA. I'd love to see a minimal working example of Next 13 using <Link> and fetching new fresh data every time the link is clicked.

[AsemAmr]

the App direcoty router is awesome with it's reserved compnent and I really like it, But one thing i have issue with it is the Page Transition when I implement the Page Transition with framer motion library it doesn't work for me mybe the machenism of page transiton in framer motion developt according to the page rounter only. I don't know

[rod]

Curious if you tried Remix, and if so how you think it compares to Next 13. It seems like some new Next features, like nested routing and server actions, were inspired by Remix.