docs(api/rsc): add examples (#13947)

* Add exmaples to RSC API docs

* Update

* Update docs/api/rsc/matchRSCServerRequest.md

Co-authored-by: Brooks Lybrand <[email protected]>

* Update and streamline examples

---------

Co-authored-by: Brooks Lybrand <[email protected]>

Author: brophdawg11

docs/api/rsc/RSCHydratedRouter.md

@@ -11,6 +11,29 @@ unstable: true
 
 Hydrates a server rendered `RSCPayload` in the browser.
 
+```tsx filename=entry.browser.tsx lines=[7-12]
+createFromReadableStream(getRSCStream()).then(
+  (payload: RSCServerPayload) => {
+    startTransition(async () => {
+      hydrateRoot(
+        document,
+        <StrictMode>
+          <RSCHydratedRouter
+            createFromReadableStream={
+              createFromReadableStream
+            }
+            payload={payload}
+          />
+        </StrictMode>,
+        {
+          formState: await getFormState(payload),
+        }
+      );
+    });
+  }
+);
+```
+
 ## Props
 
 ### createFromReadableStream

docs/api/rsc/RSCStaticRouter.md

@@ -11,6 +11,25 @@ unstable: true
 
 Pre-renders an `RSCPayload` to HTML. Usually used in `routeRSCServerRequest`'s `renderHTML` callback.
 
+```tsx filename=entry.ssr.tsx lines=[9]
+routeRSCServerRequest({
+  request,
+  fetchServer,
+  createFromReadableStream,
+  async renderHTML(getPayload) {
+    const payload = await getPayload();
+
+    return await renderHTMLToReadableStream(
+      <RSCStaticRouter getPayload={getPayload} />,
+      {
+        bootstrapScriptContent,
+        formState: await getFormState(payload),
+      }
+    );
+  },
+});
+```
+
 ## Props
 
 ### getPayload

docs/api/rsc/createCallServer.md

@@ -11,6 +11,16 @@ unstable: true
 
 Create a React `callServer` implementation for React Router.
 
+```tsx filename=entry.browser.tsx
+setServerCallback(
+  createCallServer({
+    createFromReadableStream,
+    createTemporaryReferenceSet,
+    encodeReply,
+  })
+);
+```
+
 ## Options
 
 ### createFromReadableStream

docs/api/rsc/getRSCStream.md

@@ -10,3 +10,21 @@ unstable: true
 ## Summary
 
 Get the prerendered RSC stream for hydration. Usually passed directly to your `react-server-dom-xyz/client`'s `createFromReadableStream`.
+
+```tsx filename=entry.browser.tsx lines=[1]
+createFromReadableStream(getRSCStream()).then(
+  (payload: RSCServerPayload) => {
+    startTransition(async () => {
+      hydrateRoot(
+        document,
+        <StrictMode>
+          <RSCHydratedRouter /* props */ />
+        </StrictMode>,
+        {
+          /* ... */
+        }
+      );
+    });
+  }
+);
+```

docs/api/rsc/matchRSCServerRequest.md

@@ -11,6 +11,27 @@ unstable: true
 
 Matches the given routes to a Request and returns a RSC Response encoding an `RSCPayload` for consumption by a RSC enabled client router.
 
+```tsx filename=entry.rsc.ts
+matchRSCServerRequest({
+  createTemporaryReferenceSet,
+  decodeAction,
+  decodeFormState,
+  decodeReply,
+  loadServerAction,
+  request,
+  routes: routes(),
+  generateResponse(match) {
+    return new Response(
+      renderToReadableStream(match.payload),
+      {
+        status: match.statusCode,
+        headers: match.headers,
+      }
+    );
+  },
+});
+```
+
 ## Options
 
 ### basename

docs/api/rsc/routeRSCServerRequest.md

@@ -11,6 +11,25 @@ unstable: true
 
 Routes the incoming request to the RSC server and appropriately proxies the server response for data / resource requests, or renders to HTML for a document request.
 
+```tsx filename=entry.ssr.tsx
+routeRSCServerRequest({
+  request,
+  fetchServer,
+  createFromReadableStream,
+  async renderHTML(getPayload) {
+    const payload = await getPayload();
+
+    return await renderHTMLToReadableStream(
+      <RSCStaticRouter getPayload={getPayload} />,
+      {
+        bootstrapScriptContent,
+        formState: await getFormState(payload),
+      }
+    );
+  },
+});
+```
+
 ## Options
 
 ### createFromReadableStream