Fresh
概要
プロジェクトの初期化
init.tsを実行すると、プロジェクトが作成されます
code:shell
devサーバの起動
code:shell
$ deno task start
ルーティング
routesディレクトリ
Routeを配置するディレクトリです。
routesディレクトリ内の構造を元に、最終的なパスが決定されます。
Dynamic routes
users/[id].tsxのような形式でファイルを用意すると定義できます。
Route
Routeとはページまたはハンドラのいずれかまたはその両方を定義したモジュールのことです。
ページ
RouteからPreactコンポーネントをdefault exportすると、対応するパスにアクセスした際にそのコンポーネントがSSRされます。 ハンドラ
後述するカスタムハンドラを定義することで、ページのレンダリング時の挙動のカスタマイズなどが可能です。
ある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を指定する必要があります) プラグイン
アップデート
code:shell
エコシステム
ドキュメント
公式ブログ
関連ページ