今流行りの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とか考える上でもこの辺りのサービスやフレームワークもますます盛り上がりを見せていくのでは？と期待が膨らみますね😁
参考