Deno Fresh

Deno FreshはDeno Deploy上に展開されるフルスタックフレームワークです^deno。UI部分はPreactで記述し、デフォルトでJavaScriptの使用量を最小限に抑えるようにIsland Architectureを採用しています。

Island ArchitectureとはサーバーレンダリングでWebページを生成するときに、個々のインタラクティブな部分 (JavaScriptを使う部分) 以外を静的なHTMLとして先に送信し、後から個々のインタラクティブな部分を活性化 (Hydrate) させるアーキテクチャです^{island_architecture}。

Deno DeployではIsland Architectureを採用しているため、最初のページ遷移時にJavaScriptを送らず、ページ読み込みが速くなります。その他にも、Deno FreshはDeno Deploy上でJITレンダリングされたものをクライアントに送信するため、ビルドステップがないなどの特徴があります。

初期テンプレート作成時のファイル構成は以下のようになります。islandsディレクトリはJavaScript (useStateやuseEffectなども含む) を利用したいコンポーネントを置く場所で、routesディレクトリはページのパスやそのページでの処理、見た目などを書く場所です (routesはNext.jsにおけるpagesディレクトリに相当してます)。

ちなみに、routes配下ではuseStateやuseEffectが無効化されます。

1
islands/xxx.tsx
2
routes
3
 ├── api ─ xxx.tsx
4
 ├── index.tsx
5
 └── xxx.tsx
6
static/
7
utils/
8
deno.json
9
dev.ts
10
fresh.gen.ts
11
import_map.json
12
main.ts
13
README.md

ボタンクリックで数値が上昇するサンプルを作るとこのようになります。islandsディレクトリにHydrateさせたいコンポーネントを作成し、使用したいページでコンポーネントを読み込んで使います。

ちなみに、islandsディレクトリ配下のコンポーネント間でstateを共有したいときは、PreactのSignals (不正確かもしれませんが、vue3におけるrefのようなもの) を使うと良さそうです^{preact_signals}。

islands/Counter.tsx
1
// ここでは useStateを使いたいため、islandsディレクトリにコンポーネントを作成してます
2

3
/** @jsx h */
4
import { h } from "preact";
5
import { useState } from "preact/hooks";
6

7
// IS_BROWSERでクライアント側かサーバー側か判断して動かす
8
import { IS_BROWSER } from "$fresh/runtime.ts";
9

10
interface CounterProps {
11
  start: number;
12
}
13

14
export default function Counter(props: CounterProps) {
15
  const [count, setCount] = useState(props.start);
16

17
  return (
18
    <div>
19
      <p>{count}</p>
20
      <button onClick={() => setCount(count - 1)} disabled={!IS_BROWSER}>-1</button>
21
      <button onClick={() => setCount(count + 1)} disabled={!IS_BROWSER}>+1</button>
22
    </div>
23
  );
24
}

routes/counter.tsx
1
// ここでは /counterにアクセスしたときの見た目を作ります
2

3
/** @jsx h */
4
import { h } from "preact";
5
import Counter from "../islands/Counter.tsx";
6

7
export default function Home() {
8
  return (
9
    <Counter start={3} />
10
  );
11
}