このページ内容は2022年9月9日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
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
}

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
サイトマップ
Notes
業務や趣味での気づき・メモ
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧