What is a server component in the Next.js App Router, and why is it the default?

A server component renders entirely on the server and sends only the resulting HTML and minimal necessary data to the browser, without shipping its own JavaScript to the client, which is why it is the default in the App Router, keeping applications fast and lightweight unless interactivity is specifically needed.

// This is a server component by default, no directive needed
export default async function Page() {
  const posts = await getPosts();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}