Flareactについてのメモを雑に残していく。たぶん後で記事にする。

https://flareact.com/

• Flareactとは
  • "edge-rendered React framework built for Cloudflare Workers."
  • Cloudflare Workersで動くReactフレームワーク
  • Next.jsにインスパイアされて作られたらしくAPIも似ているとのこと
  • SSRできる

超良さそう

Example見たらかなりNext.jsに近い。

https://github.com/flareact/flareact/tree/canary/examples/with-typescript

Next.jsを使っている人は学習コストが小さそう。ちなみにflareact.com自体がFlareactで構築されているらしい（ソースコード）。

Flareactに興味を持った大きな理由は、ZennのURLをリッチなカードに変換する機能とかなり相性が良さそうだったので。

• 今はCloud Functionsで動かしているが、パフォーマンス面に難がありカードが表示されるまでに時間がかかってしまうことがある。
  • 特にコールドスタートにより数秒空白となってしまうのは避けたい。
• 今は手軽に実装したかったという理由からEJSを使っている。ただ「GitHubリポジトリのURLの場合にはStar数も表示する」のような表示の出し分けをするうえでEJSでは厳しくなってきた。
  • Flareactはその点ちょうど良さそう。

ZennのURLをカード化するやつ、うまいこと動いたらGitHubで公開したい

セットアップ

ドキュメントの通りにやる

https://flareact.com/docs/getting-started#quickstart

yarn devを実行すると以下のエラーが発生した。

[worker] 🌀  Using namespace for Workers Site "__flareact-workers_sites_assets_preview"
[worker] Error: No such file or directory (os error 2)

色々と試行錯誤したところwrangler.tomlに問題があった模様。公式のExampleを参考に設定していたのだが[site]の部分が不要だった模様。

  name = "flareact"
  type = "webpack"
  account_id = "foo"
  workers_dev = true
  webpack_config = "node_modules/flareact/webpack"

- [site]
- bucket = "out"
- entry-point = "./"

気を取り直してyarn devすると立ち上がった

$ yarn dev
👂  Listening on http://127.0.0.1:8787
[worker] 🌀  Detected changes...

うーん、色々とエラーが多発するな。ドキュメントにはBuilt-in CSS Supportと書いてあるが、その通りにやってもエラーが出る。

TypeError: this.getOptions is not a function

2021/02/28時点だとnpmのweekly downloadも400弱という感じで、メンテナンスもあまり活発にされていなようなので一旦保留する。また数カ月後に試したい。