feat: support pre render ssr

alibaba · Nov 20, 2023 · f224619 · f224619
1 parent 5d85418
commit f224619
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/packages/runtime/src/Document.tsx b/packages/runtime/src/Document.tsx
@@ -12,6 +12,9 @@ const Context = React.createContext<DocumentContext | undefined>(undefined);
 
 Context.displayName = 'DocumentContext';
 
+// Collect render assets for SSR preRender.
+const renderAssets = (global.renderAssets = []);
+
 function useDocumentContext() {
   const value = React.useContext(Context);
   return value;
@@ -77,6 +80,10 @@ export const Links: LinksType = (props: LinksProps) => {
   const entryAssets = getEntryAssets(assetsManifest);
   const styles = entryAssets.concat(pageAssets).filter(path => path.indexOf('.css') > -1);
 
+  // Collect styles.
+  renderAssets && renderAssets.push(...styles);
+  renderAssets && renderAssets.push(...routeLinks.map(routeLink => routeLink.href));
+
   return (
     <>
       {
@@ -120,6 +127,10 @@ export const Scripts: ScriptsType = (props: ScriptsProps) => {
     return true;
   });
 
+  // Collect scripts.
+  renderAssets && renderAssets.push(...routeScripts);
+  renderAssets && renderAssets.push(...scripts);
+
   return (
     <>
       <Data ScriptElement={ScriptElement} />
@@ -150,7 +161,6 @@ export function usePageAssets() {
   if (assetsManifest.dataLoader) {
     assets.unshift(`${assetsManifest.publicPath}${assetsManifest.dataLoader}`);
   }
-
   return assets;
 }
 

diff --git a/packages/runtime/src/runServerApp.tsx b/packages/runtime/src/runServerApp.tsx
@@ -1,10 +1,10 @@
 import type { ServerResponse, IncomingMessage } from 'http';
 import * as React from 'react';
-import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import * as ReactDOMServer from 'react-dom/server';
 import type { Location } from 'history';
 import { parsePath } from 'history';
 import { isFunction } from '@ice/shared';
+import type { RenderToPipeableStreamOptions } from './server/streamRender.js';
 import type {
   AppContext, RouteItem, ServerContext,
   AppExport, AssetsManifest,
@@ -191,8 +191,8 @@ export async function renderToResponse(requestContext: ServerContext, renderOpti
           console.error('PipeToResponse error.');
           console.error(err);
         },
-        onAllReady: () => {
-          onAllReady && onAllReady();
+        onAllReady: (params: OnAllReadyParams) => {
+          onAllReady && onAllReady(params);
           resolve();
         },
       });

diff --git a/packages/runtime/src/server/streamRender.tsx b/packages/runtime/src/server/streamRender.tsx
@@ -1,10 +1,20 @@
 import * as Stream from 'stream';
 import type * as StreamType from 'stream';
 import * as ReactDOMServer from 'react-dom/server';
-import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 
 const { Writable } = Stream;
 
+export interface OnAllReadyParams {
+  renderAssets: string[];
+}
+export type OnAllReady = (OnAllReadyParams) => void;
+export interface RenderToPipeableStreamOptions {
+  onShellReady?: () => void;
+  onShellError?: (error: unknown) => void;
+  onAllReady?: OnAllReady;
+  onError?: (error: unknown) => void;
+}
+
 export type NodeWritablePiper = (
   res: StreamType.Writable,
   options?: RenderToPipeableStreamOptions,
@@ -26,7 +36,9 @@ export function renderToNodeStream(
         options?.onError && options?.onError(error);
       },
       onAllReady() {
-        options?.onAllReady && options?.onAllReady();
+        options?.onAllReady && options?.onAllReady({
+          renderAssets: global.renderAssets || [],
+        });
       },
     });
   };