basic ssr impl

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} />
-)