SSR working

3 years ago · 3dc3668967
parent 457e7a09f6
commit 3dc3668967
5 changed files with 37 additions and 24 deletions
--- a/server/index.js
+++ b/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"));

--- a/server/ssr.js
+++ b/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);
  };
 };
--- a/src/main-server.jsx
+++ b/src/main-server.jsx
@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/server'
+import './index.css'
+import App from './App'
+
+console.log('hello');
+
+export const render = (url) => ReactDOM.renderToNodeStream(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
--- a/src/main.jsx
+++ b/src/main.jsx
@ -3,8 +3,7 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'

-console.log('hello');
-ReactDOM.render(
+ReactDOM.hydrate(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
--- a/template/index.html
+++ b/template/index.html
@ -1,24 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <!-- ToDo: only add in DEV mode -->
-    <script type="module" src="/@vite/client"></script>
-    <script type="module">
-      import RefreshRuntime from "/@react-refresh";
-      RefreshRuntime.injectIntoGlobalHook(window);
-      window.$RefreshReg$ = () => {};
-      window.$RefreshSig$ = () => (type) => type;
-      window.__vite_plugin_react_preamble_installed__ = true;
-    </script>
+    <!-- __VITE_SSR_BOOTSTRAP -->

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
-    <div id="root">
-      <!-- __REACT_SSR_APP__ -->
-    </div>
+    <div id="root"><!-- __REACT_SSR_APP__ --></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>