エッジサーバーレスとは？

Jamstackではビルドで事前に静的コンテンツ（HTML、CSS、JavaScript）を生成しておきます。これがJamstackが高速なサイトが作れると言われる所以です。

ところが、Jamstackで作れば常に高速というわけではありません。要件や対処したい問題によっては、サーバー側で事前に処理したほうが適している場合もあります。たとえば、次のようなケースです。

ユーザーに応じたコンテンツの出し分け
書き換えが頻繁に起こる最新情報の表示
ページ表示後のローディングに時間がかかる
ページ表示後に画面のレイアウトシフトを起こす

これらの処理は静的コンテンツとページ表示後のJavaScriptでの書き換えを行うより、サーバー側で処理したほうがユーザーにストレスを与えにくいサイトを提供できます。

サーバー側での処理が適している場面でピクセルグリッドが積極的に採用しているのが、静的コンテンツを配信するCDNエッジでJavaScriptを実行できるエッジサーバーレスという仕組みです。

エッジサーバーレスを提供するサービス

近年、静的コンテンツを配信するだけではなく、パフォーマンスに優れ、メンテナンスコストの低いエッジサーバーレスを提供する環境が整ってきています。具体的には次のようなサービスです。

ピクセルグリッドは、エッジサーバーレスを利用したWeb開発に力を入れています。とくにこの中でもCloudflare Pages Functions / Workersを利用した開発を得意としています。

特長

エッジサーバーレスを利用することで、パフォーマンスやスケーラビリティを維持しつつ、高度なWebアプリを構築できます。また、JamstackのAPIにエッジサーバーレスを利用することで、APIのスケーラビリティを維持できます。

パフォーマンス

世界中に分散されたCDNエッジで実行されるため、ユーザーに近い場所で実行され、レスポンスが速く、パフォーマンスが高いのが特徴です。また、サーバーレスで有名なAWS Lambdaと比べ、コールドスタートに悩まされず、レスポンスが安定しています。

スケーラビリティ

エッジサーバーレスはアクセスに応じてCDNエッジで分散されて実行されるため、アクセスが増えてもレスポンスが遅くなりません。また、突然のアクセス急増にも強く、可用性が高くなります。

メンテナンス

エッジサーバーレスは、OSのアップデートや、物理的な機械の故障対策など、メンテナンスが大変なサーバーを必要とせず、サーバーレスで動作します。

利用場面

ピクセルグリッドでは、次のような場面でエッジサーバーレスを利用します。

WebフレームワークのSSR

Astro、Next.jsといったWebフレームワークでは、このエッジサーバーレスを利用してHTMLをレンダリングする仕組みが備わっています。
これにより静的なHTMLだけではできなかった、最新の情報の提供やユーザーに応じたコンテンツの変更が可能です。

高速でスケールするAPI

Jamstackで構築する際に、独自のAPIを用意することがあります。
どんなにスケールするJamstackであったとしても、APIがスケールする仕組みでなければ、ローディングが長く、遅いサイトになります。
APIをエッジサーバーレスでつくることで、スクリプト実行部分も同様にスケールする仕組みで構築できます。

簡易スクリプト

エッジサーバーレスは毎日の定期実行など、簡易なスクリプトを実行するのも得意です。たとえば、特定のAPIから定期的に最新情報を取得したり、定期的にサイトをビルドして更新したりできます。

エッジサーバーレスが苦手なこと

エッジサーバーレスは重たい処理に向きません。そのため、計算量が多い処理は、事前にビルドしてデータを用意しておくなどの工夫が必要になります。

実行環境はNode.jsではないJavaScriptランタイムなので、すべてのNode.js向けのライブラリが使えないという制限があります。また、JavaScript以外の他の言語で書かれたライブラリはWASMで実行する必要があります。

そのほか、CDNエッジで分散される関係上、対応していないデータベースへは常時接続できません。 APIベースでアクセスできるデータベースやサービスを選定するか、少量のデータであれば、Cloudflare Workers KVなどの簡易なkey-valueストアを使うなどの工夫が必要です。

ピクセルグリッドの事例

CodeGrid

Jamstackで作られていた構成から大きく変えず、Cloudflare + Astro + Svelte + HygraphでSSRを利用してユーザーごとにコンテンツを出し分ける高速なメディアサイトを実現しました。

メディアサイト

Astro
Svelte
Algolia
Hygraph
Cloudflare Pages
GitHub
CircleCI