RSC 경계에서 직렬화 최소화

Overview

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.

Impact

• Priority: HIGH
• Performance: reduces data transfer size

Problem

When you pass entire objects fetched from the server to client components, all unused fields get serialized.

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>
}

Key Points

• Extract only needed fields: Pass only fields client will use as props
• Reduce page size: Serialized data is included in HTML
• Type safety: Explicit props clarify intent
• Direct performance impact: Data size directly affects load time

Optimization Strategies

Use Destructuring

const { name, email } = await fetchUser()
return <Profile name={name} email={email} />

Object Mapping

const users = await fetchUsers()
const userNames = users.map((u) => ({ id: u.id, name: u.name }))
return <UserList users={userNames} />

Pass Computed Values

const user = await fetchUser()
const displayName = `${user.firstName} ${user.lastName}`
return <Profile displayName={displayName} />

Real Impact

• 50-field object (~10KB) → 2 fields (~200B)
• 98% reduction
• Reduced initial HTML size
• Reduced hydration data

---

Tags: server, rsc, serialization, props