モダンなWeb界隈調査【SSG・JAMStack】

あらすじ

前回この記事を書きました。ただ懸念点が一つ・・・2010年。古すぎじゃい!
やっぱり本で勉強するよりネットサーフィンの方がええわ!
分からない単語が出てきたら深堀って調べていこうと思います。
melheaven.hatenadiary.jp

2021年現在モダンとされている技術は何かを調べてみました。
この方が超分かりやすくまとめてくださっていたので、この技術を軸に挑戦できれば自作ブログでも夏季休暇中に作ろうと思います。
coliss.com

フレームワーク

「Vue vs React」の二強。半年前にVueでポートフォーリオを開発したっきり触れていません。でもこの構図は半年前から変わってはいませんね。

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

知らん・・・・。下の記事がヒット。
fastcoding.jp

WordpressではCMSが採用されています。Webサイトのコンテンツ情報をDBにて一元管理します。DBから情報を取得して、サーバーが情報を含んだHTMLを生成することが一般的です。

SSGではビルド時に全てのHTMLを書き出してしまい、生成されたファイルをホスティングサービスで公開する方法です。
ちなみにNetlifyではサーバー管理を考えなくとも、トリガー後にただただコードを実行してくれるサーバーレスで公開するには相性が良いです。

DB・管理画面が必要としないのなら、セキュリティ的にはリスクは低いでしょうし、サイトの高速化につながるのでSEOには良いかも!

JAMstack(JavaScript/APIs/Markup)

知らん・・・・。下の記事がヒット。
qiita.com

上記の記事ではSPA(Single Page Application)とサーバーレスとの比較がなされていました。おさらいですが、SPAでは単一のページでコンテンツの切り替えを行うことでページ遷移しなくてもいいやん!速い!を実現できるシステムです。

JAMstackではサーバー側から静的HTMLの配信だけを行うようです。

でもそれじゃあ静的ページでしか扱えないんとちゃうの?と思ったのですが・・・(SSGっぽいよな)

monotein.com

ビルドのタイミングでAPIからデータを取得して、HTMLを生成します。

でもそれじゃあデータの更新が反映されないのでは・・・(ビルドってデプロイの時しかしないやろ)

データ更新時にビルド・デプロイを行なって最新状態を保つそうです。

例えば私がブログ記事を投稿した瞬間、サーバーレスのトリガー機能が発火し、ビルド・デプロイを行い、
最新コンテンツをAPIで取得したHTMLを生成してくれるわけです。

ビルド・デプロイを何度も行うって凄い大変そうに聞こえるのですが・・・(なんか重そう/ 小並感)

CI/CDでテスト・ビルド・デプロイが自動化が当たり前なので大丈夫!
qiita.com

感想

上記の記事はコンテンツが文字ベースのブログ投稿サービスにはうってつけ、静的サイトジェネレータとしてVueベースならNuxt、ReactベースならGatsbyなどが使えそうです。ホスティングサービスも静的HTMLを配信できるNetlifyなどが相性良さげですね。

自作ブログを製作したいので、これらの技術をもう少し調べていこうと思います。