ヘッドレス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つが相性がいいとのこと。

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

脱wordpressのための代替ノーコードツール・ヘッドレスcms

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

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

Link

Astro

https://astro.build/

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

その他参考

Link

Gatsbyの超高速テンプレート(pwa, Mdx, Typescript対応)を作ったヨ! #react - Qiita

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

Link

「Next Js Vs Gatsby をreactエンジニアが語ります🤔 最適なreact フレームワークを選択しましょう🚀」低コストなモダナイズ開発の実践 | Ragate

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

PAGETOP