ServestとDenoでNext.jsっぽいことをやっている話
サイト生成ツールとかは使っていなくて、Denoだけでできている
デプロイスタック
CI: Github Actions
マスターにマージされたらHerokuにデプロイ。無料
Runtime: Docker
debianベースのイメージで動かしている
PaaS: Heroku
Dockerでデプロイ。heroku.ymlは数行。$7/month
CDN + TLS: CloudFlare
ドメインのAレコードをCloudflareに登録。キャッシュされてたりする。無料
コンテンツはどうやって管理？
jsxファイルをページとして管理している
https://gyazo.com/612449e26aa73614b074249d2ddce3c8
agent-api.tsx -> /agent-api としてサーブされる
next.jsっぽい（本家はあんま使ったことない）
どういうファイル？
どうやってやってる？
code:ts
app.use(serveJsx(resolve("./pages"), (f) => import(f), Layout));
serveJsx()というミドルウェアを使う
第2引数で解決されたjsxファイルを動的インポートさせる（理由は後述）
第3引数はラップするコンポーネント（なければReact.Fragmentになる)
Pros
JSXをテンプレートとして使える
コンポーネント使い回せる。型安全。
ファイルが増えるたびにルートを追加しなくてもいい
Cons
やっぱり裏技感が否めない（動的インポート）
Next.jsと違ってクライアントサイドのhydrationができない（Webpackがないので）
現状サーバーサイドだけの機能
クライアントjsがReactで書けない…😥
開発の辛さ
node-devみたいなものがないので自分で書いてる
fs.watch -> プロセス再起動。エレガントさがない…
jsxの変更なら本当は再起動の必要はない
ただDenoが一度動的importしたモジュールは起動中キャッシュされ続けるっぽい
これをinvalidateする方法誰か知りませんか？
動的テンプレートとしては便利だがマークアップのときにすごい不便