Fresh
#Deno #Deno_Deploy #Twind
概要
https://github.com/lucacasonato/fresh
Deno公式のWebフレームワーク
Deno Deployで動作させることにより、エッジサーバ上でのSSRやjust-in-timeによるビルドを提供します
PreactコンポーネントのSSRをサポートします
Next.jsライクなルーティングシステムやIsland Architectureなどをサポート
TwindやPreact Signalsなどを公式でサポート
プロジェクトの初期化
init.tsを実行すると、プロジェクトが作成されます
code:shell
$ deno run -A -r https://fresh.deno.dev <ディレクトリ名>
上記を実行すると、deno.jsonやimport_map.jsonなどの開発に必要なファイルが自動生成されます。
devサーバの起動
deno taskを使います
code:shell
$ deno task start
ルーティング
FreshはNext.jsライクなファイルシステムベースのルーティングを提供しています。
routesディレクトリ
Routeを配置するディレクトリです。
routesディレクトリ内の構造を元に、最終的なパスが決定されます。
Dynamic routes
users/[id].tsxのような形式でファイルを用意すると定義できます。
Route
Routeとはページまたはハンドラのいずれかまたはその両方を定義したモジュールのことです。
ページ
RouteからPreactコンポーネントをdefault exportすると、対応するパスにアクセスした際にそのコンポーネントがSSRされます。
ハンドラ
RequestとHandlerContextを受け取りResponseまたはPromies<Response>を返却する関数です。
後述するカスタムハンドラを定義することで、ページのレンダリング時の挙動のカスタマイズなどが可能です。
あるRouteでカスタムハンドラを定義していない場合、同一Routeでdefault exportしているページコンポーネントをSSRするハンドラがデフォルトで実行されます。
カスタムハンドラ
APIエンドポイントの作成など様々な用途で活用できます。
カスタムハンドラを定義したいときは、Routeから下記いずれかの形式でhandlerをexportする必要があります。
(request: Request, ctx: HandlerContext) => Response | Promise<Response>
{ [httpMethod: string]: (request: Request, ctx: HandlerContext) => Response | Promise<Response> }
カスタムハンドラでctx.render()を呼ぶと、同一Routeで定義されているページコンポーネントがレンダリングされます。
また、ctx.render()に渡した引数は、対応するページコンポーネントのprops.data経由でアクセスできます。
Islands
概要
Freshでは、routesディレクトリに配置したページコンポーネントはSSRされます。
それに対して、islandsディレクトリに配置したコンポーネントは、クライアントサイドでレンダリングされます。
命名形式
Islandコンポーネントのファイル名はパスカルケースまたはケバブケース形式で命名する必要があります。
ミドルウェア
ミドルウェアを定義することで、ハンドラの実行前後に処理を挟めます。
routesディレクトリ配下に_middleware.tsを配置し、handler関数をexportすることで定義できます。
handlerは引数としてRequestとMiddlewareHandlerContextを受け取り、MiddlewareHandlerContextのnextを呼ぶことで、後続のハンドラが実行されます。
エラーページ
404エラー
routes/_404.tsxでコンポーネントをdefault exportすることで、404エラー用のページをカスタマイズできます (コンポーネントにはUnknownPagePropsが渡されます)
404ページを明示的にレンダリングしたいときは、HandlerContext#renderNotFoundを利用できます。
code:with-render-not-found.tsx
export const handler: Handlers = {
GET(req, ctx) {
return ctx.renderNotFound();
},
};
500エラー
routes/_500.tsxでコンポーネントをdefault exportすることで、500エラー用のページをカスタマイズできます (コンポーネントにはErrorPagePropsが渡されます)
Custom App
routes/_app.tsxに配置します。
Custom Appコンポーネントに渡されるpropsについてはAppProps型を参照
Freshで提供されるコンポーネント
<Head> - <head>タグの内容を組み立てる際に使用できます。 (将来的に非推奨化される予定です)
静的ファイル
staticディレクトリに配置したファイルは静的に配信されます
Freshが提供するasset関数を利用することで、staticディレクトリ内のファイルへの絶対パスをビルドID付きで取得することもできます。
また、Freshは<img>や<source>のsrcやsrcset属性のパスに対して、自動でビルドIDを付与してくれます。(この挙動を無効化したいときは、data-fresh-disable-lockを指定する必要があります)
プラグイン
Freshを拡張する仕組み
公式ではTwindプラグインが提供されています。
アップデート
Fresh v1.1からアップデート用スクリプトが実装されています
code:shell
$ deno run -A -r https://fresh.deno.dev/update .
エコシステム
fresh_seo
ドキュメント
fresh.deno.dev - 公式サイト
fresh-ja.deno.dev - 上記公式サイトに日本語訳
公式ブログ
You Don't Need a Build Step
Fresh 1.1 - automatic JSX, plugins, DevTools, and more
Fresh 1.0
関連ページ
Freshと他ライブラリとの連携やサポート状況などについて
Deno Deploy