最近、「ヘッドレスCMS」というのをよく聞きますが、どういったもので、何が必要なのかを忘れないためにメモ。
ヘッドレスCMSってどんなもの？
ヘッドレスCMSは通常のCMSとは異なり、フロントエンドとバックエンドが完全に切り離されていて、CMSの仕組みにとらわれず開発できます。また、表示速度が速い、CMS機能を後付けできるといったメリットがあります。
Wordpressなど、サーバー側で動的に処理して表示させるものとは違い、動的なページを予め静的なページで吐き出します。静的なサイトの読み込みとなるため表示が高速になるそうです。更にCDNにキャッシュさせて配信すると更に速くなるかも？解釈が違っていたらごめんなさい。
その中でおすすめの構成が以下のページに書かれていました。
何が必要？
ヘッドレスCMSを制作するには、幾つかの方法と組合せがあるようですが、「ジャムスタック構成」（Jamstack構成）と呼ばれるものが良いみたいです。
使用するのは以下の3つが相性がいいとのこと。
- SSG（静的サイトジェネレーター）... Gatsby.js
- ホスティングサービス ... Cloudflare Pages
- ヘッドレスCMS ... microCMS
Gatsby.jsはReactで作られた静的サイトジェネレーター。
GatsbyよりもAstro.jsかも
以下のページによると、Gatsbyはブラックボックスになりやすいとのこと。まだ、Gatsbyでサイトを作ったことがなく、作り方もチンプンカンプンな私のレベルでは、Gatsbyは敷居が高くて手を出すのに躊躇しています。その次にNext.jsを検討しているのですが、これも使ったことのないReact製フレームワークで、Reactを書かなければならないとなるとちょっと...という感じです。
しかし、Astro.jsならHTML/CSSをそのまま書けば良さそうなので、SSGができて普通に書けばいいとなるとストレスは相当低くなりそうです。
よって、以下の構成がいいかも？
- SSG（静的サイトジェネレーター）... Astro.js
- ホスティングサービス ... Cloudflare Pages
- ヘッドレスCMS ... microCMS
その他参考