SSR working

server/index.js

@@ -2,6 +2,7 @@ import express from "express";
 import vite from "vite";
 import ssr from "./ssr.js";
 
+// TODO https://github.com/vitejs/vite/blob/main/packages/playground/ssr/server.js
 (async () => {
   const app = express();
   const port = process.env.PORT || 3000;
@@ -23,7 +24,7 @@ import ssr from "./ssr.js";
     next();
   });
 
-  app.use("*", ssr(viteServer.transformRequest("/src/App.jsx")));
+  app.use("*", ssr(viteServer));
   // app.use(express.static("template"));
   // app.use(express.static("public"));
 

server/ssr.js

@@ -1,31 +1,41 @@
 import fs from "fs";
 import ReactDOMServer from "react-dom/server.js";
+import { preambleCode } from "@vitejs/plugin-react-refresh";
 // import App from "/src/App";
 
 const APP_PLACEHOLDER = "<!-- __REACT_SSR_APP__ -->";
+const VITE_PLACEHOLDER = "<!-- __VITE_SSR_BOOTSTRAP -->";
 
-export default (App) => {
-  console.log(App);
+export default (vite) => {
   return async function ssr(req, res, next) {
-    // ToDo
     console.log("ssr");
 
     const template = fs.readFileSync(process.cwd() + "/template/index.html", {
       encoding: "utf-8",
     });
-    console.log("template", template);
 
     const [pageBeforeApp, pageAfterApp] = template.split(APP_PLACEHOLDER);
 
-    console.log("start", pageBeforeApp);
-    res.write(pageBeforeApp);
-    const stream = ReactDOMServer.renderToNodeStream((await App).code);
+    res.write(
+      pageBeforeApp.replace(
+        VITE_PLACEHOLDER,
+        `<script type="module" src="/@vite/client"></script>
+        <script type="module">
+          ${preambleCode}
+        </script>`
+      )
+    );
+
+    const { render } = await vite.ssrLoadModule("/src/main-server");
+
+    // ToDo also return preload links
+    const stream = await render(req.originalUrl);
     stream.pipe(res, { end: false });
     stream.on("end", () => res.end(pageAfterApp));
-    // const stream = ReactDOMServer.renderToString(App);
+
+    // if string
     // console.log("content", stream);
     // res.write(stream);
-
     // res.end(pageAfterApp);
   };
 };