What is the difference between Next.js Pages Router and App Router?

Next.js 13+ introduced the App Router as a complete architectural shift:

// App Router — data fetching is just async/await
// app/users/page.tsx
async function UsersPage() {
  const users = await fetch('/api/users').then(r => r.json());
  return ;
}

// Pages Router equivalent
export async function getServerSideProps() {
  const users = await fetch('/api/users').then(r => r.json());
  return { props: { users } };
}
export default function UsersPage({ users }) {
  return ;
}