test

src/browser-entry.tsx

@@ -4,11 +4,15 @@ import App from './pages/a/ClientApp';
 
 declare global {
   interface Window {
-    __SERVER_DATA__?: { version: string };
+    __SERVER_DATA__?: {
+      version: string;
+      timestamp?: number;
+      innerHtml?: string;
+    };
   }
 }
 
 if (typeof document !== 'undefined') {
-  const data = window.__SERVER_DATA__ ?? { version: '' };
+  // const data = window.__SERVER_DATA__ ?? { version: '' };
   hydrateRoot(document.getElementById('root')!, <App />);
 }

src/pages/a/ClientApp.tsx

@@ -14,4 +14,15 @@ export default function ClientApp() {
     : 'loading';
 
   return <List version={version} />;
-}
+}
+
+// 'use client';
+// // import List from './List.tsx';
+
+// export default function ClientApp() {
+//   const inner = typeof window !== 'undefined' && window.__SERVER_DATA__?.innerHtml
+//   const cm = inner ? <div dangerouslySetInnerHTML={{ __html: inner }}></div> : null;
+//   return <div>
+//     {cm}
+//   </div>
+// }

src/pages/a/List.tsx

@@ -3,10 +3,12 @@ import { useEffect } from "react";
 
 export default function List({ version }: { version: string }) {
   useEffect(() => {
-    console.log('useEffect in List');
+    console.log('useEffect in List123');
   }, []);
+  // <div>Timestamp: {timestamp ? new Date(timestamp).toLocaleTimeString('en-US') : 'N/A'}</div>
   return (
     <div>
+      <div>sdf3</div>
       <h1>List - Version {version}</h1>
       <div style={{
         width: 200

src/pages/a/main.tsx

@@ -1,6 +1,32 @@
 import List from './List.tsx';
 
+type ServerData = {
+  version: string;
+  timestamp?: number;
+}
+// 模拟异步获取数据
+async function fetchServerData() {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  return {
+    version: '3.0.0',
+    timestamp: Date.now(),
+    innerHtml: '<div>Inner HTML Content</div>'
+  };
+}
+export const createServerDataScript = (data: { version: string; timestamp: number }) => {
+  return `<script>window.__SERVER_DATA__ = ${JSON.stringify(data)};</script>`;
+}
+
+export const createRenderedJS = () => {
+  return `
+  <script>
+  </script>
+  `
+}
+export const getData = fetchServerData; // 导出数据获取函数，供 server-node.tsx 调用
 // Server Component - 通过 props 接收数据，不再自己 fetch
-export default async function ServerApp({ version }: { version: string }) {
+export default async function ServerApp(props: { data: ServerData }) {
-  return <List version={version} />;
+  return <>
-}
+    <List version={props.data.version} />
+  </>
+}

src/server-node.tsx

@@ -1,5 +1,5 @@
 import { renderToReadableStream } from 'react-dom/server';
-import Main from './pages/a/main.tsx';
+import Main, { createServerDataScript, getData } from './pages/a/main.tsx';
 import http from 'http';
 import fs from 'fs';
 import path from 'path';
@@ -19,13 +19,9 @@ const mimeTypes: Record<string, string> = {
   '.ico': 'image/x-icon',
 };
 
-// 模拟异步获取数据
-async function fetchServerData() {
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  return { version: '2.0.0', timestamp: Date.now() };
-}
 
-async function ssrRender(res: http.ServerResponse, routeVersion?: string) {
+
+async function ssrRender(res: http.ServerResponse, mode: 'server' | 'client' = 'client') {
   let template: string;
   try {
     template = fs.readFileSync(indexHtmlPath, 'utf-8');
@@ -34,13 +30,15 @@ async function ssrRender(res: http.ServerResponse, routeVersion?: string) {
     res.end('dist/index.html not found');
     return;
   }
+  if (!mode) {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end(template);
+    return;
+  }
 
   try {
-    // 服务端获取数据
+    const serverData = await getData()
-    const data = await fetchServerData();
+    const stream = await renderToReadableStream(<Main data={serverData} />, {
-    const serverData = { version: data.version, timestamp: data.timestamp };
-
-    const stream = await renderToReadableStream(<Main version={data.version} />, {
       bootstrapScripts: []
     });
 
@@ -49,11 +47,10 @@ async function ssrRender(res: http.ServerResponse, routeVersion?: string) {
       renderedHtml += new TextDecoder().decode(chunk);
     }
 
-    console.log('Rendered HTML:', renderedHtml);
+    // console.log('Rendered HTML:', renderedHtml);
-    const dataScript = `<script>window.__SERVER_DATA__ = ${JSON.stringify(serverData)};</script>`;
     const html = template
       .replace('<div id="root"></div>', `<div id="root">${renderedHtml}</div>`)
-      .replace('</head>', `${dataScript}</head>`);
+      .replace('</head>', `${createServerDataScript(serverData)}</head>`);
     res.writeHead(200, { 'Content-Type': 'text/html' });
     res.end(html);
   } catch (err) {
@@ -67,12 +64,12 @@ http.createServer((req, res) => {
   const urlPath = req.url?.split('?')[0] || '/';
 
   if (urlPath === '/') {
-    ssrRender(res);
+    ssrRender(res, 'client');
     return;
   }
 
   if (urlPath === '/a') {
-    ssrRender(res, '1.0.0');
+    ssrRender(res, 'server');
     return;
   }
 

src/ssr.tsx

@@ -20,7 +20,7 @@ export async function renderToString(comp: React.ReactElement): Promise<string>
   return html;
 }
 
-console.log(await renderToString(<VA version="" />));
+console.log(await renderToString(<VA data={{ version: '1' }} />));
 
 // const root = createRoot(document.getElementById('root')!);
 // root.render(<VA />);