Server Serialization

Source: .agents/references/coding-standard/vercel-react-best-practices/rules/server-serialization.md

Metadata

• title: Minimize Serialization in Page Props
• impact: HIGH
• impactDescription: reduces data transfer size
• tags: server, pages-router, serialization, getStaticProps, getServerSideProps

Content

This repo: Pages Router only — props from getStaticProps / getServerSideProps are serialized into the page payload (__NEXT_DATA__). Only return fields the page actually uses.

Minimize Serialization in Page Props

Props returned from page data functions are embedded in the HTML response. Large payloads increase page weight and TTFB follow-up cost, so size matters a lot.

Incorrect (serializes all 50 fields):

import type { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  const user = await fetchUser() // 50 fields
  return { props: { user } }
}

// Page only displays name
function ProfilePage({ user }: { user: User }) {
  return <div>{user.name}</div>
}

Correct (serializes only what the page needs):

import type { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async () => {
  const user = await fetchUser()
  return { props: { name: user.name } }
}

function ProfilePage({ name }: { name: string }) {
  return <div>{name}</div>
}

For data needed only after hydration, prefer client fetch (TanStack Query + @/services/) instead of bloating props.