What is different between App Router and Pages Router in Next.js?

I’ve just started learning Next.js through the official docs next.js official document

and came across two routing options: App Router and Pages Router. I get that the App Router lets you use cool features like Server Components and Streaming, while the Pages Router is the original way to build server-rendered apps.

But I’m still a bit confused about when to use one over the other. Can someone break down:

1. The key differences between the two?

2. Which one is better for performance and usability?

3. Are there any best practices or real-world scenarios where one clearly makes more sense than the other?

Well to easily understand it, I have created the below table of difference, based on your requirement you can use desired router however app router is prefered in the official docs.