Files
nixos-config/profiles/opencode/skill/vercel-react-best-practices/rules/server-dedup-props.md
2026-01-23 21:45:57 +00:00

2.0 KiB
Raw Blame History

title, impact, impactDescription, tags
title impact impactDescription tags
Avoid Duplicate Serialization in RSC Props LOW reduces network payload by avoiding duplicate serialization server, rsc, serialization, props, client-components

Avoid Duplicate Serialization in RSC Props

Impact: LOW (reduces network payload by avoiding duplicate serialization)

RSC→client serialization deduplicates by object reference, not value. Same reference = serialized once; new reference = serialized again. Do transformations (.toSorted(), .filter(), .map()) in client, not server.

Incorrect (duplicates array):

// RSC: sends 6 strings (2 arrays × 3 items)
<ClientList usernames={usernames} usernamesOrdered={usernames.toSorted()} />

Correct (sends 3 strings):

// RSC: send once
<ClientList usernames={usernames} />

// Client: transform there
'use client'
const sorted = useMemo(() => [...usernames].sort(), [usernames])

Nested deduplication behavior:

Deduplication works recursively. Impact varies by data type:

  • string[], number[], boolean[]: HIGH impact - array + all primitives fully duplicated
  • object[]: LOW impact - array duplicated, but nested objects deduplicated by reference
// string[] - duplicates everything
usernames={['a','b']} sorted={usernames.toSorted()} // sends 4 strings

// object[] - duplicates array structure only
users={[{id:1},{id:2}]} sorted={users.toSorted()} // sends 2 arrays + 2 unique objects (not 4)

Operations breaking deduplication (create new references):

  • Arrays: .toSorted(), .filter(), .map(), .slice(), [...arr]
  • Objects: {...obj}, Object.assign(), structuredClone(), JSON.parse(JSON.stringify())

More examples:

// ❌ Bad
<C users={users} active={users.filter(u => u.active)} />
<C product={product} productName={product.name} />

// ✅ Good
<C users={users} />
<C product={product} />
// Do filtering/destructuring in client

Exception: Pass derived data when transformation is expensive or client doesn't need original.