feat: render rsc into document

examples/with-rsc/src/pages/about.tsx

@@ -1,6 +1,5 @@
 import { useAppContext } from 'ice';
 import styles from './about.module.css';
-import RefreshButton from '@/components/RefreshButton.client';
 import Counter from '@/components/Counter.client';
 
 if (!global.requestCount) {
@@ -18,9 +17,6 @@ export default function Home() {
       <h2>About Page</h2>
       <div>server request count:  { global.requestCount++ }</div>
       <Counter />
-      <RefreshButton>
-        Refresh Button
-      </RefreshButton>
     </div>
   );
 }

packages/runtime/src/index.ts

@@ -26,7 +26,7 @@ import type { RunClientAppOptions, CreateRoutes } from './runClientApp.js';
 import { useAppContext as useInternalAppContext, useAppData, AppContextProvider } from './AppContext.js';
 import { getAppData } from './appData.js';
 import { useData, useConfig } from './RouteContext.js';
-import { runRSCClientApp, useRefresh } from './runRSCClientApp.js';
+import { runRSCClientApp } from './runRSCClientApp.js';
 import {
   Meta,
   Title,
@@ -145,7 +145,6 @@ export {
   RouteErrorComponent,
 
   runRSCClientApp,
-  useRefresh,
 };
 
 export type {

packages/runtime/src/runRSCClientApp.tsx

@@ -4,62 +4,93 @@ import pkg from 'react-server-dom-webpack/client';
 import type { AppConfig } from './types.js';
 
 // @ts-ignore
-const { Suspense, use, useState, createContext, useContext, startTransition } = React;
-const { createFromFetch } = pkg;
+const { Suspense, use } = React;
+const { createFromReadableStream } = pkg;
 
 export async function runRSCClientApp(appConfig: AppConfig) {
+  // It's possible that the DOM is already loaded.
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', DOMContentLoaded, false);
+  } else {
+    DOMContentLoaded();
+  }
+
+  const rscData = (self as any).__rsc_data || [];
+  rscData.forEach(serverDataCallback);
+  rscData.push = serverDataCallback;
+
   const rootId = appConfig.app.rootId || 'app';
   const container = document.getElementById(rootId);
   const root = ReactDOM.createRoot(container);
   root.render(<Root />);
 }
 
 function Root() {
+  const response = useInitialServerResponse(window.location.href);
+
   return (
-    <Router />
+    <Suspense>
+      {use(response)}
+    </Suspense>
   );
 }
 
-const RouterContext = createContext(null);
-const initialCache = new Map();
+const rscCache = new Map();
 
-function Router() {
-  const [cache, setCache] = useState(initialCache);
-  const [location] = useState(window.location.href);
+function useInitialServerResponse(cacheKey: string): Promise<JSX.Element> {
+  const response = rscCache.get(cacheKey);
+  if (response) return response;
 
-  let content = cache.get(location);
-  if (!content) {
-    content = createFromFetch(
-      getReactTree(location),
-    );
-    cache.set(location, content);
-  }
+  const readable = new ReadableStream({
+    start(controller) {
+      nextServerDataRegisterWriter(controller);
+    },
+  });
+
+  const newResponse = createFromReadableStream(readable);
+
+  rscCache.set(cacheKey, newResponse);
+  return newResponse;
+}
+
+let initialServerDataBuffer: string[] | undefined;
+let initialServerDataWriter: ReadableStreamDefaultController | undefined;
+let initialServerDataLoaded = false;
+let initialServerDataFlushed = false;
+const encoder = new TextEncoder();
 
-  function refresh() {
-    startTransition(() => {
-      const nextCache = new Map();
-      const nextContent = createFromFetch(
-        getReactTree(location),
-      );
-      nextCache.set(location, nextContent);
-      setCache(nextCache);
+function nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {
+  if (initialServerDataBuffer) {
+    initialServerDataBuffer.forEach((val) => {
+      ctr.enqueue(encoder.encode(val));
     });
+    if (initialServerDataLoaded && !initialServerDataFlushed) {
+      ctr.close();
+      initialServerDataFlushed = true;
+      initialServerDataBuffer = undefined;
+    }
   }
 
-  return (
-    <RouterContext.Provider value={{ location, refresh }}>
-      <Suspense fallback={<h1>Loading...</h1>}>
-        {use(content)}
-      </Suspense>
-    </RouterContext.Provider>
-  );
+  initialServerDataWriter = ctr;
 }
 
-export function useRefresh() {
-  const router = useContext(RouterContext);
-  return router.refresh;
-}
+// When `DOMContentLoaded`, we can close all pending writers to finish hydration.
+const DOMContentLoaded = function () {
+  if (initialServerDataWriter && !initialServerDataFlushed) {
+    initialServerDataWriter.close();
+    initialServerDataFlushed = true;
+    initialServerDataBuffer = undefined;
+  }
+  initialServerDataLoaded = true;
+};
 
-function getReactTree(location) {
-  return fetch(location + (location.indexOf('?') > -1 ? '&rsc=true' : '?rsc=true'));
+function serverDataCallback(seg) {
+  if (initialServerDataWriter) {
+    initialServerDataWriter.enqueue(encoder.encode(seg));
+  } else {
+    if (!initialServerDataBuffer) {
+      initialServerDataBuffer = [];
+    }
+    initialServerDataBuffer.push(seg);
+  }
 }

packages/runtime/src/runRSCServerApp.tsx

@@ -17,6 +17,22 @@ import type {
   ServerRenderOptions as RenderOptions,
 } from './types.js';
 
+// This utility is based on https://github.com/zertosh/htmlescape
+// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
+const ESCAPE_LOOKUP: { [match: string]: string } = {
+  '&': '\\u0026',
+  '>': '\\u003e',
+  '<': '\\u003c',
+  '\u2028': '\\u2028',
+  '\u2029': '\\u2029',
+};
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+function htmlEscapeJsonString(str: string): string {
+  return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}
+
 export async function runRSCServerApp(serverContext: ServerContext, renderOptions: RenderOptions) {
   const { req, res } = serverContext;
 
@@ -49,9 +65,7 @@ export async function runRSCServerApp(serverContext: ServerContext, renderOption
     matches: [],
   };
 
-  if (req.url?.indexOf('rsc=true') === -1) {
-    return renderDocument(serverContext, renderOptions, appContext, matches);
-  }
+  renderDocument(serverContext, renderOptions, appContext, matches);
 
   const routeModules = await loadRouteModules(matches.map(({ route: { id, lazy } }) => ({ id, lazy })));
 
@@ -71,7 +85,22 @@ export async function runRSCServerApp(serverContext: ServerContext, renderOption
     }
   });
 
-  res.setHeader('Content-Type', 'text/x-component; charset=utf-8');
+  const decoder = new TextDecoder();
+  const encoder = new TextEncoder();
+
+  res.write('<script>self.__rsc_data=self.__rsc_data||[];</script>');
+
+  function decorateWrite(write) {
+    return function (data) {
+      const chunk = decoder.decode(data, { stream: true });
+      const modifiedData = `<script>self.__rsc_data.push(${htmlEscapeJsonString(JSON.stringify([chunk]))})</script>`;
+
+      return write.call(this, encoder.encode(modifiedData));
+    };
+  }
+
+  res.write = decorateWrite(res.write);
+
   const { pipe } = renderToPipeableStream(
     element,
     clientManifest,
@@ -116,6 +145,5 @@ function renderDocument(requestContext, renderOptions, appContext, matches) {
 
   res.setHeader('Content-Type', 'text/html; charset=utf-8');
   res.write(`<!DOCTYPE html>${htmlStr}`);
-  res.end();
 }