xt/react-ssr-experiment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: xt:partial
Branches Tags
xt:main
xt:partial
..
compare: xt:main
Branches Tags
xt:main
xt:partial

2 Commits
partial ... main

Author SHA1 Message Date
徐涛
8fc288dbf6 更改服务运行端口。 2024-12-16 16:16:29 +08:00
徐涛
ddb9bcda2f 追加丢失的CSS Module文件。 2024-12-16 16:15:50 +08:00
8 changed files with 31 additions and 45 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1030,5 +1030,4 @@ _site/
# Details at https://github.com/github/pages-gem/issues/768
Gemfile.lock
# Fix extra-ignoring for kernel module file pattern on CSS Module files.
!*.module.css

BIN
bun.lockb
View File

Binary file not shown.

24
index.html
View File

@ -1,15 +1,13 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"><!--ssr-outlet--></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

1
package.json
View File

@ -11,7 +11,6 @@
},
"dependencies": {
"@elysiajs/static": "^1.1.1",
"clsx": "^2.1.1",
"elysia": "^1.1.26",
"elysia-connect-middleware": "^0.0.3",
"react": "^19.0.0",

24
server.ts
View File

@ -5,34 +5,16 @@ import { renderToReadableStream } from 'react-dom/server';
import { createServer } from 'vite';
import { App } from './src/App';
const isProduction = process.env.NODE_ENV === 'production';
const base = process.env.BASE || '/';
let template = '';
if (!isProduction) {
const templateFile = Bun.file('index.html');
template = await templateFile.text();
}
const app = new Elysia();
const vite = await createServer({
server: { middlewareMode: true },
appType: 'custom',
});
app.use(connect(vite.middlewares));
app.get('/', async ({ request }) => {
const url = request.url.replace(base, '');
app.get('/', async () => {
const app = createElement(App);
const rootComponent = await renderToReadableStream(app);
const rootComponentString = await Bun.readableStreamToText(rootComponent);
if (!isProduction) {
template = await vite.transformIndexHtml(url, template);
}
const html = template.replace(`<!--ssr-outlet-->`, () => rootComponentString);
return new Response(html, {
const stream = await renderToReadableStream(app, { bootstrapScripts: ['/src/main.tsx'] });
return new Response(stream, {
headers: {
'Content-Type': 'text/html',
},

20
src/App.tsx
View File

@ -6,11 +6,21 @@ import { MainLayout } from './pages/MainLayout';
export const App = () => {
return (
<StrictMode>
<StaticRouter>
<Routes>
<Route path="/" element={<MainLayout />} />
</Routes>
</StaticRouter>
<html lang="zh-CN">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React SSR App</title>
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
<StaticRouter>
<Routes>
<Route path="/" element={<MainLayout />} />
</Routes>
</StaticRouter>
</body>
</html>
</StrictMode>
);
};

4
src/main.tsx
View File

@ -1,8 +1,8 @@
// Boot styles
import './index.css';
// import './index.css';
// Boot scripts
import { hydrateRoot } from 'react-dom/client';
import { App } from './App';
hydrateRoot(document.getElementById('root'), <App />);
hydrateRoot(document, <App />);

2
src/pages/MainLayout.tsx
View File

@ -1,5 +1,3 @@
'use client';
import { Outlet } from 'react-router-dom';
import styles from './MainLayout.module.css';