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