FastlyではESI(Edge Side Includes)を利用できます。
CDN側でパーツ化されたHTMLやJSONなどを結合してレスポンスとして返してくれます。
SEO要件などでAjaxを利用できない場面、キャッシュ切れのタイミングが異なる情報で利用できる場面があるかと思います。
Paid Accountではない状態でESIを利用する
無料の状態だとクライアントへのレスポンスをCDN側でgzip圧縮することができません。
また、Originへのレスポンスが圧縮されていると、ESIを利用することはできません。
VCL Snippet
sub vcl_fetch {
esi;
}
OriginのHTML
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<h1>Hello ESI</h1>
<esi:include src="/child.html" /><br>
<esi:include src="/hoge.txt"></esi:include>
</body>
</html>
child.html
<b>child</b>
hoge.txt
hoge
クライアントにレスポンスされるHTML
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<h1>Hello ESI</h1>
<b>child1</b>
<br>
hoge
</body>
</html>
Paid AccountでTLSの契約をした状態でESIを利用する
今まではESIを利用した状態でクライアントへのレスポンスをCDN側でgzip圧縮することはできませんでしたが、サポートに連絡することによりESIを利用した状態でもgzip圧縮できるようにしてもらえます。
本機能を有効にしてもらうとCDNからのレスポンスの圧縮をbrotliも対応してくれるようです。 2018/08/17追記
詳しくはコミュニティの情報を参考にしてください。
また、Originへのレスポンスが圧縮されていると、ESIを利用することはできません。
VCL Snippet
sub vcl_fetch {
if (beresp.http.Content-Type ~ "htm") {
esi;
}
#FASTLY fetch
}
sub vcl_miss {
unset bereq.http.accept-encoding;
#FASTLY miss
}
sub vcl_pass {
unset bereq.http.accept-encoding;
#FASTLY miss
}
sub vcl_deliver {
if (req.is_ssl) {
set resp.http.x-compress-hint = "on";
}
#FASTLY deliver
}