What is the difference between the App Router and the Pages Router?

// Pages Router — pages/posts.tsx
export async function getServerSideProps() {
  const posts = await getPosts();
  return { props: { posts } };
}
export default function Posts({ posts }) { /* ... */ }

// App Router — app/posts/page.tsx
export default async function Posts() {
  const posts = await getPosts();   // fetch inline in a Server Component
  return /* ... */;
}