Compare commits
5 Commits
a0c48937ad
...
bf89f6ef6e
| Author | SHA1 | Date | |
|---|---|---|---|
| bf89f6ef6e | |||
| 5ae545d24e | |||
| d9c9b06722 | |||
| 53a4174aa9 | |||
| bb7e654589 |
@@ -8,10 +8,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root">
|
||||
|
||||
</div>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/browser-entry.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
{
|
||||
"name": "@vitejs/plugin-rsc-examples-starter",
|
||||
"name": "rsc",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "bun run --host src/entry.tsx"
|
||||
"dev": "tsx src/server-node.tsx",
|
||||
"build": "bun build index.html --outdir dist "
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/cssinjs": "^2.1.2",
|
||||
"antd": "^6.3.5",
|
||||
"fast-glob": "^3.3.3",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5"
|
||||
},
|
||||
|
||||
137
pnpm-lock.yaml
generated
137
pnpm-lock.yaml
generated
@@ -14,6 +14,9 @@ importers:
|
||||
antd:
|
||||
specifier: ^6.3.5
|
||||
version: 6.3.5(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
|
||||
fast-glob:
|
||||
specifier: ^3.3.3
|
||||
version: 3.3.3
|
||||
react:
|
||||
specifier: ^19.2.5
|
||||
version: 19.2.5
|
||||
@@ -84,6 +87,18 @@ packages:
|
||||
'@emotion/unitless@0.7.5':
|
||||
resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
|
||||
|
||||
'@nodelib/fs.scandir@2.1.5':
|
||||
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
'@nodelib/fs.stat@2.0.5':
|
||||
resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
'@nodelib/fs.walk@1.2.8':
|
||||
resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
'@rc-component/async-validator@5.1.0':
|
||||
resolution: {integrity: sha512-n4HcR5siNUXRX23nDizbZBQPO0ZM/5oTtmKZ6/eqL0L2bo747cklFdZGRN2f+c9qWGICwDzrhW0H7tE9PptdcA==}
|
||||
engines: {node: '>=14.x'}
|
||||
@@ -387,6 +402,10 @@ packages:
|
||||
react: '>=18.0.0'
|
||||
react-dom: '>=18.0.0'
|
||||
|
||||
braces@3.0.3:
|
||||
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
bun-types@1.3.12:
|
||||
resolution: {integrity: sha512-HqOLj5PoFajAQciOMRiIZGNoKxDJSr6qigAttOX40vJuSp6DN/CxWp9s3C1Xwm4oH7ybueITwiaOcWXoYVoRkA==}
|
||||
|
||||
@@ -403,12 +422,54 @@ packages:
|
||||
dayjs@1.11.20:
|
||||
resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
|
||||
|
||||
fast-glob@3.3.3:
|
||||
resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
|
||||
engines: {node: '>=8.6.0'}
|
||||
|
||||
fastq@1.20.1:
|
||||
resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
|
||||
|
||||
fill-range@7.1.1:
|
||||
resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
glob-parent@5.1.2:
|
||||
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
|
||||
engines: {node: '>= 6'}
|
||||
|
||||
is-extglob@2.1.1:
|
||||
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
is-glob@4.0.3:
|
||||
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
is-mobile@5.0.0:
|
||||
resolution: {integrity: sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==}
|
||||
|
||||
is-number@7.0.0:
|
||||
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
|
||||
engines: {node: '>=0.12.0'}
|
||||
|
||||
json2mq@0.2.0:
|
||||
resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==}
|
||||
|
||||
merge2@1.4.1:
|
||||
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
|
||||
engines: {node: '>= 8'}
|
||||
|
||||
micromatch@4.0.8:
|
||||
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
|
||||
engines: {node: '>=8.6'}
|
||||
|
||||
picomatch@2.3.2:
|
||||
resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
|
||||
engines: {node: '>=8.6'}
|
||||
|
||||
queue-microtask@1.2.3:
|
||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
|
||||
react-dom@19.2.5:
|
||||
resolution: {integrity: sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==}
|
||||
peerDependencies:
|
||||
@@ -421,9 +482,16 @@ packages:
|
||||
resolution: {integrity: sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
reusify@1.1.0:
|
||||
resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
|
||||
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
|
||||
|
||||
rsc-html-stream@0.0.7:
|
||||
resolution: {integrity: sha512-v9+fuY7usTgvXdNl8JmfXCvSsQbq2YMd60kOeeMIqCJFZ69fViuIxztHei7v5mlMMa2h3SqS+v44Gu9i9xANZA==}
|
||||
|
||||
run-parallel@1.2.0:
|
||||
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
|
||||
|
||||
scheduler@0.27.0:
|
||||
resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
|
||||
|
||||
@@ -440,6 +508,10 @@ packages:
|
||||
resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
|
||||
engines: {node: '>=12.22'}
|
||||
|
||||
to-regex-range@5.0.1:
|
||||
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
||||
engines: {node: '>=8.0'}
|
||||
|
||||
undici-types@7.19.2:
|
||||
resolution: {integrity: sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==}
|
||||
|
||||
@@ -497,6 +569,18 @@ snapshots:
|
||||
|
||||
'@emotion/unitless@0.7.5': {}
|
||||
|
||||
'@nodelib/fs.scandir@2.1.5':
|
||||
dependencies:
|
||||
'@nodelib/fs.stat': 2.0.5
|
||||
run-parallel: 1.2.0
|
||||
|
||||
'@nodelib/fs.stat@2.0.5': {}
|
||||
|
||||
'@nodelib/fs.walk@1.2.8':
|
||||
dependencies:
|
||||
'@nodelib/fs.scandir': 2.1.5
|
||||
fastq: 1.20.1
|
||||
|
||||
'@rc-component/async-validator@5.1.0':
|
||||
dependencies:
|
||||
'@babel/runtime': 7.29.2
|
||||
@@ -916,6 +1000,10 @@ snapshots:
|
||||
- luxon
|
||||
- moment
|
||||
|
||||
braces@3.0.3:
|
||||
dependencies:
|
||||
fill-range: 7.1.1
|
||||
|
||||
bun-types@1.3.12:
|
||||
dependencies:
|
||||
'@types/node': 25.6.0
|
||||
@@ -928,12 +1016,51 @@ snapshots:
|
||||
|
||||
dayjs@1.11.20: {}
|
||||
|
||||
fast-glob@3.3.3:
|
||||
dependencies:
|
||||
'@nodelib/fs.stat': 2.0.5
|
||||
'@nodelib/fs.walk': 1.2.8
|
||||
glob-parent: 5.1.2
|
||||
merge2: 1.4.1
|
||||
micromatch: 4.0.8
|
||||
|
||||
fastq@1.20.1:
|
||||
dependencies:
|
||||
reusify: 1.1.0
|
||||
|
||||
fill-range@7.1.1:
|
||||
dependencies:
|
||||
to-regex-range: 5.0.1
|
||||
|
||||
glob-parent@5.1.2:
|
||||
dependencies:
|
||||
is-glob: 4.0.3
|
||||
|
||||
is-extglob@2.1.1: {}
|
||||
|
||||
is-glob@4.0.3:
|
||||
dependencies:
|
||||
is-extglob: 2.1.1
|
||||
|
||||
is-mobile@5.0.0: {}
|
||||
|
||||
is-number@7.0.0: {}
|
||||
|
||||
json2mq@0.2.0:
|
||||
dependencies:
|
||||
string-convert: 0.2.1
|
||||
|
||||
merge2@1.4.1: {}
|
||||
|
||||
micromatch@4.0.8:
|
||||
dependencies:
|
||||
braces: 3.0.3
|
||||
picomatch: 2.3.2
|
||||
|
||||
picomatch@2.3.2: {}
|
||||
|
||||
queue-microtask@1.2.3: {}
|
||||
|
||||
react-dom@19.2.5(react@19.2.5):
|
||||
dependencies:
|
||||
react: 19.2.5
|
||||
@@ -943,8 +1070,14 @@ snapshots:
|
||||
|
||||
react@19.2.5: {}
|
||||
|
||||
reusify@1.1.0: {}
|
||||
|
||||
rsc-html-stream@0.0.7: {}
|
||||
|
||||
run-parallel@1.2.0:
|
||||
dependencies:
|
||||
queue-microtask: 1.2.3
|
||||
|
||||
scheduler@0.27.0: {}
|
||||
|
||||
scroll-into-view-if-needed@3.1.0:
|
||||
@@ -957,4 +1090,8 @@ snapshots:
|
||||
|
||||
throttle-debounce@5.0.2: {}
|
||||
|
||||
to-regex-range@5.0.1:
|
||||
dependencies:
|
||||
is-number: 7.0.0
|
||||
|
||||
undici-types@7.19.2: {}
|
||||
|
||||
@@ -1,6 +1,24 @@
|
||||
import { hydrateRoot } from 'react-dom/client';
|
||||
import A from './pages/a/index';
|
||||
import { hydrateRoot, createRoot } from 'react-dom/client';
|
||||
import App from './pages/a/ClientApp';
|
||||
// import AServer from './pages/a/server/index.tsx';
|
||||
|
||||
// React 19: renderToPipeableStream embeds RSC payload in HTML
|
||||
// hydrateRoot will find and use that payload automatically
|
||||
hydrateRoot(document.getElementById('root')!, <A />);
|
||||
declare global {
|
||||
interface Window {
|
||||
__SERVER_DATA__?: {
|
||||
version: string;
|
||||
timestamp?: number;
|
||||
innerHtml?: string;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
// const data = window.__SERVER_DATA__ ?? { version: '' };
|
||||
// hydrateRoot(document.getElementById('root')!, <App />);
|
||||
|
||||
// hydrateRoot(document.getElementById('root')!, <App />);
|
||||
// console.log('Hydration complete');
|
||||
|
||||
const root = createRoot(document.getElementById('root')!);
|
||||
root.render(<App />);
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
import { renderToReadableStream } from 'react-dom/server';
|
||||
import A from './pages/a/index';
|
||||
import A from './pages/a/List';
|
||||
|
||||
Bun.serve({
|
||||
port: 3000,
|
||||
async fetch(req) {
|
||||
const stream = await renderToReadableStream(<A />, {
|
||||
const stream = await renderToReadableStream(<A version='' data={{}} />, {
|
||||
bootstrapScripts: [],
|
||||
});
|
||||
|
||||
|
||||
21
src/pages/a/ClientApp.tsx
Normal file
21
src/pages/a/ClientApp.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
'use client';
|
||||
import List from './List.tsx';
|
||||
|
||||
export default function ClientApp() {
|
||||
const data = typeof window !== 'undefined' && window.__SERVER_DATA__ ? window.__SERVER_DATA__ : { version: 'loading' };
|
||||
return <List
|
||||
version={data.version}
|
||||
data={data}
|
||||
/>;
|
||||
}
|
||||
|
||||
// 'use client';
|
||||
// // import List from './List.tsx';
|
||||
|
||||
// export default function ClientApp() {
|
||||
// const inner = typeof window !== 'undefined' && window.__SERVER_DATA__?.innerHtml
|
||||
// const cm = inner ? <div dangerouslySetInnerHTML={{ __html: inner }}></div> : null;
|
||||
// return <div>
|
||||
// {cm}
|
||||
// </div>
|
||||
// }
|
||||
25
src/pages/a/List.tsx
Normal file
25
src/pages/a/List.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const Item = () => {
|
||||
return <div>Item</div>
|
||||
}
|
||||
export default function List({ version, data = {} }: { version: string, data: any }) {
|
||||
useEffect(() => {
|
||||
console.log('useEffect in List123');
|
||||
console.log('Received data in List:', data);
|
||||
}, []);
|
||||
const tm = <div>Timestamp: {data.timestamp ? new Date(data.timestamp).toLocaleTimeString('en-US') : 'N/A'}</div>
|
||||
return (
|
||||
<div>
|
||||
<div>sdf32323232</div>
|
||||
{tm}
|
||||
{version === '2.0.0' && <Item />}
|
||||
{/* <h1>List - Version {version}</h1> */}
|
||||
{/* <h1>List - Version2 {version + 1}</h1> */}
|
||||
<div style={{
|
||||
width: 200
|
||||
}}>Primary Button</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function List() {
|
||||
useEffect(() => {
|
||||
console.log('useEffect in List');
|
||||
}, []);
|
||||
return (
|
||||
<div>
|
||||
<h1>List 2</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
33
src/pages/a/main.tsx
Normal file
33
src/pages/a/main.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import List from './List.tsx';
|
||||
|
||||
type ServerData = {
|
||||
version: string;
|
||||
timestamp?: number;
|
||||
}
|
||||
// 模拟异步获取数据
|
||||
async function fetchServerData() {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
return {
|
||||
// version: '3.0.0' + Math.floor(Math.random() * 100),
|
||||
version: '2.0.0',
|
||||
timestamp: Date.now(),
|
||||
innerHtml: '<div>Inner HTML Content</div>'
|
||||
};
|
||||
}
|
||||
export const createServerDataScript = (data: { version: string; timestamp: number }) => {
|
||||
return `<script>window.__SERVER_DATA__ = ${JSON.stringify(data)};</script>`;
|
||||
}
|
||||
|
||||
export const createRenderedJS = () => {
|
||||
return `
|
||||
<script>
|
||||
</script>
|
||||
`
|
||||
}
|
||||
export const getData = fetchServerData; // 导出数据获取函数,供 server-node.tsx 调用
|
||||
// Server Component - 通过 props 接收数据,不再自己 fetch
|
||||
export default async function ServerApp(props: { data: ServerData }) {
|
||||
return <>
|
||||
<List version={props.data.version} data={props.data} />
|
||||
</>
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
// Server component - no 'use client' directive
|
||||
export default function ServerList() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Server List</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +1,12 @@
|
||||
'use server';
|
||||
import { useEffect } from "react";
|
||||
import A from '../List';
|
||||
|
||||
const getVersion = async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
return '1.0.0';
|
||||
return '2.0.0';
|
||||
}
|
||||
export default async function List() {
|
||||
|
||||
export default async function AServer() {
|
||||
const v = await getVersion();
|
||||
return (
|
||||
<div>
|
||||
<h1>List - Version {v}</h1>
|
||||
<div style={{
|
||||
width: 200
|
||||
}}>Primary Button</div>
|
||||
</div>
|
||||
);
|
||||
return <A version={v} />;
|
||||
}
|
||||
@@ -1,31 +1,107 @@
|
||||
"use server";
|
||||
import { renderToPipeableStream, renderToString } from 'react-dom/server';
|
||||
// import A from './pages/a/index.tsx';
|
||||
import { AEntry } from './browser-entry.tsx';
|
||||
import AServer from './pages/a/server/index.tsx';
|
||||
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';
|
||||
import fg from 'fast-glob'
|
||||
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',
|
||||
};
|
||||
|
||||
const indexList = fg.globSync('index-*.js', {
|
||||
cwd: process.cwd() + '/dist',
|
||||
})
|
||||
const indexPath = indexList.map(file => {
|
||||
const basename = path.basename(file, '.js');
|
||||
const [_, hash] = basename.split('-');
|
||||
console.log('Found index file:', `http://localhost:${PORT}/${basename}`);
|
||||
return { file, hash, basename };
|
||||
});
|
||||
|
||||
|
||||
async function ssrRender(res: http.ServerResponse, opts: {
|
||||
mode: 'server' | 'client',
|
||||
urlPath: string,
|
||||
filename?: string
|
||||
}) {
|
||||
let template: string;
|
||||
const mode = opts.mode || 'client';
|
||||
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 filename = opts.filename;
|
||||
const bootstrapScripts = [filename]
|
||||
const scriptTag = bootstrapScripts.map(src => `<script type='module' src="${src}"/></script>`).join('');
|
||||
const stream = await renderToReadableStream(<Main data={serverData} />, {
|
||||
});
|
||||
|
||||
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>`)
|
||||
.replace('</body>', `${scriptTag}</body>`);
|
||||
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) => {
|
||||
if (req.url === '/ssr') {
|
||||
const { pipe } = renderToPipeableStream(<AServer />, {
|
||||
bootstrapScripts: [],
|
||||
onShellReady() {
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' });
|
||||
pipe(res);
|
||||
},
|
||||
onShellError(err) {
|
||||
console.error('Shell error:', err);
|
||||
res.writeHead(500);
|
||||
res.end('Server Error');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const str = renderToString(<A />);
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' });
|
||||
res.end(str);
|
||||
const urlPath = req.url?.split('?')[0] || '/';
|
||||
|
||||
if (urlPath === '/') {
|
||||
ssrRender(res, { mode: 'client', urlPath: '' });
|
||||
return;
|
||||
}
|
||||
const find = indexPath.find((item) => urlPath === `/${item.basename}`);
|
||||
if (find) {
|
||||
ssrRender(res, { mode: 'server', urlPath, filename: './' + find.file });
|
||||
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, { mode: 'client', urlPath: '/a' });
|
||||
}).listen(PORT, () => {
|
||||
console.log(`Server running on http://localhost:${PORT}`);
|
||||
});
|
||||
10
src/ssr.tsx
10
src/ssr.tsx
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { renderToReadableStream } from 'react-dom/server';
|
||||
import VA from './pages/v/a';
|
||||
import { createRoot, hydrateRoot } from 'react-dom/client'
|
||||
import VA from './pages/a/main.tsx';
|
||||
// import { createRoot, hydrateRoot } from 'react-dom/client'
|
||||
export async function renderToString(comp: React.ReactElement): Promise<string> {
|
||||
const response = await renderToReadableStream(
|
||||
<>{comp}</>,
|
||||
@@ -20,10 +20,10 @@ export async function renderToString(comp: React.ReactElement): Promise<string>
|
||||
return html;
|
||||
}
|
||||
|
||||
console.log(await renderToString(<VA />));
|
||||
console.log(await renderToString(<VA data={{ version: '1' }} />));
|
||||
|
||||
// const root = createRoot(document.getElementById('root')!);
|
||||
// root.render(<VA />);
|
||||
// hydrateRoot(document.getElementById('root')!, <VA />);
|
||||
// hydrateRoot(document.getElementById('root')!, <VA version="" />);
|
||||
//
|
||||
// console.log(await renderToString(<VA />));
|
||||
// console.log(await renderToString(<VA version="" />));
|
||||
Reference in New Issue
Block a user