SethTrowbridge/deno-ssr
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

SSR+Hydration working

Browse Source
This commit is contained in:
TreetopFlyer 2021-07-16 11:17:14 -04:00
commit fb0a8adf55
6 changed files with 79 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
importmap.json Normal file
View File

@ -0,0 +1,14 @@
{
"imports":
{
"/": "./src/",
"./": "./src/",
"oak": "https://deno.land/x/oak/mod.ts",
"react": "http://esm.sh/react",
"react-dom": "http://esm.sh/react-dom",
"react-dom/": "http://esm.sh/react-dom/",
"@emotion/": "http://esm.sh/@emotion/"
}
}

9
scripts.json Normal file
View File

@ -0,0 +1,9 @@
{
"scripts":
{
"start":
{
"cmd": "deno run --import-map=importmap.json --allow-net --unstable --allow-read ./src/app_server.tsx"
}
}
}

11
src/app.tsx Normal file
View File

@ -0,0 +1,11 @@
import React, { useState } from "react";
export default () =>
{
let [countGet, countSet] = useState(3);
return <div>
<h3>home page</h3>
<p>{countGet}</p>
<button onClick={e=>countSet(countGet+1)}>+</button>
</div>;
};

5
src/app_client.tsx Normal file
View File

@ -0,0 +1,5 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "/app.tsx";
ReactDOM.hydrate(<App/>, document.querySelector("#root"));

33
src/app_server.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Application, Router } from "oak";
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "/app.tsx";
let bundle = "";
Deno.emit("./src/app_client.tsx", {
bundle: "classic",
compilerOptions: { lib: ["dom", "dom.iterable", "esnext"] },
importMapPath: "./importmap.json",
}).then(result => bundle = result.files["deno:///bundle.js"]);
const router = new Router();
router.get("/", (context) => { context.response.body =
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>v 2.0</h1>
<div id="root">${ReactDOMServer.renderToString(<App />)}</div>
<script>${bundle}</script>
</body>
</html>`;
});
const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());
app.listen({ port:8000 });

7
tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"compilerOptions": {
"allowJs": true,
"jsx": "react",
"lib": ["deno.window"]
}
}