Chapter 10無料公開

Edge Side Includes

okmttdhr
okmttdhr
2020.12.09に更新
このチャプターの目次

Edge Side Includes(ESI)は、CDNなどのエッジレイヤーでコンテンツを結合する技術、または、それに用いるマークアップ言語のことです。

具体的には、以下のような記述をすることで、Edge Sideでコンテンツが解決されます。

<html>
  <body>
    This is my fragment: <esi:include src="https://our.fragments.com/fragment.html"/>
  </body>
</html>

ESIはAkamaiやOracleが提唱していて、比較的古くから存在する技術です。AkamaiやCloudflare、Fastly、Varnishなどがサポートしています。Micro Frontendsの文脈では、ESIを用いてFragmentsを結合することを意味しています。

メリット・デメリット

使えるCDNベンダーが限られるので、導入する際はまずそこを許容できるか検討する必要があります。ベンダーによってESIのリソース取得ロジックが異なるケースもあるので、注意が必要です。

また、ESIはシンプルな仕様なので、フレキシビリティに欠ける場合があります。例えば、サーバーサイドで取得したデータを、Edge上でFragmentsに渡すことはできません。さらに、SPAなどのCSRが必要な処理を行うことが難しいです。

開発観点では、ローカルでの開発がトリッキーになります。実際には、nodesiのようなラッパーを検討する必要があるかもしれません。(個人的に、アプリケーションのロジックがEdge Sideの仕様に依存しているのも好きではありません)。

しかし、シンプルに記述が可能で、FallbackやTimeoutなど最低限の機能が備わっていることはメリットと言えるでしょう。コンテンツをClientで用意しないのに、サーバーのことを考える必要がないのも魅力的です。また、パーツ毎にキャッシュをかけられるため、動的なコンテンツと静的なコンテンツが同居する画面で、静的なコンテンツのみキャッシュしたい場合など、柔軟なキャッシュ戦略が取れることもESIならではです。

まとめ

ESIを使用して、Edge SideでFragmentsを結合できる方法を紹介しました。シンプルゆえのフレキシビリティのなさはありますが、ユースケースに合致すれば、有効な選択肢の一つです。