Edge Rendering

この例では、実際のユースケースとしてネットワークピアリング分析を使用して、Edge Cloud Apps関数を使用してエッジレンダリングを実装する方法を示します。ユーザーはASN（自律システム番号）を提供するだけで、関数はPeeringDB APIをクエリして、ユーザーが提供したASNと事前構成済みのターゲットASN（例：Apple）間の共有施設と交換ポイントを計算します。この情報は、HTMLRewriterを使用して、既存のHTMLテンプレートに動的に挿入されます。その結果、カスタマイズされた事前レンダリングされた応答がユーザーに直接配信されます。

エッジレンダリングの利点

• **パフォーマンスの向上：**エッジでページコンテンツを事前レンダリングすると、ブラウザのレンダリングワークロードが軽減され、ページの読み込み時間が短縮され、ユーザーエクスペリエンスが向上します。
• **SEOの最適化：**エッジレンダリングは、読み込み速度を向上させ、CDNエッジノードにコンテンツをキャッシュすることで、オリジンサーバーの負荷を軽減します。これにより、検索エンジンは事前レンダリングされたコンテンツをより適切にクロールしてインデックスを作成できるようになり、SEOランキングが向上します。
• **オリジンサーバーの負荷の軽減：**レンダリングタスクをエッジノードにオフロードすると、オリジンサーバーの負荷が軽減され、Webサイトの可用性が向上します。

コード例

import { NetworkComparisonHandler, ErrorConditionHandler, AsnHandler } from "./peering-handlers";
import { Network } from "./peering-models-net";
import { apple } from './peering-utils-constants';

async function handleRequest(request) {
    const url = new URL(request.url);
    const asn = url.searchParams.get('asn'); // ユーザーが提供したASNを取得します
    console.log(`asn:${asn}`);
    try {
        if (asn) {
            // AppleのASNとユーザーが提供したASNのネットワーク情報を取得します
            const apNetwork = await new Network(apple['asn']).populate(); 
            const otherNetwork = await new Network(asn).populate();
            // 2つのネットワーク間の共有施設と交換ポイントを計算します
            const sharedItems = await apNetwork.compare(otherNetwork);
            console.log(`sharedItems: ${sharedItems.length}`);
            let response = await fetch(request.url);
            // HTMLRewriterを利用して、HTMLコンテンツを動的に変更します
            return await new HTMLRewriter()
                .on('#asnField', new AsnHandler(asn)) // ASN入力フィールドを処理します
                .on('#formContainer', new NetworkComparisonHandler({apNetwork, otherNetwork, sharedItems})) // 結果表示領域を処理します
                .transform(response); 
        } else {
            return fetch(request.url);
        }
    } catch (e) {
        console.error(`error:${e}`);
        let response = await fetch(request.url);
        return await new HTMLRewriter()
            .on('#asnField', new AsnHandler(asn))
            .on('#formContainer', new ErrorConditionHandler(asn))
            .transform(response);
    }
}
                    
addEventListener("fetch", event => {
    return event.respondWith(handleRequest(event.request));
});