Cloudflare Pages Functionで型安全なHTMLテンプレートとしてTSXを使う

デモンストレーション

以下のWebサイトを開いてみてください。かくページはリクエストの都度サーバーサイドでレンダリングされます。

https://contoso-japan.pages.dev

GitHubリポジトリ

https://github.com/moutend/rendering-tsx-files-on-cloudflare-pages-function

モチベーション

• 事前にレンダリングして静的HTMLとして配信するのではなく、リクエストの都度動的にサーバーサイドでHTMLをレンダリングしたい。
• Cloudflare Pages Functionに組み込まれているルーティング機能を活用したい。
• UIコンポーネントは再利用したい。
• 型の恩恵を受けたい。

実現方法

Nano JSXを利用してPages Function上でTSXをレンダリングするアプローチで実装しています。MPAでSSRなので、実質PHPです。

HonoのJSXレンダラーでよくない？

記事を書いている最中に気がつきました。HonoはサーバーサイドでJSXをレンダリングできます。Nano JSXの方が若干バンドルサイズが小さいですが、どちらも外部依存なしの超軽量ライブラリですので、Honoで良いかと思います。

HTMLRewriterではダメなのか？

テンプレートエンジンとしての側面もありますが、HTMLRewriterはRewriterの名前のとおりコンテンツの一部を差し替えるのに最も威力を発揮します。Cloudflare公式ドキュメントにあるWebサイトの翻訳機能がその一例です。

HTMLRewriterはJSX / TSXと異なり、基本的には文字列の加工を行うだけなので、意図せずUIを壊す恐れもあります。UIコンポーネントを組み合わせてページを構築するのには不向きかと思います。

（余談）Pages Functionバンドルサイズの確認方法

Pages Functionsのバンドルサイズは以下のコマンドで確認できます。^[1]

$ npx wrangler pages functions build --outdir dist
$ du -h dist

脚注

1. https://community.cloudflare.com/t/how-to-debug-function-script-over-the-1-mib-size-limit/662008/3