はじめに
@isihigameKoudaiさんの DenoでReact Server Side Renderingした話 の記事に触発されて、DenoでpreactコンポーネントのSSRをやってみました。
必要なもの
- Deno (v1.2.0で動作確認しています)
- htm
- preact-render-to-string
preactのコンポーネントをSSRする
まず、mod.tsという名前で以下のようなファイルを用意します。
mod.ts
import { html } from "https://cdn.skypack.dev/htm@v3.0.4/preact/standalone.module.js";
import renderToString from "https://cdn.skypack.dev/preact-render-to-string@v5.1.10";
import { serve } from "https://deno.land/std@v0.61.0/http/server.ts";
// コンポーネント
const App = () => html`
<div>
Hello world!
</div>
`;
// HTTPサーバを起動
const server = serve({ port: 3000 });
for await (const req of server) {
req.respond({
body: renderToString(html`
<html>
<head>
<title>Hello world</title>
<meta charset="utf-8" />
</head>
<body>
<${App} />
</body>
</html>
`)
});
}
次に、以下のコマンドでmod.tsを実行し、HTTPサーバを起動します。
$ deno run --allow-net mod.ts
サーバが起動したら、curlでリクエストを送信します。
$ curl http://localhost:3000
<html><head><title>Hello world</title><meta charset="utf-8" /></head><body><div>Hello world!</div></body></html>
HTMLが表示されれば成功です!
おわりに
この記事は以下のサイトを参考にしました 