ヘッドレスCMS、SPA、SSR、SSGについてメモ

Sat, 09 Dec 2023 09:46:03 +0900

最近、「ヘッドレスCMS」というのをよく聞きますが、どういったもので、何が必要なのかを忘れないためにメモ。

ヘッドレスCMSってどんなもの？

ヘッドレスCMSは通常のCMSとは異なり、フロントエンドとバックエンドが完全に切り離されていて、CMSの仕組みにとらわれず開発できます。また、表示速度が速い、CMS機能を後付けできるといったメリットがあります。

Wordpressなど、サーバー側で動的に処理して表示させるものとは違い、動的なページを予め静的なページで吐き出します。静的なサイトの読み込みとなるため表示が高速になるそうです。更にCDNにキャッシュさせて配信すると更に速くなるかも？解釈が違っていたらごめんなさい。

https://bluemonkey.jp/media/column/Headless_CMS https://bluemonkey.jp/media/column/Headless_CMS

その中でおすすめの構成が以下のページに書かれていました。

https://www.synergate.co.jp/blog/headless-wordpress-speed/ https://www.synergate.co.jp/blog/headless-wordpress-speed/

何が必要？

ヘッドレスCMSを制作するには、幾つかの方法と組合せがあるようですが、「ジャムスタック構成」（Jamstack構成）と呼ばれるものが良いみたいです。

https://jamstack-sg.com/ https://jamstack-sg.com/

使用するのは以下の3つが相性がいいとのこと。

SSG（静的サイトジェネレーター）… Gatsby.js
ホスティングサービス … Cloudflare Pages
ヘッドレスCMS … microCMS

Gatsby.jsはReactで作られた静的サイトジェネレーター。

https://qiita.com/manabito76/items/fe91eefe11a74dcf5126 https://qiita.com/manabito76/items/fe91eefe11a74dcf5126

GatsbyよりもAstro.jsかも

以下のページによると、Gatsbyはブラックボックスになりやすいとのこと。まだ、Gatsbyでサイトを作ったことがなく、作り方もチンプンカンプンな私のレベルでは、Gatsbyは敷居が高くて手を出すのに躊躇しています。その次にNext.jsを検討しているのですが、これも使ったことのないReact製フレームワークで、Reactを書かなければならないとなるとちょっと…という感じです。

https://scr.marketing-wizard.biz/utilities/post-wordpress-alternarive-headlesscms https://scr.marketing-wizard.biz/utilities/post-wordpress-alternarive-headlesscms

しかし、Astro.jsならHTML/CSSをそのまま書けば良さそうなので、SSGができて普通に書けばいいとなるとストレスは相当低くなりそうです。

https://astro.build/ https://astro.build/

よって、以下の構成がいいかも？

SSG（静的サイトジェネレーター）… Astro.js
ホスティングサービス … Cloudflare Pages
ヘッドレスCMS … microCMS

その他参考

https://qiita.com/hppRC/items/b22e8426d021938601fd https://qiita.com/hppRC/items/b22e8426d021938601fd

https://www.ragate.co.jp/blog/articles/16888 https://www.ragate.co.jp/blog/articles/16888

ヘッドレスCMS on qwerty.work

ヘッドレスCMS、SPA、SSR、SSGについてメモ

ヘッドレスCMSってどんなもの？

何が必要？

GatsbyよりもAstro.jsかも

その他参考