Minimize Serialization at RSC Boundaries

Name: Minimize Serialization at RSC Boundaries
Author: Vercel Engineering

serverrscserializationprops

⭐ 28.0k🕒 2026-06-10Source ↗

Install this skill

npx skills add vercel-labs/agent-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

In React Server Components (RSC), data passed from a server component to a client component undergoes serialization. This process converts JavaScript objects into a JSON-like format embedded within the HTML response. When an entire data object is passed as a prop, React serializes every property, regardless of whether the client component renders them. This behavior unnecessarily increases the size of the network payload, inflating page weight and delaying hydration times. By explicitly passing only the specific primitive values or minimal subsets required by the client component, you reduce the serialization overhead. This granular approach ensures the browser receives only essential data, leading to faster load times and improved performance metrics, particularly when handling large datasets fetched from APIs or databases.

When to Use This Skill

•Refactoring server components that fetch large database entities
•Optimizing components that only display a subset of a user object
•Improving performance on mobile networks with high latency
•Reducing JSON bloat in large-scale server-side rendered applications

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“Optimize RSC payload size
“Minimize serialization in server components
“Refactor props to reduce component data transfer
“Stop sending unnecessary server data to client components
“Improve hydration speed by slimming down props

What this skill does

•Reduces network payload size by filtering properties before transmission
•Prevents unnecessary serialization of large data objects
•Optimizes client-side hydration performance
•Implements strict prop-drilling interfaces for RSC components
•Minimizes total HTML document footprint

When not to use it

✕When the component requires the entire object for complex client-side logic
✕In small applications where payload size is not a performance bottleneck

Example workflow

Identify a component receiving a large data object as a prop
Review the client component to determine which properties are actually rendered
Modify the server component to extract only the needed fields from the source data
Pass only those specific fields as individual props to the client component
Verify the reduced payload size using browser network tools

Prerequisites

–Basic knowledge of React Server Components architecture
–Familiarity with browser developer tools for inspecting network requests

Pitfalls & limitations

!Passing extra unused data makes future refactors harder to trace
!Over-optimizing may lead to excessive prop-drilling if not managed
!Complexity increases when child components require different subsets of the same object

FAQ

Why does passing the whole object hurt performance?

Every property in an object passed to a client component is serialized into the document. If you pass an object with 50 fields but only use one, the browser still processes and downloads the other 49.

Does this technique affect server-side execution time?

Minimal; the primary benefit is seen in reduced network transmission and decreased memory usage during client-side hydration.

Is it okay to use a spread operator for props?

Avoid using the spread operator on large objects because it forces the serialization of every property, including those you might not intend to expose.

How it compares

Unlike manual optimization, this skill uses a structured approach to enforce data-contract discipline, ensuring no incidental properties bleed into the client-side bundle.

Source & trust

⭐ 28k stars🕒 Updated 2026-06-10

View original skill on GitHub →

📄 Full skill instructions — original source: vercel-labs/agent-skills

## Minimize Serialization at RSC Boundaries

The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.

**Incorrect (serializes all 50 fields):**

async function Page() {
  const user = await fetchUser()  // 50 fields
  return <Profile user={user} />
}

'use client'
function Profile({ user }: { user: User }) {
  return <div>{user.name}</div>  // uses 1 field
}

**Correct (serializes only 1 field):**

async function Page() {
  const user = await fetchUser()
  return <Profile name={user.name} />
}

'use client'
function Profile({ name }: { name: string }) {
  return <div>{name}</div>
}

By Vercel Engineering

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/server-serialization/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/vercel-labs/agent-skills/server-serialization/SKILL.md
Cursor: ~/.cursor/skills/vercel-labs/agent-skills/server-serialization/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/vercel-labs/agent-skills/server-serialization/SKILL.md