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>
<body>
<div id="root">
</div>
<div id="root"></div>
<script type="module" src="/src/browser-entry.tsx"></script>
</body>

5
package.json
View File

@@ -1,11 +1,12 @@
{
"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",

16
src/browser-entry.tsx
View File

@@ -1,6 +1,14 @@
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
// hydrateRoot will find and use that payload automatically
hydrateRoot(document.getElementById('root')!, <A />);
declare global {
interface Window {
__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 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=''/>, {
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';
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} />;
}

99
src/server-node.tsx
View File

@@ -1,31 +1,86 @@
"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 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, 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.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, '');
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, () => {
console.log(`Server running on http://localhost:${PORT}`);
});

10
src/ssr.tsx
View File

@@ -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 version="" />));
// 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="" />));