Files
gemini-nexus/.agent/skills/vercel-react-best-practices/rules/server-dedup-props.md
T
AngeloooooandDraculabo 8ed4593f73 Refactor Gemini model display: filter old versions, group low/high pкo, and improve naming (#114)
* Refactor Gemini model display: filter old versions, group low/high pro, and improve naming

* Fix potential negative minutes and refine Gemini 3 Pro grouping logic based on PR feedback

* The account change process has been sped up

* Address PR review: enhance error message and parameterize polling interval in process handler

* Address PR review: fix potential race condition in database backup logic

* fix: prevent renderer white screen and harden sentry gating

* feat:  localize model labels

* chore: enable hoisted node-linker

* chore: ignore .agent/.claude/.codex in prettier

---------

Co-authored-by: Draculabo <[email protected]>
2026-02-19 19:37:30 +08: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.