What is the difference between App router and Page router?

Next.js has two different routers: the App Router and the Pages Router. The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.

Difficulty: 6/10

Topics: rendering strategies, react server components, routing architecture

Scenario Questions

0-2 years experience

1
Imagine you're building a simple blog in Next.js. If you use the App Router, how would you create a shared sidebar layout that doesn't re-render when navigating between different blog posts, and how does that differ from how you'd do it in the Pages Router?
2
You're writing a component in the App Router and you want to use a React hook like useState to handle a mobile menu toggle, but you get an error saying it's not allowed. What's happening here, and how do you fix it?

2-5 years experience

1
We recently migrated a product page to the App Router. We noticed that a third-party analytics script we import in our main layout is running multiple times, or some client-side state is getting wiped out on navigation. How would you debug this difference in lifecycle between the App Router's layout file and the old _app.js?
2
In the Pages Router, we used getServerSideProps to fetch user data on every request. In the App Router, we want to fetch this same data in three different nested components on the same page. If we just fetch it in all three using fetch(), are we going to trigger three separate network requests to our database? How does Next.js handle this?

5-8 years experience

1
We have a high-traffic e-commerce site where the product description is static, but the pricing and inventory must be real-time. How would you architect this page using the App Router to maximize SEO and initial load speed, and how does this architecture compare to using getStaticProps with client-side fetching in the Pages Router?
2
Suppose we have a legacy Pages Router application with a complex, deeply nested React Context provider wrapping the entire app in _app.js. We want to start using the App Router for new features. How do you handle sharing this global client-side state across both the old Pages Router routes and the new App Router routes during a progressive migration?

8+ years experience

1
Our organization has a massive, multi-team monorepo running on Next.js Pages Router with hundreds of routes. We are considering a migration to the App Router to leverage Server Components. What is your strategy for planning, executing, and validating this migration without disrupting active feature development across 5 different product teams?
2
From an infrastructure and hosting perspective, what are the operational differences and potential cost implications of deploying a highly dynamic App Router application—utilizing streaming, PPR, and server actions—on a self-hosted Node.js/Docker environment versus a serverless platform like Vercel, compared to our old Pages Router setup?

Follow-up Questions

❓How does the mental model for data fetching change when moving from getServerSideProps to Server Components?
❓If you have a deeply nested layout in the App Router, how do you prevent a slow database query in one leaf node from blocking the entire page render?
❓What happens to your client-side state, like React Context, when navigating between routes in the App Router?