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

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

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

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

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

Link

Web制作の新しい潮流「ヘッドレスcms」とは？主要ツールの比較も併せてご紹介｜Cms「Blue Monkey」

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

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

Link

ヘッドレスcmsとWordpressのGtmetrixによる表示速度比較｜ブログ｜シナゲート株式会社

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

何が必要？

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

Link

ヘッドレスcms 制作・構築特設サイト - シナゲート株式会社

https://jamstack-sg.com/

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

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

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

Link

【図解】spa、Ssr、Ssgの違いについて #ssr - Qiita

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

GatsbyよりもAstro.jsかも

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

Link