What are the main differences between the Pages Router and the App Router?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Pages Router uses pages/ with per-page data fetching functions and client components only. App Router uses app/ with nested layouts, React Server Components by default, colocated special files (loading.tsx, error.tsx) and fetch-level caching.
Detailed explanation
The shift is architectural, not just folder names. Data fetching moved from page-level props functions (getServerSideProps/getStaticProps) into async Server Components calling fetch directly — no boilerplate. Rendering defaults inverted: components are server-rendered unless marked 'use client', shrinking JavaScript bundles dramatically. Layouts nest and persist across navigations without re-rendering, so shared chrome stays mounted. Loading and error states became first-class files built on Suspense and error boundaries per route segment. Caching centralized around fetch semantics (force-cache, no-store, revalidate intervals) rather than choosing among export functions. Special files include route.ts handlers replacing API routes plus middleware.ts at root, template.tsx and not-found.tsx. Both routers still work together during incremental migrations — knowing coexistence rules signals real-world migration experience.
Example
// pages/products/[id].tsx
export async function getStaticProps({ params }) {
const p = await getProduct(params.id);
return { props: { p }, revalidate: 60 };
}
// app/products/[id]/page.tsx — same result, less ceremony:
export const revalidate = 60;
export default async function Page({ params }) {
const p = await getProduct(params.id);
return <ProductView p={p} />;
}Interview tip
Pick three contrasts you know deeply (data fetching, RSC default, nested layouts) rather than listing ten shallowly. Mention migration coexistence briefly.
Common mistakes
- Saying App Router removed caching — it changed where/how it's configured.
- Not knowing both routers can run side-by-side.