The RSC Payload Trap: Thinning Next.js Component Props ⚡

The Invisible Network Bloat

React Server Components (RSC) in Next.js App Router are a game changer for data fetching. You can query your database directly inside your component without exposing API endpoints. However, a major architectural trap occurs at the exact boundary where a Server Component passes data down to a Client Component.

Imagine querying a heavy User model that contains 50 columns (bio, encrypted password hashes, timestamps, notification preferences). Your Client Component only needs the user's name and avatar_url to render a header menu. If you pass the entire database model as a prop (<ClientHeader user={user} />), Next.js has to serialize that entire massive object into JSON, embed it directly into the HTML source code, and send it over the network.

You might think the extra data is just "ignored" by the client component, but it actively bloats your initial HTML payload, destroying your Time to First Byte (TTFB) and exposing sensitive backend data fields to the browser console.

The Solution: The Data Transfer Object (DTO) Boundary