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

Compare commits

merge into: xt:main
Branches Tags
xt:main xt:partial
...
pull from: xt:partial
Branches Tags
xt:main xt:partial

4 Commits
main ... partial

Author SHA1 Message Date
徐涛
65622e08e5 更改一下服务的监听端口。 2024-12-16 16:09:56 +08:00
徐涛
a0dbe4f7fc 切换到使用renderToReadableStream渲染根组件。 2024-12-16 15:18:42 +08:00
徐涛
dbaee0c81a 基本上完成了对于SSR的实验，但CSS Module的实验未完成。 2024-12-15 07:49:18 +08:00
徐涛
d6aa2782bf 补充丢失的样式文件。 2024-12-13 16:57:42 +08:00
9 changed files with 76 additions and 35 deletions
Expand all files Collapse all files

5
.gitignore vendored
View File

@@ -70,6 +70,7 @@ $RECYCLE.BIN/
# Icon must end with two \r
Icon
# Thumbnails
._*
@@ -202,6 +203,7 @@ fabric.properties
# Icon must end with two \r
Icon
# Thumbnails
._*
@@ -1027,3 +1029,6 @@ _site/
# counterproductive to check this file into the repository.
# 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.

16
index.html
View File

@@ -1,13 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<html lang="zh-CN">
<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>
</head>
<body>
<div id="root"><!--ssr-outlet--></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</body>
</html>

1
package.json
View File

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

26
server.ts
View File

@@ -5,22 +5,40 @@ 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 () => {
app.get('/', async ({ request }) => {
const url = request.url.replace(base, '');
const app = createElement(App);
const stream = await renderToReadableStream(app, { bootstrapScripts: ['/src/main.tsx'] });
return new Response(stream, {
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, {
headers: {
'Content-Type': 'text/html',
},
});
});
app.listen(3000);
app.listen(8000);
console.log(`Server running at http://${app.server?.hostname}:${app.server?.port}`);

10
src/App.tsx
View File

@@ -6,21 +6,11 @@ import { MainLayout } from './pages/MainLayout';
export const App = () => {
return (
<StrictMode>
<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, <App />);
hydrateRoot(document.getElementById('root'), <App />);

23
src/pages/MainLayout.module.css Normal file
View File

@@ -0,0 +1,23 @@
@layer page {
.main_layout {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.navigation_column {
min-width: 230px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 4px;
}
.content {
flex: 1 0 auto;
}
}

2
src/pages/MainLayout.tsx
View File

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