今流行りのJamStackについてまとめておきます。
JamStackの公式サイトが存在します。
Jamstackは、Webをより速く、より安全に、そしてより簡単に拡張できるように設計されたアーキテクチャです。（公式より抜粋）
https://jamstack.org/

JamStackとは

NetlifyのCEOであるMathias Biilmann氏が作った略語らしい！
JavaScript/API/Markup　の頭文字より
JavaScriptでAPIを叩き、静的なMarkupを配信する
動的コンテンツの場合、build時に取得して埋め込む
構築済みの静的ファイルをCDNから直接配置できるのでページ表示速度やレスポンスを向上させることができる。
マーケティング目的などで使用される更新の少ないWebページにおいて、いちいちエンジニアに内容の変更を依頼してHTMLとか書き換えてもらうとかまじ無駄じゃね？みたいなのがなくなります。
実際使用されている例　コロナのページとかも！JamStackの公式のShowcaseより

JamStackで使われるサービスや技術など

ヘッドレスCMS

ビューの存在しないCMS　(Contents Management System)
NetlifyCMSやmicroCMS、Contentfulなど
登録しておいたデータをAPIから取得することができる
ヘッドレスCMSはコンテンツ管理のみに特化したCMS
ということはつまりフロントエンドを自前で作る必要がある

SSG(Static Site Generator)

build時にAPIを叩いてデータを取得して、HTMLを生成しておく
ReactフレームワークではNext.jsやGatsby.js,VueフレームワークではNuxt.jsなど
先にファイルを生成しておくことでサーバーの計算量を減らすことができる
管理画面やDBを必要としないため、外部から侵入されたり操作される心配がない
ということはつまりユーザーによって画面表現が異なるなどの画面更新が多い場合は不向き
下記の例ではgetStaticPropsを使って、SSGのページを生成

以下簡単なサンプルです。

pages/test/index.tsx

import type { NextPage, GetStaticProps } from 'next'
import { client } from '../../libs/client'
import styled from 'styled-components'

interface Props {
  text: string
}

const PageWrapper = styled.div`
padding: 10px;
display: flex;
align-items: center;
flex-flow: column;
`

const TestPage: NextPage<Props> = (props: Props) => {
  return (
    <>
      <PageWrapper>
        <h1>{props.text}</h1>
      </PageWrapper>
    </>
  )
}
export const getStaticProps: GetStaticProps<Props> = async () => {
  const { text } = await client.get({ endpoint: 'test' })
  return {
    props: { text }
  }
}

export default TestPage

下記のページより静的サイトジェネレータのスター数など見ることができます。

ホスティングサービス

インターネットを介してサーバーをレンタルするサービス
例として、VercelやNetlifyなど
以下の最小単位のJamStackではVercel使ってます。vercelは商用利用はダメらしいですが無料でそこそこ使えます

最小単位のJamStack

microCMS/next.js/vercel　を使ったWebページ
こちら私個人のページです。
id: admin pin: 2222　で入れます。

どうやらユーザーは待つことにストレスを感じる生き物らいしい

JamStackで高速なWebページがなぜ主流になっているのかでいくと、ユーザーがページの表示を待つことに対して途轍もないストレスを感じているからっぽいですね

この記事とかどうやら画面の表示速度がコンバージョンとかに影響を及ぼしているっぽい！

なので、今後UXとか考える上でもこの辺りのサービスやフレームワークもますます盛り上がりを見せていくのでは？と期待が膨らみますね😁

参考