SSR+Hydration working
This commit is contained in:
commit
fb0a8adf55
14
importmap.json
Normal file
14
importmap.json
Normal 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
9
scripts.json
Normal 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
11
src/app.tsx
Normal 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
5
src/app_client.tsx
Normal 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
33
src/app_server.tsx
Normal 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
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react",
|
||||||
|
"lib": ["deno.window"]
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user