Jamstack Conf2020のアーカイブ動画を見たり、無料eBook O’Reilly eBook: Modern Web Development on the JAMstackを読んでみたりました。 このブログでもJAMstack関連の記事を何回か書いていますが、JAMstackとは新しいWebアプリのアーキテクチャ？なのかなと思うようになりました。
Webアプリのアーキテクチャの変化
Webアプリのアーキテクチャの変化をまとめてみました。
古き良きWebアプリ
2000年代初頭に日本でも色々なWebアプリ（Webサービス）が登場しました。これのほとんどは、ブラウザーからのリクエストでサーバー上の（PerlやJavaで書かれた）アプリが応答しデータベース等がらデータを読み出し、データを処理し、その結果でHTMLを組み立てブラウザーに戻していました。
この時代のブラウザーはすでにJavaScriptが実装されていましたが、ブラウザー毎の互換性の低や開発者・利用者に良い印象を与えて無く、あまり使われていませんでした。
Ajax
2005年〜2009年にGmailやGoogleマップなどのJavaScriptを使ったWebアプリ（Webサービス）が登場し。JavaScriptを使ったWebアプリの使い勝手の良さからJavaScriptを使ったWebアプリが急速に広まって行きました、Ajaxブームの始まりです。
この時代のAjaxではサーバーから送信されるのデータではなく表示されるHTML（の一部）でした、HTMLの組み立てはサーバー側で行っていたのです。
Ajax + Cache
2010年代になると、ブログブームやTwitter, Factbook, YouTubeなどのサービスも始まり、PCでネット（Webサービス）を使う人が増えサーバーの処理能力が問題になり始めました（AWSは誕生していましたが、まだクラウドは広まってはいませんでした）。
そこで、MemcachedやRedisなどの高速のメモリーデータストアに処理済みデータやHTMLの一部を格納し、別のリクエストでも再利用する事で処理能力を上げる事ができるようになりました。
現在でも、このアーキテクチャのWebアプリ（Webサービス）は多と思います。
SPA
現在もよく使われているAjax型のサービスには以下のような欠点があります。
- 大部分の国民がスマフォを持つ時代になり、アクセスが集中すると処理能力不足が問題になりました
- Ajaxではサーバー側でも、ブラウザー側でもHTML(DOM)を作成・変更するので処理分担をかなり上手く行い、徹底しないとカオスなアプリになってしまい生産性・メンテナンス性が下がる
そこで、Angular, React, VueなどのSPA(Single Page Application)ライブラリー・フレームワークが登場しました。SPAではHTML(DOM)を作成・変更はすべてブラウザー上で行います。
- サーバー側はデータや処理を提供するAPIサーバーで良く、構成がシンプルになる
- サーバーがシンプルになるので従来のRuby,PHPではなく、高速なGo言語などが使えるようになる
SPA + SSR
しかしSPAにも欠点があります。
- 最初に大きなJavaScriptファイルを読み込む必要がありロードに時間がかかる、また初期化処理などでもあり、アプリが使えるまでの待ち時間ある
- 検索サイトのクローラー（情報収集プログラム）のJavaScriptサポートが弱くSEO的に不利
SEOに付いてはReact等で作ったサイトの最新SEO情報を知ったに書きましたが、以前と異なりクローラーはJavaScriptをサポートしているので最悪ではありませんが、いぜん不利だと思われます。
これらの問題を解決するのがSSR(Server Side Rendering)です。node.jsとSSR用のフレームワーク（例 Next.js）を使いサーバー上でSPAアプリを動かしHTMLを生成しておき、初期期アクセス時はそのHTMLを表示します。その後にSPAをブラウザー上で動かします。
Jamstack
やっとJamstack(JavaScript + APIs + Markup)に来ました、JamstackはSPA + SSRを発展させものです。
- Webアプリ（Webサービス）で表示されるHTMLはデータベースのデータを元に作られますが、ECサイトの商品情報のようにリアルタイムで生成しなくても良いものは適宜サーバー上でHTML(CSS,image)に変換してしまい、リクエストに対しHTMLを戻します
- そのHTML作成部分はReact等のSPAをサーバー上で動かします
- リアルタイムで作成・変更すべき情報のみ小規模なJavaScriptアプリを配信しておき、それをブラウザー上で動かす
- JavaScriptアプリ向けにはSPAと同じAPIサーバを使う
Modern Web Development on the JAMstackに書いてある実例では、小規模なJavaScriptアプリはReactではなく、React互換の軽量ライブラリーPreactを使ったそうです。これは良いアイデアですね！
Jamstack + CDN
Jamstackではスタティックのコンテンツ配信が増えるので、CDN(Content Delivery Network)の効果が絶大です。
もし、あなたがCDNとは大規模な多国籍企業が使うような高価なサービスだと思っているようなら（実は最近まで私もそう思っていました）最近のCDNを調べてみてください。低いコストで柔軟な配信ができるようになっています。
まとめ
このようにJamstackは高速で、大量アクセスにも耐えるサイトを構築できる、新しいアーキテクチャだとわかります。
大部分の大人や中高生がスマフォを持つ時代になり、Webへのアクセスは増大しました。またTwitter（SNS）で情報が拡散され、普段とは比べようのないアクセスが発生することもあります。これからのWebアプリ（Webサービス）はこれらのアクセスに対応できる必要性が高まると思います。
