basic ssr impl

index.html

@@ -29,7 +29,7 @@
     <title>Alex Frantz</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="app"><!--app-html--></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/entry-client.tsx"></script>
   </body>
 </html>

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "dev:ssr": "ts-node --esm server.ts",
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -11,22 +12,28 @@
     "start": "tsc && vite build && serve -p 8099 -s ./dist"
   },
   "dependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.13.1",
+    "compression": "^1.7.5",
+    "express": "^4.21.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
+    "@types/compression": "^1.7.5",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

server.ts

@@ -0,0 +1,44 @@
+import express, { Request, Response } from 'express'
+import { createServer as createViteServer } from 'vite'
+import compression from 'compression'
+import fs from 'fs'
+import path from 'path'
+
+async function createServer() {
+    const app = express()
+    app.use(compression())
+
+    const vite = await createViteServer({
+        server: { middlewareMode: true },
+        appType: 'custom'
+    })
+    app.use(vite.middlewares)
+
+    app.use('*', async (req: Request, res: Response) => {
+        const url = req.originalUrl
+
+        try {
+            const template = fs.readFileSync(
+                path.resolve(process.cwd(), 'index.html'),
+                'utf-8'
+            )
+
+            const transformedTemplate = await vite.transformIndexHtml(url, template)
+            const { render } = await vite.ssrLoadModule('./src/entry-server.tsx')
+            const appHtml = await render(url)
+
+            const html = transformedTemplate.replace(`<!--app-html-->`, appHtml)
+            res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+        } catch (e) {
+            vite.ssrFixStacktrace(e as Error)
+            console.error(e)
+            res.status(500).end((e as Error).stack)
+        }
+    })
+
+    app.listen(3000, () => {
+        console.log('server started')
+    })
+}
+
+createServer()

src/App.tsx

@@ -0,0 +1,54 @@
+import { Routes, Route, Link } from 'react-router-dom'
+
+import MainPage from './pages/index';
+import PrivacyPage from './pages/privacy';
+import MusicWidget from './pages/music';
+import LinksPage from './pages/links';
+
+import './assets/main.css'
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<MainPage />} />
+      <Route path="/privacy" element={<PrivacyPage />} />
+      <Route path="*" element={<div>404 Not Found</div>} />
+    </Routes>
+  )
+}
+
+// import ReactDOM from 'react-dom/client'
+// import {
+//   createBrowserRouter,
+//   RouterProvider
+// } from "react-router-dom"
+// import './assets/main.css'
+
+// // pages
+// import MainPage from './pages/index';
+// import PrivacyPage from './pages/privacy';
+// import MusicWidget from './pages/music';
+// import LinksPage from './pages/links';
+
+// // const router = createBrowserRouter([
+// //   {
+// //     path: '/',
+// //     element: <MainPage />
+// //   },
+// //   {
+// //     path: '/privacy',
+// //     element: <PrivacyPage />
+// //   },
+// //   {
+// //     path: '/music',
+// //     element: <MusicWidget />
+// //   },
+// //   {
+// //     path: '/links',
+// //     element: <LinksPage />
+// //   }
+// // ])
+
+// // ReactDOM.createRoot(document.getElementById('root')!).render(
+// //   <RouterProvider router={router} />
+// // )

src/entry-client.tsx

@@ -0,0 +1,10 @@
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from './App'
+
+ReactDOM.hydrateRoot(
+    document.getElementById("app") as HTMLElement,
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+)

src/entry-server.tsx

@@ -0,0 +1,11 @@
+import { StaticRouter } from "react-router-dom/server"
+import { renderToString } from "react-dom/server"
+import App from "./App"
+
+export function render(url: string): string {
+    return renderToString(
+        <StaticRouter location={url}>
+            <App />
+        </StaticRouter>
+    )
+}

src/main.tsx

@@ -1,35 +0,0 @@
-import ReactDOM from 'react-dom/client'
-import {
-  createBrowserRouter,
-  RouterProvider
-} from "react-router-dom"
-import './assets/main.css'
-
-// pages
-import MainPage from './pages/index';
-import PrivacyPage from './pages/privacy';
-import MusicWidget from './pages/music';
-import LinksPage from './pages/links';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <MainPage />
-  },
-  {
-    path: '/privacy',
-    element: <PrivacyPage />
-  },
-  {
-    path: '/music',
-    element: <MusicWidget />
-  },
-  {
-    path: '/links',
-    element: <LinksPage />
-  }
-])
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <RouterProvider router={router} />
-)

tsconfig.json

@@ -1,25 +1,13 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "skipLibCheck": true,
+    "moduleResolution": "node",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
+    "esModuleInterop": true,
-    "noUnusedParameters": true,
+    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true
+    "types": ["vite/client", "node"]
   },
-  "include": ["src"],
+  "include": ["src"]
-  "references": [{ "path": "./tsconfig.node.json" }]
 }