ヘッドレスCMS（Headless CMS）とは何かの記事で紹介した、ヘッドレスCMSを使った具体例としてホームページの構成例を紹介します。

Webサイトの構成

構成概要

今回ヘッドレスCMSはmicroCMS、Webサーバーは今回の構成と相性の良いVercelを採用しています。

キャッシュとは何か

キャッシュとは、ユーザーがホームページを閲覧した際に、そのページを一時的に保存する機能のことです。キャッシュするメリットは、ユーザーが同じページに再度アクセスする際に、ヘッドレスCMSからデータを再ダウンロードする必要がなくなるため、その分ページの表示速度が速いです。

構成を説明するにあたって、まず簡単に用語を説明しました。

設計の特徴

今回は製作事例①とは違う方法で、従来のCMSと比べた画面表示の高速化を目指しました。

先ほど説明したキャッシュ機能を活用します。

キャッシュがある場合の動作

基本的な動作として、①ユーザーがホームページにアクセスすると、②サーバーにキャッシュされた（データ取得済み）ページをユーザーに返すため、高速に画面表示できます。

キャッシュがない場合の動作

キャッシュがない状態で、①初めて誰かがホームページにアクセスした時は、②③でヘッドレスCMSからデータを取得し、⑤ユーザーにページを返します。

その時に、④データを取得してページに埋め込んだファイルをサーバー上にキャッシュしておくことで、次回誰かがホームページにアクセスした時には、キャッシュがある場合の動作になり、画面表示が高速になります。（次回アクセス事は、②③のデータ取得が不要になる）

ブログ記事を更新した時のホームページ更新の仕組み

ページをキャッシュさせる注意点としては、キャッシュの仕組み上、そのままだと古いページが表示されることがあることです。例えば、microCMSでブログ記事を更新した後も、Webサーバーにキャッシュが残っていると、ブログ記事を更新する前の古いデータがそのまま画面表示されます。

今回の構成での対策としては、microCMSでブログ記事を更新したタイミングで、ホームページのキャッシュを削除することで、この問題を解決します。

下記図の流れで、更新したページだけキャッシュを削除します。

ブログ記事を更新したページだけキャッシュ削除したことで、次回ホームページにアクセスする時、

①更新したページにアクセスする場合はキャッシュがない場合の動作になるため従来のCMSと同様の表示速度になり、②それ以外の更新していないページにアクセスする場合には、キャッシュが残っているので、画面表示が速いままです。

製作事例①との大きな違いについて

リアルタイム性と高速化を両立している

製作事例①では、ブログを更新した場合、ホームページに更新内容が反映されるまでに数分のタイムラグがありましたが、今回の構成ではタイムラグがありません。

今回の構成では、誰かの初回アクセスのみ、ヘッドレスCMSからのデータ取得が発生するため、従来のCMSと同等の表示速度になりますが、リアルタイム性を犠牲にしません。

言い換えると、制作事例①の構成が、高速化100点、リアルタイム性0点に対し、今回の構成は、高速化90点、リアルタイム性99点です。（リアルタイム性が100点ではない理由は、ブログ記事更新とキャッシュ削除が、完全に同時ではないためです。ほぼ同時なので通常は気にならない程度です。）

ベストプラクティス

今回の構成がヘッドレスCMSでホームページを制作する場合の現時点でのベストプラクティス（最善手段）だと考えています。

ヘッドレスCMSとして、他のCMSを採用したり、Webサーバーを別のものにすることはできます。

まとめ

こちらの記事で紹介したヘッドレスCMSのメリットの1つ「 ホームページの見た目部分を自由に開発できる」について、具体例をまた1つ紹介しました。

Web技術は日進月歩で進化していくので、最新技術を理解した上で、個別最適な提案ができるように、引き続きホームページの作り方を研究していきます。

ホームページ制作についてのご相談は、お問い合わせフォームからご相談ください。