Next.js 16 App Router: Lessons From Production

Server first, client when it earns it

The App Router rewards a simple bias: fetch and render on the server, reach for "use client" only for interaction. Most pages on this portfolio are server components for exactly that reason.

Caching gotchas

• fetch in server components caches by default. For live data, opt out deliberately with cache: "no-store" or export const dynamic = "force-dynamic".
• generateMetadata runs per route. Give every post its own title, description and OG image.

SEO that actually moves the needle

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

1. One <h1> per page.
2. JSON-LD (BlogPosting, FAQPage) alongside visible content.
3. Sitemap + RSS so crawlers find new posts fast.

Ship the boring SEO first. Fancy can wait.