diff --git a/src/browser-entry.tsx b/src/browser-entry.tsx
index 0655bcf..e35e95d 100644
--- a/src/browser-entry.tsx
+++ b/src/browser-entry.tsx
@@ -1,5 +1,5 @@
import { hydrateRoot } from 'react-dom/client';
-import App from './pages/a/main';
+import App from './pages/a/ClientApp';
// import AServer from './pages/a/server/index.tsx';
declare global {
diff --git a/src/pages/a/ClientApp.tsx b/src/pages/a/ClientApp.tsx
new file mode 100644
index 0000000..3f56067
--- /dev/null
+++ b/src/pages/a/ClientApp.tsx
@@ -0,0 +1,17 @@
+'use client';
+import List from './List.tsx';
+
+// Client Component - 用于 hydration,结构需要和 ServerApp 一致
+declare global {
+ interface Window {
+ __SERVER_DATA__?: { version: string };
+ }
+}
+
+export default function ClientApp() {
+ const version = typeof window !== 'undefined' && window.__SERVER_DATA__?.version
+ ? window.__SERVER_DATA__.version
+ : 'loading';
+
+ return
;
+}
\ No newline at end of file
diff --git a/src/pages/a/main.tsx b/src/pages/a/main.tsx
index a797c15..5490c67 100644
--- a/src/pages/a/main.tsx
+++ b/src/pages/a/main.tsx
@@ -1,18 +1,6 @@
import List from './List.tsx';
-// 模拟异步获取数据
-async function fetchData() {
- await new Promise(resolve => setTimeout(resolve, 1000));
- return { version: '2.0.0', timestamp: Date.now() };
-}
-
-// Server Component - 直接 await 获取数据
-export default async function ServerApp() {
- const data = await fetchData();
- return (
-
-
Server Time: {new Date(data.timestamp).toLocaleTimeString()}
-
-
- );
+// Server Component - 通过 props 接收数据,不再自己 fetch
+export default async function ServerApp({ version }: { version: string }) {
+ return
;
}
\ No newline at end of file
diff --git a/src/server-node.tsx b/src/server-node.tsx
index 467c48a..22e3a8a 100644
--- a/src/server-node.tsx
+++ b/src/server-node.tsx
@@ -19,7 +19,13 @@ const mimeTypes: Record = {
'.ico': 'image/x-icon',
};
-async function ssrRender(res: http.ServerResponse, version: string) {
+// 模拟异步获取数据
+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) {
let template: string;
try {
template = fs.readFileSync(indexHtmlPath, 'utf-8');
@@ -29,10 +35,12 @@ async function ssrRender(res: http.ServerResponse, version: string) {
return;
}
- const serverData = { version };
-
try {
- const stream = await renderToReadableStream(, {
+ // 服务端获取数据
+ const data = await fetchServerData();
+ const serverData = { version: data.version, timestamp: data.timestamp };
+
+ const stream = await renderToReadableStream(, {
bootstrapScripts: []
});
@@ -59,7 +67,7 @@ http.createServer((req, res) => {
const urlPath = req.url?.split('?')[0] || '/';
if (urlPath === '/') {
- ssrRender(res, '');
+ ssrRender(res);
return;
}
@@ -80,7 +88,7 @@ http.createServer((req, res) => {
} catch {
}
- ssrRender(res, '');
+ ssrRender(res);
}).listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
\ No newline at end of file