Next.js App Router: Why Use It in All Projects?

The App Router architecture introduced in Next.js 13 and matured in 14 re-dealt the cards in web development. Now our components are Server Components by default!

Server vs Client Components

If we want SEO-friendly and blazing fast page loads, we should render everything non-interactive on the Server.

// By default, this is a Server Component
export default async function Page() {
  const data = await fetchApi();
  return <div>{data.title}</div>;
}

If you need useState or onClick, just add 'use client'; to the top of the file. High performance guaranteed!