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

28
server/ssr.js
View File

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

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 App from './App'
console.log('hello');
ReactDOM.render(
ReactDOM.hydrate(
<React.StrictMode>
<App />
</React.StrictMode>,

14
template/index.html
View File

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