Jamstackの特徴とメリットデメリット

Jamstackとは、動的コンテンツをサーバーを介さずにWebサイトに表示させる仕組みのことです。フロントエンドとサーバーが完全に分離した状態であることが特徴です。

2020年頃から国内のWeb制作界隈で流行していて、弊社では先日リニューアルした自社サイトに導入しています。

Jamstack導入に際して調べた概要や、メリットデメリットをまとめていきます。

Jamstack導入についてのお問い合わせはこちらから

Jamstackの仕組み

これまでのWebサイトの動的コンテンツは、ユーザーがサイトにアクセスしたタイミングで、サーバーからデータベースへと通信を行い取得してきたものをHTMLで表示していました。 一方、Jamstackサイトは事前に動的データを取得し埋め込んだ静的HTMLとjavascriptベースで構成されています。

つまり、フロントエンドとサーバーが完全に分離している状態とは、サイトの表示とデータの取得を別々に行っているということです。

Jamstack構築を助けるサービス

Jamstackでは、「動的データの管理」「動的データの取得・HTMLの生成」「生成したHTMLの設置」それぞれの工程でよく利用されるサービスがあります。

ヘッドレスCMS

動的データの管理を行い、APIベースで配信するCMSです。プランによっては無料で利用できるものもあります。 ヘッドレスとは、表示するフロントエンドの機能を持たないということで、言い換えればこちらで用意した媒体で自由に表示させられるということです。

SSG(静的サイトジェネレーター)

SSG(静的サイトジェネレーター)とは、Javasctiptを利用して動的コンテンツを取得し、それを埋め込んだ静的HTMLを作成する仕組みです。ヘッドレスCMSの発行するAPI情報を取得します。

CDN（コンテンツ・デリバリー・ネットワーク）

SSGで作成した静的HTMLサイトを設置する場所です。CDNを提供しているサービスには、Jamstackに特化した機能があるものや、SSGが組み込まれているものもあります。

メリット

サイト表示速度が速い

従来の動的Webサイトで大量のコンテンツを取得して表示しようとすると、サーバーサイドでの通信量が増えて速度低下につながっていました。 Jamstackは、事前に取得し埋め込んだデータを静的HTMLで配信するので、大量のコンテンツも速く表示することができます。

フロントエンドからサーバーへの窓口が隠れる

サーバー通信のプログラムをフロントエンドで行うと、サイト上からサーバーへの窓口が存在することになります。Jamstackはそこに生じる脆弱性や、そのためのセキュリティ保守に当てるリソースを減らすことができます。

CDNで配信できる

前述したCDN（コンテンツ・デリバリー・ネットワーク）とは、コンテンツを置いているサーバーのコピーを各地域にあるキャッシュサーバーに設置し、ユーザーに近いキャッシュサーバーから配信する仕組みです。距離が近いほどレスポンスが早くなります。 また、大量アクセスの際も、本体サーバーの方に負荷がかかるのを防ぐことができます。

Jamstackは静的HTMLとJavascriptベースのシンプルな構造なので、簡単にCDNを導入できます。

デメリット

ユーザー管理ができない

ユーザーごとにコンテンツを出し分ける実装は、ビルド時の負荷が大きくなるため推奨されません。

サーバーサイドのスクリプト言語が使用できない

例えば、PHPを使ったメールフォーム（お問い合わせフォームなど）を今まで利用していた場合、それらを利用できなくなります。CDN側で用意されているフォーム機能を使用するか、外部フォームサービスを利用することになります。

運用にある程度知識が必要

動的部分はCSMのリッチエディタで直感的な更新が可能ですが、静的HTMLの更新や埋め込まれる動的データの出力カスタマイズなどには知識が必要です。
弊社の場合、静的HTMLの生成・更新はNuxt.jsというVueベースのJavascriptフレームワークを、それらの反映にはFTPに代わってGithubを使用しています。

このように、従来のWebサイト構築でHTMLやFTPに慣れ親しんだ人でも、さらに技術的な知識が必要になる場合があります。

具体的なコストについて

各サービスは無料で使用できるものもありますが、サイト規模によってはある程度コストがかかります。目安として、弊社がJamstackで使用しているサービスのプランを紹介します。

ヘッドレスCMS「microCMS」

運用自体はHobbyプラン（無料版プラン）で十分可能ですが、大きく変わるのが「API数」です。Hobbyプランでは３つまで登録できます。
プランをアップグレードしてAPIを増やせば、前述したデメリットである静的HTML部分の運用コストを削減できます。
例えば、「メインビジュアル」というAPIで、サイトのメインビジュアル画像やコピー文言をカスタムフィールドで管理すれば、社内のエンジニア以外の人でも簡単に更新することができます。

microCMS公式サイトの詳しい比較

ホスティングサービス「Cloudflare Pages」

こちらも無料版プランが充実しているサービスです。月のビルド数に制限がある程度で、サイトのリクエスト数にも上限がありません。
より高度な開発環境を要さない限り、Pages Freeプランで十分運用できます。

CloudFlare Pages公式サイトの詳しい比較

どんなサイトに向いているか

オウンドメディアサイト、コーポレートサイト、ポートフォリオサイトなど、事前に表示する内容が決まっているサイトに向いていると言えます。 逆に、会員制サイトやECサイト、Twitterのようなユーザーによって表示内容を変える必要があるアプリケーションには向かないでしょう。

まとめ

JamstackはモダンなWeb構築の仕組みと言われていますが、体系化するための仕組みやサービスも増えていて、導入のハードルは低くなっています。 いずれは主流なWebサイト制作技術の一つになると思うので、理解を深めておくことが必要だと感じました。