diff --git a/bun.lockb b/bun.lockb
index c1d33b1..0a6ec4b 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/index.html b/index.html
index e4b78ea..c052e9f 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,15 @@
-
-
-
-
-
- Vite + React + TS
-
-
-
-
-
+
+
+
+
+
+ Vite + React + TS
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
index d376351..a3069ac 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/server.ts b/server.ts
index dbc48dc..1adb8f4 100644
--- a/server.ts
+++ b/server.ts
@@ -1,20 +1,37 @@
import Elysia from 'elysia';
import { connect } from 'elysia-connect-middleware';
import { createElement } from 'react';
-import { renderToReadableStream } from 'react-dom/server';
+import { renderToString } 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 renderToString(app);
+
+ if (!isProduction) {
+ template = await vite.transformIndexHtml(url, template);
+ }
+
+ const html = template.replace(``, () => rootComponent);
+
+ return new Response(html, {
headers: {
'Content-Type': 'text/html',
},
diff --git a/src/App.tsx b/src/App.tsx
index 99bc758..1def252 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,21 +6,11 @@ import { MainLayout } from './pages/MainLayout';
export const App = () => {
return (
-
-
-
-
- React SSR App
-
-
-
-
-
- } />
-
-
-
-
+
+
+ } />
+
+
);
};
diff --git a/src/main.tsx b/src/main.tsx
index ddfcadd..75c722f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -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, );
+hydrateRoot(document.getElementById('root'), );
diff --git a/src/pages/MainLayout.tsx b/src/pages/MainLayout.tsx
index d9ecdcd..2993e13 100644
--- a/src/pages/MainLayout.tsx
+++ b/src/pages/MainLayout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { Outlet } from 'react-router-dom';
import styles from './MainLayout.module.css';