Jamstackなサイトとは

このサイトはNext.js + microCMS + Vercelで作っていて、Jamstackなサイト高速だし、個人で使う分にはお金かからないしいいなと思ってますが、深くメリット・デメリットを知らなかったので、改めて調べてみました。

より良いパフォーマンスを提供するウェブサイトとアプリを構築するための最新の方法

https://jamstack.org/
webサイトのまとめサイトに載ってるサイトの技術をchrome拡張機能で見ると、Jamstackなサイトは増えてきてます。
CDNの詳しい仕組みはよく分からんですが、今どきのフロントエンド技術で、高速なサイト作れるというイメージ持っといて、とりあえず何か作ってみるといいと思います

目次

• Jamstackとは
• WordPressなどのCMSとどう違うのか
• データはどうしてるのか
• メリット
• デメリット
• Jamstackでよく使われるサービスや技術
• Jamstackで始めるほぼ0円ブログ生活

Jamstackとは

JavaScript、API、Markupの組み合わせで作るアーキテクチャのこと。JAMはそれぞれの頭文字。
対比としてWordPressなどのCMSを使ったサイトが挙げられます
最初はJavaScript、API、Markupの構成を指していたが、「HTMLを事前にレンダリングしているサイト」や「サーバーサイドとクライアントサイドが分離してるサイト」など定義の範囲は広がっていってるらしい

WordPressなどのCMSとどう違うのか

WordPressのメリットはブログや新着情報など、webサイトに更新する機能を持たせられることです。サイトにアクセスがあった時に、そのURLに応じてデータを取得して、動的にサイトを表示できます。
WordPressで作られたサイトにアクセスした時に画面が表示するまでの流れはこうなっています。

1. サイトへアクセス
2. webサーバーが該当のデータをデータベースから取得
3. 取得したデータをもとにページを構築
4. webサーバーがHTMLを返す

この方式の問題点は

1. webサーバーが必要になるため、サーバーが停止した時にサイトが表示できなくなる
2. 大量のアクセスに弱い。アクセスが集中してサーバーがダウンということも起こり得る。それに備えてに事前にサーバーを増強するなどのコストも必要になってくる
3. セキュリティの懸念。この辺は詳しくないですが、webサイトへの攻撃者はwebサーバーの処理の穴をつくらしいです。

一方、Jamstackではこうなります。データベースがなくHTMLを返すだけなので、表示が高速になります

1. サイトへアクセス
2. CDNがHTMLを返す

CDNについてはこちら（https://developer.mozilla.org/ja/docs/Glossary/CDN）

データはどうしてるのか

じゃあWordPressで表示する動的なコンテンツはどうしてるのかというと、事前にビルドしてHTMLを生成しています。
例えば、新しい記事を書いたり、過去の記事を更新したのをきっかけに、ビルドを開始させて、サイト全体のHTMLを生成しています。

メリット

• 基本的にはNetlifyやVercel、Firebase HostingといったCDN（コンテンツデリバリネットワーク）を使ってデータを返してるので高速になる
  • ビルドしたHTMLを置ければいいので、レンサバでも可能だけど、上記サービスを使った方が恩恵受けられる
• 大量のアクセスに強い
  • CDNにはアクセスが集中したときに自動的に分散する仕組みがある
• フロントとAPIが分離することで技術選定の幅が広がったり、フロント、APIそれぞれ独立して技術の切り替えが可能。
• 事前にビルドしてHTMLをCDNに置いてるだけなので、セキュリティを気にする範囲が限定的になり比較的安全（管理画面はサイトとは全く別のところにある）

デメリット

• クライアントワークでは、理解を得られづらいかもしれない
  • 使い慣れた管理画面のWordPressがいいってなる
• ビルドでどれぐらい時間かかるか読めないので、特定の時間ぴったりに記事を公開しづらい。
  • ページが増えるほどビルド時間が長くなることもあったが、差分がある画面だけをビルドする仕組みもある
• WordPressならプラグインで簡単にできたことを、自分で頑張る必要がある
  • 人気記事の表示とか
• ちょっとしたデザインやサイトの表示設定などの変更をWordPressなら管理画面でできていたことが、必ずエンジニアの手を借りる必要が出てくる
• 記事を書くときのプレビュー機能がない（ただし、後述のHeadless CMSを使うことがほとんどで、これらのサービスはプレビュー機能を提供してるのでデメリットではなくなってきてる）

Jamstackでよく使われるサービスや技術

Headless CMS

JamstackのAPIにあたる部分のサービス。訳すと頭がないCMSで、表示部分以外を提供してくれています。WordPressのように管理画面とデータベースは提供してくれてますが、表示に関しては自分でAPIを取得して表示することになります。
代表的なもの。個人で使うぐらいなら無料で使えるサービスもあります。

• microCMS（日本製）
• Contentful
• Shifter（WordPressをHeadless CMSとして使えるサービス）
• NetlifyCMS

こういったサービスを使わなくても、WordPressをAPIとして使うこともできますし、このNotionをAPIにしてブログを作ったという記事もあります。
サービスを使ったら楽というだけで、APIを返してくれるものならなんでもOK（なはず）。

静的サイトジェネレーター

APIからデータを取得して、HTMLを生成するライブラリです。
代表的なものはこちら

• Next.js（React製）
• Gatsby（React製）
• Nuxt.js（Vue製）
• Gridsome（Vue製）

ホスティングサービス（CDNプロバイダ）

生成したHTMLをweb上で公開するための置き場です。
代表的なものはこちら。これらも個人で無料枠で不自由なく使えます。

• Netlify
• Vercel
• Firebase Hosting

Jamstackで始めるほぼ0円ブログ生活

上記のサービスを使えばほぼ0円でサイトを運用できます。
WordPressでブログを運用する場合は、レンタルサーバー代や、ドメイン代が必要でしたが、ホスティングはNetlifyやVercelを使うと不要になるので、必要なのはドメイン代だけになります。

例
## フロントエンド
Next.js（0円）

## API（ブログ書くところ）
microCMS（0円）

## ホスティング
Vercel（0円）

## ドメイン
ムームードメイン（初年数十円のドメインを買う）

ドメインは取得初年は数十円で、更新以降は1000円ちょいみたいなドメインを使えば、格安でブログや個人サイトを持つことができます。