diff --git a/src/browser-entry.tsx b/src/browser-entry.tsx index e35e95d..ef0f42f 100644 --- a/src/browser-entry.tsx +++ b/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')!, ); } \ No newline at end of file diff --git a/src/pages/a/ClientApp.tsx b/src/pages/a/ClientApp.tsx index 3f56067..a718f0e 100644 --- a/src/pages/a/ClientApp.tsx +++ b/src/pages/a/ClientApp.tsx @@ -14,4 +14,15 @@ export default function ClientApp() { : 'loading'; return ; -} \ No newline at end of file +} + +// 'use client'; +// // import List from './List.tsx'; + +// export default function ClientApp() { +// const inner = typeof window !== 'undefined' && window.__SERVER_DATA__?.innerHtml +// const cm = inner ?
: null; +// return
+// {cm} +//
+// } \ No newline at end of file diff --git a/src/pages/a/List.tsx b/src/pages/a/List.tsx index 6943c5f..647599a 100644 --- a/src/pages/a/List.tsx +++ b/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'); }, []); + //
Timestamp: {timestamp ? new Date(timestamp).toLocaleTimeString('en-US') : 'N/A'}
return (
+
sdf3

List - Version {version}

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();