Send only rendered fields

Pass client components only what they render; sort on the client.

50 fields sent, 1 rendered

Toggle fields and profiles, then compare payload bytes.

Profile renders name title avatarUrl email

Profiles on the page 1

Whole objectBad

–

<Profile user={u} />

Only rendered fieldsGood

–

<Profile name={u.name} />

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

Type names, then switch between strings and objects.

Usernames

Sorted on the serverBad

Sorted on the clientGood

<UserList usernames={usernames} />

'use client'
const ordered = useMemo(() => usernames.toSorted(), [usernames])

Pick a second prop, guess, then read the payload.

Reference quiz0 / 0

Second prop

Is b sent again?

<C users={users} active={users.filter((u) => u.active)} />
<C users={users} />

Every prop sent to the client is serialized. A server .toSorted() sends a copy.