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

Summary

In this video, the speaker compares the App Router and Pages Router in Next.js, highlighting their differences and benefits. The App Router introduces server-centric routing, enhanced caching, and features like React Server Components, offering improved performance and user experience. However, it has challenges, such as aggressive caching and limited tool compatibility, making it harder to adopt for some users. The speaker also discusses the T3 stack and performance considerations, ultimately suggesting that developers try the App Router for its superior experience, with the option to revert to the Pages Router if needed.

Takeaways

• 😀 The App Router in Next.js, introduced in a stable version a few months ago, is a new and different approach compared to the Pages Router.
• 😀 One of the main benefits of the App Router is server-centric routing, which improves performance by reducing the need to download a route map to the client.
• 😀 The App Router supports granular caching, where components are cached at the route level, making navigation faster between previously visited pages.
• 😀 Unlike the Pages Router, the App Router enables features like nested layouts, error states, and loading states through reserved file names, making the overall architecture more flexible.
• 😀 The Pages Router is well-established and widely used, with many large corporations relying on it, which raises the question of whether switching to the App Router is worth the effort.
• 😀 Although the App Router has been critiqued for aggressive and sometimes confusing caching, it offers advanced caching options, such as controlling the cache on a per-page or per-layout basis.
• 😀 The App Router's caching system can create issues with dynamic apps, where fresh content like posts or comments needs to be constantly updated, leading to challenges during the build process.
• 😀 Despite some difficulties, the App Router is deemed production-ready, but developers need to be aware of differences in local vs. build-out caching behavior.
• 😀 Certain developer tools, like the T3 stack, are not yet fully compatible with the App Router, making the Pages Router a more practical choice for some developers until full compatibility is achieved.
• 😀 Performance tests have shown that the App Router may be slower than the Pages Router in terms of requests per second, but this may not be a critical issue for every application.
• 😀 The App Router offers an improved developer and user experience overall, thanks to features like React Server Components, top-level await, and granular caching, but it also requires more time and effort to master.
• 😀 The transition from the Pages Router to the App Router is flexible, allowing incremental adoption, where developers can use both routers within the same application if needed.

Q & A

What is the main difference between the Pages router and the App router in Next.js?

The App router, introduced more recently, is based on React Server Components, allowing asynchronous components and top-level awaits. It supports server-centric routing, while the Pages router uses client-side routing. The App router also provides more granular caching and a better developer and user experience overall.

How does routing work differently in the App router compared to the Pages router?

In the App router, routing is server-centric, which improves performance by not requiring the route map to be downloaded to the client. While it still supports client-side navigation using the Link component, the App router is more efficient with caching React Server Components in memory for faster navigation.

What performance benefits does the App router offer?

The App router improves performance by storing React Server Component payloads in an in-memory cache, allowing faster navigation between previously visited routes. Additionally, it offers granular control over caching at the route level, which wasn't possible with the Pages directory.

What are some of the challenges developers face when switching to the App router?

One challenge is the complexity of caching, as the App router aggressively caches content and introduces differences between local development caching and build-time caching. It can be confusing to manage caching in dynamic apps, and the learning curve can be steep.

Why might developers prefer to stick with the Pages router despite the new features in the App router?

The Pages router is battle-tested, well-established, and has been used in production environments by many companies. Developers may also prefer to use tools like the T3 stack, which is not yet fully compatible with the App router.

What issues have been raised regarding the App router's production readiness?

The App router has been criticized for not being fully production-ready, with some developers experiencing unexpected behavior, particularly related to caching and server components. However, these issues are being addressed by the Next.js team, and many solutions are available in the documentation.

What specific performance issues did Jack Herricken mention about the App router?

Jack Herricken highlighted that the App router appears to be slower in terms of requests per second when compared to the Pages directory. However, this may not be a bottleneck for all applications, depending on the context.

How does the App router improve the developer experience?

The App router offers better developer experience by allowing asynchronous components, top-level await, and more control over layouts, loading, and error states. Its server-side architecture also makes it easier to handle complex routing and state management.

What are the caching mechanisms in the App router, and how do they work?

The App router uses aggressive caching of React Server Component payloads, which improves navigation speed. Caching is done at the route level, offering granular control. Developers can manage caching through various strategies, such as fetch cache, revalidation, and custom fetch APIs.

Is it possible to switch back to the Pages directory after using the App router?

Yes, Next.js allows for incremental adoption of the App router, meaning that if a feature doesn't work as expected, developers can easily switch back to the Pages directory for specific pages without fully reverting the entire application.