'use client';
+
+export default function HomeCounter() {
+ const [count, setCount] = React.useState(0);
+ return <button>Clicked {count} times</button>;
+}
+
+ MatchaStack RSC Pipeline
+
+ Server graph
+ Browser graph
+ Remaining work
+
+
+
+
+ Status
+
+ Milestone 3 is complete for the current routes: document requests and same-origin client navigations both render through Flight.
+
+ Scope
+
+ /, /about, /user-profile, and /suspense-demo are real RSC routes. The browser navigates between them with /__matcha_rsc payloads instead of document reloads.
Full Document Request
+
+
+
+
+ 1. Browser
+ HTTP request +GET /about asks for a document; any current route enters the same RSC path.
+
+ 2. Route Gate
+ Express handler +matchRscRoute(url) selects the route entry or returns the RSC 404.
+
+ 3. RSC Render
+ entry-rsc-server +renderRoutePayloadStream(url, manifest) starts streaming Flight rows for the selected server component tree.
+
+ 4. HTML Shell
+ entry-rsc-document +The document renderer reads the Flight stream back into React and pipes the HTML shell as Suspense boundaries resolve.
+
+
+ 5. Bootstrap
+ inline script +The full Flight payload is collected while streaming and appended as bootstrap state before the client entry script runs.
+
+
+ 6. Hydration
+ entry-client +The browser decodes Flight, imports the counter chunk, and hydrates the page.
+Client Navigation Request
+
+
+
+
+ 1. Click
+ entry-client +A same-origin <a> click is intercepted unless it is modified, external, targeted, or a download.
+
+ 2. Fetch
+ Flight endpoint +GET /__matcha_rsc?path=/user-profile requests raw Flight rows with Accept: text/x-component.
+
+ 3. Render
+ entry-rsc-server +The endpoint calls renderRoutePayloadStream(path, manifest) and pipes text/x-component rows.
+
+ 4. Decode
+ Flight client +createFromReadableStream(response.body) resolves the next React tree using the browser manifest.
+
+ 5. Commit
+ React root +history.pushState updates the URL and MatchaRoot stores the pending RSC tree in state.
+
+ 6. Restore
+ popstate +Back and forward fetch the current URL through the same Flight endpoint.
+
+
+ Build Artifacts
+
+
+
+ Client bundle
+
+ Contains browser code, including HomeCounter.client.tsx as a chunk for the client island.
+ RSC server bundle
+
+ Transforms 'use client' modules into registerClientReference proxies instead of executing client code.
+ Public manifest
+
+ Contains moduleMap, serverModuleMap, and chunkMap. This is safe to send to the browser.
+ Server manifest
+
+ Adds ssrChunkMap so the server document renderer can import SSR-safe client islands while rendering the shell.
+
+ The dev server uses one Vite server. RSC loads enter the same server through ?matcha-rsc, which creates an RSC-scoped module graph inside the existing Vite process.
Data Formats At Each Boundary
+
+
+
+ Client Component Source
+ Authored module boundary
+
+
+
+
+
+ RSC Server Proxy
+ Generated when the RSC graph imports a client module
+
+
+
+
+
+ Public Client Manifest
+ Sent to the browser
+
+
+
+
+
+ Server-Only Manifest Extension
+ Loaded by
+
+
+
+
+ RSC Route Table
+
+
+
+
+
+ Server Component Data
+ Data is read before Flight serialization
+
+
+
+
+
+ Flight Payload Rows
+ Text stream used by HTML and bootstrap
+
+
+
+
+
+ HTML Bootstrap
+ Appended after streamed HTML
+
+
+
+
+
+ Initial Client Decode
+
+
+
+
+
+ Navigation Flight Fetch
+ Client transition payload
+
+
+
+
+
+ Navigation Commit
+
+
+
+
+
+ Client Module Loading
+ Webpack-compatible runtime shim
+
+
+
+ export default registerClientReference(
+ function clientReferenceProxy() {
+ throw new Error("Cannot call client export on the server.");
+ },
+ "src/rsc/HomeCounter.client.tsx",
+ "default"
+);{
+ "moduleMap": {
+ "src/rsc/HomeCounter.client.tsx": {
+ "default": {
+ "id": "src/rsc/HomeCounter.client.tsx",
+ "chunks": [
+ "src/rsc/HomeCounter.client.tsx",
+ "assets/HomeCounter.client-[hash].js"
+ ],
+ "name": "default"
+ }
+ }
+ },
+ "serverModuleMap": {
+ "src/rsc/HomeCounter.client.tsx#default": {
+ "id": "src/rsc/HomeCounter.client.tsx",
+ "chunks": [
+ "src/rsc/HomeCounter.client.tsx",
+ "assets/HomeCounter.client-[hash].js"
+ ],
+ "name": "default"
+ }
+ },
+ "chunkMap": {
+ "src/rsc/HomeCounter.client.tsx":
+ "/assets/HomeCounter.client-[hash].js"
+ }
+}dist/server/ssr-function.js
+ {
+ "...publicManifest": "...",
+ "ssrChunkMap": {
+ "src/rsc/HomeCounter.client.tsx":
+ "/absolute/path/dist/server/rsc-client/src_rsc_HomeCounter_client_tsx.js"
+ }
+}src/entry-rsc-server.tsx
+ [
+ { path: "/", render: () => <HomePage /> },
+ { path: "/about", render: () => <AboutPage /> },
+ { path: "/user-profile", render: () => <UserProfilePage /> },
+ { path: "/suspense-demo", render: () => <SuspenseDemoPage /> }
+]// /about
+const blog = readFileSync("static/blog.md", "utf8");
+return <pre>{blog}</pre>;
+
+// /user-profile
+const user = {
+ id: "user_123",
+ name: "Ada Lovelace",
+ email: "ada@example.com",
+ plan: "pro"
+};7:I[
+ "src/rsc/HomeCounter.client.tsx",
+ [
+ "src/rsc/HomeCounter.client.tsx",
+ "assets/HomeCounter.client-[hash].js"
+ ],
+ "default"
+]
+
+0:[
+ "$",
+ "div",
+ null,
+ {
+ "children": [
+ ["$", "h1", null, { "children": "MatchaStack" }],
+ ["$", "$L7", null, {}]
+ ]
+ }
+]<script>
+window.__MATCHA_RSC_ENABLED__ = true;
+window.__MATCHA_RSC_MANIFEST__ = {
+ moduleMap,
+ serverModuleMap,
+ chunkMap
+};
+window.__MATCHA_RSC_PAYLOAD__ = "base64(Flight rows)";
+</script>
+<script type="module" src="/src/entry-client.tsx"></script>src/entry-client.tsx
+ const stream = createStreamFromBase64(
+ window.__MATCHA_RSC_PAYLOAD__
+);
+
+const node = await createFromReadableStream(stream, {
+ serverConsumerManifest: {
+ moduleMap,
+ serverModuleMap,
+ moduleLoading: null
+ }
+});
+
+hydrateRoot(appRoot, <MatchaRoot initialTree={node} />);GET /__matcha_rsc?path=/about
+Accept: text/x-component
+
+HTTP/1.1 200 OK
+Content-Type: text/x-component; charset=utf-8
+
+:N1779470661501.049
+1:["$","div",null,{...}]src/entry-client.tsx
+ const tree = createFromReadableStream(response.body, {
+ serverConsumerManifest
+});
+
+history.pushState({ __matchaRsc: true }, "", url);
+startTransition(() => {
+ setTree({ status: "pending", response: tree });
+});__webpack_chunk_load__(moduleId)
+ -> chunkMap[moduleId]
+ -> import("/assets/HomeCounter.client-[hash].js")
+
+__webpack_require__(moduleId)
+ -> loaded module namespaceCurrent Route Model
+
+
+
+
+ /
+ RSC document +Server component route with a hydrated 'use client' counter island.
+
+ /about
+ RSC document +Server component reads static/blog.md directly during the RSC render.
+
+ /user-profile
+ RSC document +Server component creates request-time profile data inside the route tree.
+
+
+ /suspense-demo
+ Streaming Suspense demo +Async server component waits for 2 seconds inside Suspense; document loads and client navigation both show the fallback while the slow panel is pending.
+
+
+ 404
+ RSC document +Unknown paths still return an HTML shell and Flight payload, with a 404 status.
+
+
+ Navigation
+ Flight navigation +Same-origin link clicks and back/forward fetch /__matcha_rsc and render the returned tree.
+
+ Later
+ Server actions +Add 'use server' references and action response payloads.