1.Jamstackとは
Jamstackとは
- https://jamstack.org/
- JamstackのJAMはJavaScript/APIs/Markupの頭文字です
- JavascriptでAPIをたたいてMarkupを配信することを意味しています
- Jamstackの特徴はパフォーマンスとセキュリティが良いWebアプリケーションを作成できるというところです
Jamstackの特徴
一般的なWebアプリとの比較
- Jamstackの特徴を語る上で一般的なWebアプリと比較して説明します
よくあるWebアプリの場合
- よくあるWebアプリはこんな感じです
- サーバがDBから取得したデータをHTMLに埋め込んでユーザに返却します
SPAの場合
- SPAだとこんな感じ
- HTMLやJavaScriptなどの静的なファイルを取得して、その後JavaScriptによる非同期通信でサーバからデータを取得します
- 共通してることはユーザがサーバにアクセスして、サーバがDBからデータを取得してそれを返却し画面に表示するというところです
- 当然ですがDBにアクセスする分処理に時間がかかったり、サーバの死活監視など運用面の考慮も必要になってきます
Jamstackの場合
- Jamstackの場合はこうなります
- ユーザがサーバにアクセスしてコンテンツを取得し表示するだけです
- Jamstackは静的なコンテンツを配信するだけなので高速です
- 静的なコンテンツだけなのでCDNから配信することで最適化を図れます
- これが高パフォーマンスの理由です
- 更に静的なコンテンツの配信しかしないためサーバの管理なども不要となりセキュリティ面での考慮事項もぐっと軽減するわけです
動的なデータの取得
- 静的なコンテンツを取得するだけということはJamstackは動的なコンテンツは扱えないということでしょうか？そんなことはありません
- Jamstackではデータはビルド時に取得します
- さっき出てきた図にビルド/デプロイのフローが追加されました
- JamstackはビルドしてHTMLを生成する時にAPIからデータを取得して埋め込むという仕組みになっています
- こうすることでDBに保存してある情報も表示できるわけですね
- ただ、当たり前ですがデータが更新されてもHTMLは古いままなので新しい情報にアクセスできません
- そのためJamstackではデータが更新されたタイミングで都度ビルド/デプロイを行うことで最新の状態を維持します
Jamstackでよく使われるサービス
- Jamstackを実現するための要素として以下のようなサービスが使われることが多いです
- 静的サイトジェネレーター
- ヘッドレスCMS
- ホスティングサービス
静的サイトジェネレーター
- Static Site Generatorの略でSSGと呼ばれることも多いです
- Jamstackの最大の特徴である、ビルド時にAPIからデータを取得しデータを埋め込んだHTMLを生成するという部分を担います
- 今回のハンズオンではNext.jsを使います
ヘッドレスCMS
- ヘッドレスCMSはデータを管理しAPIとして公開することができるサービスです
- ハンズオンの中ではブログ記事をヘッドレスCMSに投稿してそのデータをAPIとして公開します
- 今回のハンズオンではmicroCMSを使います
ホスティングサービス
- JamstackではHTMLやJavaScriptなどの静的なファイルを配信します
- 生成したコンテンツをホスティングサービスにデプロイし公開することでWebページへアクセスできるようになります
- 今回のハンズオンではnowを使います
まとめ
- Jamstackの特徴にして強みであるところは静的コンテンツを配信するだけでよいというところです
- ビルド時にデータを取得し埋め込むことで外部データを取り込み可能にし、データ更新の都度ビルドデプロイすることで最新の状態を保つことができます
- ユーザとの接点が静的コンテンツへのアクセスだけになるためパフォーマンスの高速化やセキュリティ面のリスク軽減につながるというわけです
- これらを実現するためのサービスやライブラリもラインナップが揃っていることもありJamstackが流行っているということですね
次へ
- 次の章からJamstackを実現するためのフレームワークやサービスを使って実際にアプリケーションを作ってみます
- 手順通りに進めれば動くものはできると思うので、細かいところは各自で調べてみてください