RSC Architecture

// Example RSC payload for a simple page
// (simplified — real format uses binary-safe encoding)
0:["$","div",null,{"className":"container"},
    ["$","h1",null,{"children":"Hello, Alice"}],
    ["$L1",null,{"userId":"u_123"}]
  ]
1:I["(app-client)/components/UserCard.tsx",
    ["static/chunks/UserCard-abc123.js"],
    "UserCard"
  ]
2:["$","$L1",null,{"userId":"u_123","name":"Alice"}]

import { cache } from "react";
// Memoised per-request — same arguments = same Promise
export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});
// Header.tsx (Server Component)
async function Header() {
  const user = await getUser("u_1"); // DB hit ← first call
  return <Avatar user={user} />;
}
// Sidebar.tsx (Server Component)
async function Sidebar() {
  const user = await getUser("u_1"); // cache hit ← same request
  return <UserMenu user={user} />;
}

// app/blog/[slug]/page.tsx
// Called at BUILD TIME — Next.js pre-renders every slug
export async function generateStaticParams() {
  const posts = await db.post.findMany({ select: { slug: true } });
  return posts.map((p) => ({ slug: p.slug }));
  // Returns: [{ slug: "hello" }, { slug: "world" }, ...]
}
// This page runs at build time for each returned slug
export default async function BlogPost({ params }) {
  const { slug } = await params;
  const post = await getPost(slug);
  return <Article post={post} />;
}
// Optionally control what happens for unknown slugs:
export const dynamicParams = false; // 404
export const dynamicParams = true;  // SSR on first visit (default)

// error.tsx — catches errors from page.tsx & children
// Must be a Client Component (React error boundaries require this)
"use client";
export default function DashboardError({
  error,
  reset,          // re-renders the segment
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>Something went wrong in Dashboard</h2>
      <p>{error.message}</p>           {/* user-facing message */}
      <p>{error.digest}</p>            {/* server log correlation ID */}
      <button onClick={reset}>Retry</button>
    </div>
  );
}
// global-error.tsx — catches errors in RootLayout
// Replaces the entire document when triggered

// Server Component tree with Suspense
export default function Dashboard() {
  return (
    <div>
      <Header />                          {/* ← rendered immediately */}
      <Suspense fallback={<UserSkeleton />}>
        <UserProfile />                   {/* ← async, streams when ready */}
      </Suspense>
      <Suspense fallback={<FeedSkeleton />}>
        <FeedItems />                     {/* ← async, independent stream */}
      </Suspense>
      <SidebarStats />                    {/* ← rendered immediately */}
      <Suspense fallback={<p>Loading notifications…</p>}>
        <Notifications />                 {/* ← async, independent stream */}
      </Suspense>
    </div>
  );
}
// UserProfile, FeedItems, Notifications all await data concurrently.
// They DON'T block each other.