test/test-rsc-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
熊潇
2026-04-14 12:24:48 +08:00
parent a0c48937ad
commit bb7e654589
11 changed files with 140 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -8,9 +8,7 @@
</head> </head>
<body> <body>
<div id="root"> <div id="root"></div>
</div>
<script type="module" src="/src/browser-entry.tsx"></script> <script type="module" src="/src/browser-entry.tsx"></script>
</body> </body>

5
package.json
View File

@@ -1,11 +1,12 @@
{ {
"name": "@vitejs/plugin-rsc-examples-starter", "name": "rsc",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"license": "MIT", "license": "MIT",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "bun run --host src/entry.tsx" "dev": "tsx src/server-node.tsx",
"build": "bun build index.html --outdir dist "
}, },
"dependencies": { "dependencies": {
"@ant-design/cssinjs": "^2.1.2", "@ant-design/cssinjs": "^2.1.2",

16
src/browser-entry.tsx
View File

@@ -1,6 +1,14 @@
import { hydrateRoot } from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
import A from './pages/a/index'; import App from './pages/a/main';
// import AServer from './pages/a/server/index.tsx';
// React 19: renderToPipeableStream embeds RSC payload in HTML declare global {
// hydrateRoot will find and use that payload automatically interface Window {
hydrateRoot(document.getElementById('root')!, <A />); __SERVER_DATA__?: { version: string };
}
}
if (typeof document !== 'undefined') {
const data = window.__SERVER_DATA__ ?? { version: '' };
hydrateRoot(document.getElementById('root')!, <App />);
}

4
src/entry.tsx
View File

@@ -1,10 +1,10 @@
import { renderToReadableStream } from 'react-dom/server'; import { renderToReadableStream } from 'react-dom/server';
import A from './pages/a/index'; import A from './pages/a/List';
Bun.serve({ Bun.serve({
port: 3000, port: 3000,
async fetch(req) { async fetch(req) {
const stream = await renderToReadableStream(<A />, { const stream = await renderToReadableStream(<A version=''/>, {
bootstrapScripts: [], bootstrapScripts: [],
}); });

16
src/pages/a/List.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { useEffect } from "react";
export default function List({ version }: { version: string }) {
useEffect(() => {
console.log('useEffect in List');
}, []);
return (
<div>
<h1>List - Version {version}</h1>
<div style={{
width: 200
}}>Primary Button</div>
</div>
);
}

13
src/pages/a/index.tsx
View File

@@ -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>
);
}

18
src/pages/a/main.tsx Normal file
View File

@@ -0,0 +1,18 @@
import List from './List.tsx';
// 模拟异步获取数据
async function fetchData() {
await new Promise(resolve => setTimeout(resolve, 1000));
return { version: '2.0.0', timestamp: Date.now() };
}
// Server Component - 直接 await 获取数据
export default async function ServerApp() {
const data = await fetchData();
return (
<div>
<h2>Server Time: {new Date(data.timestamp).toLocaleTimeString()}</h2>
<List version={data.version} />
</div>
);
}

8
src/pages/a/server-index.tsx
View File

@@ -1,8 +0,0 @@
// Server component - no 'use client' directive
export default function ServerList() {
return (
<div>
<h1>Server List</h1>
</div>
);
}

16
src/pages/a/server/index.tsx
View File

@@ -1,18 +1,12 @@
'use server'; 'use server';
import { useEffect } from "react"; import A from '../List';
const getVersion = async () => { const getVersion = async () => {
await new Promise(resolve => setTimeout(resolve, 1000)); 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(); const v = await getVersion();
return ( return <A version={v} />;
<div>
<h1>List - Version {v}</h1>
<div style={{
width: 200
}}>Primary Button</div>
</div>
);
} }

93
src/server-node.tsx
View File

@@ -1,31 +1,86 @@
"use server"; import { renderToReadableStream } from 'react-dom/server';
import { renderToPipeableStream, renderToString } from 'react-dom/server'; import Main from './pages/a/main.tsx';
// import A from './pages/a/index.tsx';
import { AEntry } from './browser-entry.tsx';
import AServer from './pages/a/server/index.tsx';
import http from 'http'; import http from 'http';
import fs from 'fs';
import path from 'path';
const PORT = 3000; const PORT = 3000;
const distDir = path.join(process.cwd(), 'dist');
const indexHtmlPath = path.join(process.cwd(), 'dist/index.html');
http.createServer((req, res) => { const mimeTypes: Record<string, string> = {
if (req.url === '/ssr') { '.html': 'text/html',
const { pipe } = renderToPipeableStream(<AServer />, { '.js': 'application/javascript',
bootstrapScripts: [], '.css': 'text/css',
onShellReady() { '.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.svg': 'image/svg+xml',
'.ico': 'image/x-icon',
};
async function ssrRender(res: http.ServerResponse, version: string) {
let template: string;
try {
template = fs.readFileSync(indexHtmlPath, 'utf-8');
} catch {
res.writeHead(500);
res.end('dist/index.html not found');
return;
}
const serverData = { version };
try {
const stream = await renderToReadableStream(<Main />, {
bootstrapScripts: []
});
let renderedHtml = '';
for await (const chunk of stream) {
renderedHtml += new TextDecoder().decode(chunk);
}
console.log('Rendered HTML:', renderedHtml);
const dataScript = `<script>window.__SERVER_DATA__ = ${JSON.stringify(serverData)};</script>`;
const html = template
.replace('<div id="root"></div>', `<div id="root">${renderedHtml}</div>`)
.replace('</head>', `${dataScript}</head>`);
res.writeHead(200, { 'Content-Type': 'text/html' }); res.writeHead(200, { 'Content-Type': 'text/html' });
pipe(res); res.end(html);
}, } catch (err) {
onShellError(err) { console.error('Render error:', err);
console.error('Shell error:', err);
res.writeHead(500); res.writeHead(500);
res.end('Server Error'); res.end('Server Error');
} }
}); }
} else {
const str = renderToString(<A />); http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' }); const urlPath = req.url?.split('?')[0] || '/';
res.end(str);
if (urlPath === '/') {
ssrRender(res, '');
return;
} }
if (urlPath === '/a') {
ssrRender(res, '1.0.0');
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, () => { }).listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`); console.log(`Server running on http://localhost:${PORT}`);
}); });

10
src/ssr.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { renderToReadableStream } from 'react-dom/server'; import { renderToReadableStream } from 'react-dom/server';
import VA from './pages/v/a'; import VA from './pages/a/main.tsx';
import { createRoot, hydrateRoot } from 'react-dom/client' // import { createRoot, hydrateRoot } from 'react-dom/client'
export async function renderToString(comp: React.ReactElement): Promise<string> { export async function renderToString(comp: React.ReactElement): Promise<string> {
const response = await renderToReadableStream( const response = await renderToReadableStream(
<>{comp}</>, <>{comp}</>,
@@ -20,10 +20,10 @@ export async function renderToString(comp: React.ReactElement): Promise<string>
return html; return html;
} }
console.log(await renderToString(<VA />)); console.log(await renderToString(<VA version="" />));
// const root = createRoot(document.getElementById('root')!); // const root = createRoot(document.getElementById('root')!);
// root.render(<VA />); // 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="" />));