test
This commit is contained in:
@@ -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 data = await fetchServerData();
|
||||
const serverData = { version: data.version, timestamp: data.timestamp };
|
||||
|
||||
const stream = await renderToReadableStream(<Main version={data.version} />, {
|
||||
const serverData = await getData()
|
||||
const stream = await renderToReadableStream(<Main data={serverData} />, {
|
||||
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 = `<script>window.__SERVER_DATA__ = ${JSON.stringify(serverData)};</script>`;
|
||||
// console.log('Rendered HTML:', renderedHtml);
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user