2022-12-22

Craft CMS でのブログは Twig テンプレートに Blitz プラグインでよさそう

これは Craft CMS Advent Calendar 2022 22日目の記事です。


先日書いた Astro とか Jamstack な構成とかは盛り上がってる感じがするし、CMSはインストール型だけじゃなくて、サービス型や Headless なのもはやってて選択肢が増えていいことだと思う。
何を採用するかはゴールだったり、体制だったり、判断基準は色々。

個人的にはCMSとの出会いが Movable Type からの始まりだし、 PowerCMS とか静的CMSを中心に使ってきたこともあり、静的に出力したいという事を考えることがなんとなく多い。

なので、CDNとかキャッシュの話とか、静的に出力する話とかは気になるところである。

動的コンテツをエッジのKVにキャッシュする - ゆーすけべー日記
https://yusukebe.com/posts/202...

Craft CMS にも以前は静的出力するプラグインもあったが、最近は Blitz を使うことでそういった希望はほぼほぼ解決出来る気がする。

事前にキャッシュを作っておくこともできるし、必要ならCDNを前段に置けばいいだろうし。
生成されたキャッシュファイルを Git 連携してデプロイするとかもできる。

Remote Deployment
https://putyourlightson.com/pl...

静的CMSのありがたみを感じつつ、再構築っていうかたちで丸っと解決しているといえばそれまででもあるが。


今のブログは Remix と Cloudflare Workers (KV) という構成でやっている。
これはこれで全然不満はないのだけど、 CMS 標準の Twig テンプレートベースで作ってそれをあれこれやる方がいいんだろうなぁと思っているところはある。
完全に慣れの問題だとは思う。

Cloudflare Workers の Cache API で ETag 使えばキャッシュの作成、更新もしやすいのかなー、と思ったけど、若干制限があるというのが気にはなった。

Next.jsのISRを独自に構築する ~ Cloudflare Workers編(Cache APIの注意点) ~
https://zenn.dev/chimame/artic...

だったら、普通にCDNにのせておく方が楽かもしれないし、とりあえずこっち側で頑張るのでも良さそう、といった感じで。

キャッシュは作るよりも削除するときとか、更新したコンテンツの影響対象がどこか?で削除する範囲は変わってくるわけで、その辺の制御をどうやるのがスムーズにいくのかな、というところで ETag 的な方法を考えたが、、、、

このブログのデータを元にしてテンプレートは Twig にして Blitz を通したサイトサンプルを作ったが、パフォーマンスに問題は特段感じなかった。
キャッシュの更新周りは Blitz がよしなに見てくれるし、必要に応じて拡張すれば良さそう。

Blitz の開発元もこんな感じのパフォーマンステストの記事を公開してくれている。

Performance Testing Craft CMS with Blitz
https://putyourlightson.com/ar...

Craft を使うときにそれなりのパフォーマンスを維持しておくのであれば、 Blitz の利用はほぼほぼデフォルトって考えておく方がいいんだろうなぁ。
ライセンス費用がかかるとはいえ。

ということで、冬休みに Twig のテンプレートに戻そう。
Headless な構成とかはこれからも使われていくのでそれはそれとして触っていくだろうし、また実験台が必要になったらここを作り直そう。

Blitz 4.3.0 で開発中の Server Side Includes (SSI) , Edge Side Includes (ESI) ってどういうことなんだろうなぁ

craft-blitz/CHANGELOG.md at 4.3.0 · putyourlightson/craft-blitz
https://github.com/putyourligh...

これも登場が楽しみだ。


Twig ベースでやるときはローカルの開発環境がある方が便利。

DDEV を使って Craft CMS のローカル開発環境を構築する | Craft CMS | かたつむりくんのWWW
https://tinybeans.net/blog/202...

開発環境を作るのは DDEV を使うことでだいぶ楽にはできるけど、その辺は Headless な構成を元に作る方が楽なのかもしれない。
Clone して npm i してあれこれとかとか。

これも普段ローカルの開発環境準備をあまりやらないから慣れの問題なきもする。
先日 @tinybeans がローカル環境用のデータ含めて準備してくれたときはリポジトリ clone して数コマンドでローカルの環境がすぐできた訳だし。

Git とテンプレート周りをちゃんと同期するようにさえすれば特に困らないはず。
それをやってないから色々面倒に感じるだけだと思われる。