App Router vs Pages Router

App Router is server-first with RSC and segment layouts. Pages Router is client-first with getStaticProps/getServerSideProps.

App Router (/app)

• Built on React Server Components; server is the UI source.
• Segment files: layout.js, page.js, loading.js, error.js, not-found.js, route.js.
• Supports streaming, partial rendering, parallel and intercepting routes, Server Actions.
• Unified data fetching via fetch() with caching and revalidation.
• Smaller client JS and less hydration.

Pages Router (/pages)

• Uses Client Components plus SSR/SSG via getStaticProps, getServerSideProps, getInitialProps.
• Global composition with _app.js, _document.js.
• No RSC, streaming, layout segments, or Server Actions.
• More hydration and larger bundles.

Key differences

• App Router is server-first; Pages Router is client-first.
• App Router builds a layout tree; Pages Router uses a global shell.
• App Router automates caching; Pages Router does not.