Server → JSON → Client → React → DOM

Server → React → Serialized Component Tree → Client → Hydration

// app/dashboard/page.tsx
import { db } from '@/lib/database';
import { UserStats } from './UserStats';
import

import { Suspense } from 'react';
 
export default function Page() {
  return (
 
       {/* Renders immediately */}
 
      }>
         {/* Streams in when ready */}
 
 
      }>
         {/* Streams independently */}
 
 
       {/* Renders immediately */}
 
  );
}

0ms:    Header + Footer + Skeletons
500ms:  SlowComponent ready, stream update
1200ms: AnotherSlowComponent ready, stream update

'use client';  // Client Component
 
import { useState } from 'react';
import { ServerData } from './ServerData'; // Server Component
 
export function InteractiveWidget({ initialData }) {
  const [count, setCount] = useState(0);
 
  return (
 

import { format } from 'date-fns'; // 67KB
import { sanitizeHtml } from 'sanitize-html'; // 53KB
 
export function BlogPost({ post }) {
  return (
 
      {format(post.date, 'PPP')}
 
 
  );

import { format } from 'date-fns';
import { sanitizeHtml } from 'sanitize-html';
 
// Server Component - libraries stay on server
export default async function BlogPost({ slug }) {
  const post = await db.post.findBySlug(slug);
 
  return (
 
      {

async function ParentComponent() {
  // These run in parallel automatically
  const [users, posts] = await Promise.all([getUsers(), getPosts()])
 
  return <></>
}

async function Component() {
  const user = await getUser();
 
  return (
 
      {user.name}
      }>
 
 
 
  );
}
 
async function UserPosts({ userId }) {
  const posts = await getPosts(userId);

export const runtime = 'edge'
 
export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 },
  })
 
  return
}