Essential Next.js and App Router capabilities

Start with Server Components

In the App Router, components are server-rendered by default. Data access, metadata, and secrets stay at that boundary while browser interactions move into small client components.

Dynamic metadata on the server

export async function generateMetadata({ params }: Props) {
  const post = getPost((await params).slug);
  return { title: post.title };
}

Keep route UI close to the route

• Use loading.tsx for route-level pending UI.
• Call notFound() for an invalid slug.
• Mark only interactive components with use client.

The server/client boundary is a performance and security decision, not just a syntax constraint.