feat: support config ssr.renderMode

.changeset/fast-turtles-pump.md

@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+feat: support config ssr render mode

README.md

@@ -75,7 +75,7 @@ Config is loaded from `.tnfrc.ts` by default.
 - `externals: Record<string, string>`: An object that maps package names to their corresponding paths.
 - `less: { modifyVars?: Record<string, string>; globalVars?: Record<string, string>; math?: 'always' | 'strict' | 'parens-division' | 'parens' | 'strict-legacy' | number; sourceMap?: any; plugins?: (string | [string, Record<string, any>])[];}`: The configuration passed to lessLoader.
 - `router: { defaultPreload?: 'intent' | 'render' | 'viewport'; defaultPreloadDelay?: number; devtool?: { options?: { initialIsOpen?: boolean; position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }; } | false; convention?: any }`: The router configuration. Checkout [@tanstack/router-generator](https://github.com/TanStack/router/blob/cc05ad8/packages/router-generator/src/config.ts#L22-L67) for convention config.
-- `ssr: {}`: The ssr configuration.
+- `ssr: { renderMode?: 'stream' | 'string' }`: The ssr configuration.
 - `tailwindcss: boolean`: Turn on/off tailwindcss. Need to be used in conjunction with `src/tailwind.css` and `tailwind.config.js`.
 
 ## FAQ

src/config/types.ts

@@ -74,7 +74,11 @@ export const ConfigSchema = z.object({
       convention: RouterGeneratorConfig,
     })
     .optional(),
-  ssr: z.object({}).optional(),
+  ssr: z
+    .object({
+      renderMode: z.enum(['stream', 'string']).optional(),
+    })
+    .optional(),
   tailwindcss: z.boolean().optional(),
   clickToComponent: z
     .union([

src/sync/write_server_entry.ts

@@ -7,6 +7,19 @@ export function writeServerEntry({ opts }: { opts: SyncOptions }) {
     paths: { tmpPath },
   } = opts.context;
 
+  const renderMode = opts.context.config.ssr?.renderMode || 'stream';
+  const renderer =
+    renderMode === 'stream'
+      ? `
+const appHtml = ReactDOMServer.renderToPipeableStream(<Server router={router} />, {
+  bootstrapScripts: ['/client.js'],
+});
+appHtml.pipe(response);
+    `
+      : `
+const appHtml = ReactDOMServer.renderToString(<Server router={router} />);
+response.end(appHtml + '<script src="/client.js"></script>');
+    `;
   writeFileSync(
     path.join(tmpPath, 'server.tsx'),
     `
@@ -26,12 +39,9 @@ export async function render(request: Request, response: any) {
     history: memoryHistory,
   });
   await router.load();
-  const appHtml = ReactDOMServer.renderToPipeableStream(<Server router={router} />, {
-    bootstrapScripts: ['/client.js'],
-  });
   response.statusCode = router.hasNotFoundMatch() ? 404 : 200;
   response.setHeader('Content-Type', 'text/html');
-  appHtml.pipe(response);
+  ${renderer}
 }
   `,
   );