Zenn
Closed7

Deno DeployでReactでSSRする

React
Deno
CatminusminusCatminusminus
// @deno-types="https://servestjs.org/@v1.1.7/types/react/index.d.ts"
import React from "https://dev.jspm.io/react/index.js";
// @deno-types="https://servestjs.org/@v1.1.7/types/react-dom/server/index.d.ts"
import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";

addEventListener("fetch", (event) => {
  const html = ReactDOMServer.renderToString(
    <html>
      <head>
        <title>Deno Deploy Example</title>
      </head>
      <body>
        Hello Deno Deploy!
      </body>
    </html>
  );
  event.respondWith(
    new Response(html, {
      headers: {
        "content-type": "text/html; charset=UTF-8",
      },
    })
  );
});

だとdeployctl runでTS2304 [ERROR]: Cannot find name 'h'.が各タグに出てダメだった。

CatminusminusCatminusminus

そこでReact.createElementを使うと

// @deno-types="https://servestjs.org/@v1.1.7/types/react/index.d.ts"
import React from "https://dev.jspm.io/react/index.js";
// @deno-types="https://servestjs.org/@v1.1.7/types/react-dom/server/index.d.ts"
import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";

addEventListener("fetch", (event) => {
  const e = React.createElement;

  const html = ReactDOMServer.renderToString(
    e("html", null, [
      e("head", { key: "head" }, e("title", null, "Deno Deploy Example")),
      e("body", { key: "body" }, "Hello Deno Deploy!"),
    ]),
  );

  event.respondWith(
    new Response(html, {
      headers: {
        "content-type": "text/html; charset=UTF-8",
      },
    }),
  );
});

で、deployctl runで動いた。

CatminusminusCatminusminus

しかし、ドキュメントには
"Built-in support for TypeScript and JSX: type safe code, and intuitive server side rendering without a build step"

とあるので、JSXが使えないことはないはず・・・

CatminusminusCatminusminus

型エラーが無限に出るので--no-checkが必要だが、これで動くには動く。

import render from 'https://esm.sh/preact-render-to-string@5.1.18';
import { h } from 'https://esm.sh/preact@10.5.13';


addEventListener("fetch", (event) => {
  const html = render(
    <html>
      <head>
        <title>Deno Deploy Example</title>
      </head>
      <body>
        Hello Deno Deploy!
      </body>
    </html>
  );

  event.respondWith(
    new Response(html, {
      headers: {
        "content-type": "text/html; charset=UTF-8",
      },
    }),
  );
});

ここでjsxFactory: "h"になっているためっぽいが、何故だろうか・・・

CatminusminusCatminusminus

deployctlで動かないだけかも知れないと思いReact版でデプロイしたらfailしたので、現状はDeno Deploy自体がReact対応はしていないっぽい

このスクラップは2021/04/24にクローズされました