setTimeout(resolve, 1000));
+ return {
+ version: '3.0.0',
+ timestamp: Date.now(),
+ innerHtml: '
Inner HTML Content
'
+ };
+}
+export const createServerDataScript = (data: { version: string; timestamp: number }) => {
+ return ``;
+}
+
+export const createRenderedJS = () => {
+ return `
+
+ `
+}
+export const getData = fetchServerData; // 导出数据获取函数,供 server-node.tsx 调用
// Server Component - 通过 props 接收数据,不再自己 fetch
-export default async function ServerApp({ version }: { version: string }) {
- return
;
-}
\ No newline at end of file
+export default async function ServerApp(props: { data: ServerData }) {
+ return <>
+
+ >
+}
diff --git a/src/server-node.tsx b/src/server-node.tsx
index 22e3a8a..466eae6 100644
--- a/src/server-node.tsx
+++ b/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
= {
'.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 data = await fetchServerData();
- const serverData = { version: data.version, timestamp: data.timestamp };
-
- const stream = await renderToReadableStream(, {
+ const serverData = await getData()
+ const stream = await renderToReadableStream(, {
bootstrapScripts: []
});
@@ -49,11 +47,10 @@ async function ssrRender(res: http.ServerResponse, routeVersion?: string) {
renderedHtml += new TextDecoder().decode(chunk);
}
- console.log('Rendered HTML:', renderedHtml);
- const dataScript = ``;
+ // console.log('Rendered HTML:', renderedHtml);
const html = template
.replace('', `${renderedHtml}
`)
- .replace('', `${dataScript}`);
+ .replace('', `${createServerDataScript(serverData)}`);
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;
}
diff --git a/src/ssr.tsx b/src/ssr.tsx
index 0584173..b001fce 100644
--- a/src/ssr.tsx
+++ b/src/ssr.tsx
@@ -20,7 +20,7 @@ export async function renderToString(comp: React.ReactElement): Promise
return html;
}
-console.log(await renderToString());
+console.log(await renderToString());
// const root = createRoot(document.getElementById('root')!);
// root.render();