Server Components

Theory

Loading visualization...

Loading...

Back to React topics

Server Components

Theory

Source Code

// page.tsx (Server Component)
import { Counter } from './Counter';
 
export default async function Page() {
  const data = await fetchData();
  return (
    <main>
      <h1>{data.title}</h1>
      <Counter initialCount={0} />
    </main>
  );
}
 
// Counter.tsx
'use client';
export function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

Render Phase

Server Render

Serialization

Client Hydration

Complete

Component Tree

waiting

RSC Payload

no payload entries yet

Loading visualization...

Source Code

// page.tsx (Server Component)
import { Counter } from './Counter';
 
export default async function Page() {
  const data = await fetchData();
  return (
    <main>
      <h1>{data.title}</h1>
      <Counter initialCount={0} />
    </main>
  );
}
 
// Counter.tsx
'use client';
export function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

Render Phase

Server Render

Serialization

Client Hydration

Complete

Component Tree

waiting

RSC Payload

no payload entries yet