91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import { renderToReadableStream } from 'react-dom/server';
|
|
import Main, { createServerDataScript, getData } from './pages/a/main.tsx';
|
|
import http from 'http';
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
|
|
const PORT = 3000;
|
|
const distDir = path.join(process.cwd(), 'dist');
|
|
const indexHtmlPath = path.join(process.cwd(), 'dist/index.html');
|
|
|
|
const mimeTypes: Record<string, string> = {
|
|
'.html': 'text/html',
|
|
'.js': 'application/javascript',
|
|
'.css': 'text/css',
|
|
'.json': 'application/json',
|
|
'.png': 'image/png',
|
|
'.jpg': 'image/jpeg',
|
|
'.svg': 'image/svg+xml',
|
|
'.ico': 'image/x-icon',
|
|
};
|
|
|
|
|
|
|
|
async function ssrRender(res: http.ServerResponse, mode: 'server' | 'client' = 'client') {
|
|
let template: string;
|
|
try {
|
|
template = fs.readFileSync(indexHtmlPath, 'utf-8');
|
|
} catch {
|
|
res.writeHead(500);
|
|
res.end('dist/index.html not found');
|
|
return;
|
|
}
|
|
if (mode === 'client' ) {
|
|
res.writeHead(200, { 'Content-Type': 'text/html' });
|
|
res.end(template);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const serverData = await getData()
|
|
const stream = await renderToReadableStream(<Main data={serverData} />, {
|
|
bootstrapScripts: []
|
|
});
|
|
|
|
let renderedHtml = '';
|
|
for await (const chunk of stream) {
|
|
renderedHtml += new TextDecoder().decode(chunk);
|
|
}
|
|
|
|
// console.log('Rendered HTML:', renderedHtml);
|
|
const html = template
|
|
.replace('<div id="root"></div>', `<div id="root">${renderedHtml}</div>`)
|
|
.replace('</head>', `${createServerDataScript(serverData)}</head>`);
|
|
res.writeHead(200, { 'Content-Type': 'text/html' });
|
|
res.end(html);
|
|
} catch (err) {
|
|
console.error('Render error:', err);
|
|
res.writeHead(500);
|
|
res.end('Server Error');
|
|
}
|
|
}
|
|
|
|
http.createServer((req, res) => {
|
|
const urlPath = req.url?.split('?')[0] || '/';
|
|
|
|
if (urlPath === '/') {
|
|
ssrRender(res, 'client');
|
|
return;
|
|
}
|
|
|
|
if (urlPath === '/a') {
|
|
ssrRender(res, 'server');
|
|
return;
|
|
}
|
|
|
|
const distFilePath = path.join(distDir, urlPath);
|
|
try {
|
|
if (fs.existsSync(distFilePath) && fs.statSync(distFilePath).isFile()) {
|
|
const ext = path.extname(distFilePath);
|
|
const contentType = mimeTypes[ext] || 'application/octet-stream';
|
|
res.writeHead(200, { 'Content-Type': contentType });
|
|
fs.createReadStream(distFilePath).pipe(res);
|
|
return;
|
|
}
|
|
} catch {
|
|
}
|
|
|
|
ssrRender(res);
|
|
}).listen(PORT, () => {
|
|
console.log(`Server running on http://localhost:${PORT}`);
|
|
}); |