pierre/tmp-vite-ssr
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

SSR working

Browse Source
This commit is contained in:
Pierre Martin 2021-01-29 05:00:49 +01:00
parent 457e7a09f6
commit 3dc3668967
5 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
server/index.js
View File

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

28
server/ssr.js
View File

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

13
src/main-server.jsx Normal file
View File

@ -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>
);

3
src/main.jsx
View File

@ -3,8 +3,7 @@ import ReactDOM from 'react-dom'
import './index.css' import './index.css'
import App from './App' import App from './App'
console.log('hello'); ReactDOM.hydrate(
ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, </React.StrictMode>,

14
template/index.html
View File

@ -1,24 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- ToDo: only add in DEV mode --> <!-- __VITE_SSR_BOOTSTRAP -->
<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>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>
<div id="root"> <div id="root"><!-- __REACT_SSR_APP__ --></div>
<!-- __REACT_SSR_APP__ -->
</div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.jsx"></script>
</body> </body>
</html> </html>