feat: support preRender (#6675)

* feat: support preRender * feat: Pip after onAllReady when pre render SSR * chore: revert onAllReady callback
alibaba · Nov 30, 2023 · f1ee695 · f1ee695
1 parent 72fc36c
commit f1ee695
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 19 deletions.
diff --git a/packages/runtime/src/runServerApp.tsx b/packages/runtime/src/runServerApp.tsx
@@ -42,6 +42,7 @@ export interface RenderOptions {
   documentDataLoader?: DocumentDataLoaderConfig;
   Document?: DocumentComponent;
   documentOnly?: boolean;
+  preRender?: boolean;
   renderMode?: RenderMode;
   // basename is used both for server and client, once set, it will be sync to client.
   basename?: string;

diff --git a/packages/runtime/src/server/streamRender.tsx b/packages/runtime/src/server/streamRender.tsx
@@ -32,9 +32,19 @@ export function renderToNodeStream(
   renderToNodeStreamOptions: RenderToNodeStreamOptions,
 ): NodeWritablePiper {
   return (res, options) => {
+    const {
+      renderOptions,
+    } = renderToNodeStreamOptions;
+    const {
+      preRender = false,
+    } = renderOptions;
+
     const { pipe } = ReactDOMServer.renderToPipeableStream(element, {
       onShellReady() {
-        pipe(res);
+        // Pip after onAllReady when pre render SSR.
+        if (!preRender) {
+          pipe(res);
+        }
         options?.onShellReady && options.onShellReady();
       },
       onShellError(error) {
@@ -44,28 +54,38 @@ export function renderToNodeStream(
         options?.onError && options?.onError(error);
       },
       onAllReady() {
-        const {
-          renderOptions,
-          routerContext,
-        } = renderToNodeStreamOptions;
+        // For pre render SSR.
+        if (preRender) {
+          const {
+            renderOptions,
+            routerContext,
+          } = renderToNodeStreamOptions;
 
-        const {
-          assetsManifest,
-        } = renderOptions;
+          const {
+            assetsManifest,
+          } = renderOptions;
 
-        const {
-          matches,
-          loaderData,
-        } = routerContext;
+          const {
+            matches,
+            loaderData,
+          } = routerContext;
 
-        let renderAssets = getAllAssets(loaderData, matches, assetsManifest);
-        if (typeof window !== 'undefined' && window.renderAssets) {
-          renderAssets = renderAssets.concat(window.renderAssets);
-        }
+          let renderAssets = getAllAssets(loaderData, matches, assetsManifest);
+          if (typeof window !== 'undefined' && window.renderAssets) {
+            renderAssets = renderAssets.concat(window.renderAssets);
+          }
 
-        options?.onAllReady && options?.onAllReady({
-          renderAssets,
-        });
+          options?.onAllReady && options?.onAllReady({
+            renderAssets,
+          });
+
+          // Pipe after collecting assets.
+          pipe(res);
+        } else {
+          options?.onAllReady && options?.onAllReady({
+            renderAssets: [],
+          });
+        }
       },
     });
   };