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 # Details at https://github.com/github/pages-gem/issues/768
Gemfile.lock Gemfile.lock
# Fix extra-ignoring for kernel module file pattern on CSS Module files.
!*.module.css !*.module.css

BIN
bun.lockb
View File

Binary file not shown.

24
index.html
View File

@ -1,15 +1,13 @@
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>
<body>
<body> <div id="root"></div>
<div id="root"><!--ssr-outlet--></div> <script type="module" src="/src/main.tsx"></script>
<script type="module" src="/src/main.tsx"></script> </body>
</body>
</html> </html>

1
package.json
View File

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

24
server.ts
View File

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

20
src/App.tsx
View File

@ -6,11 +6,21 @@ import { MainLayout } from './pages/MainLayout';
export const App = () => { export const App = () => {
return ( return (
<StrictMode> <StrictMode>
<StaticRouter> <html lang="zh-CN">
<Routes> <head>
<Route path="/" element={<MainLayout />} /> <meta charSet="utf-8" />
</Routes> <meta name="viewport" content="width=device-width, initial-scale=1" />
</StaticRouter> <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> </StrictMode>
); );
}; };

4
src/main.tsx
View File

@ -1,8 +1,8 @@
// Boot styles // Boot styles
import './index.css'; // import './index.css';
// Boot scripts // Boot scripts
import { hydrateRoot } from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
import { App } from './App'; 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 { Outlet } from 'react-router-dom';
import styles from './MainLayout.module.css'; import styles from './MainLayout.module.css';