网站边缘渲染

本示例展示如何利用Edge Cloud Apps 函数实现边缘渲染，并以网络对等分析为例进行演示。用户只需提供一个 ASN（自治系统号），函数就会查询 PeeringDB API，计算该 ASN 与预先配置的目标 ASN（例如苹果公司的 ASN）之间共享的设施和交换点，并将这些信息通过 HTMLRewriter 动态插入到预先准备好的HTML模板中。最终，用户将直接收到一个定制化的、预渲染的响应。

边缘渲染的优势

• 提升性能: 在边缘节点预渲染页面内容，减少了浏览器端的渲染工作，从而缩短页面加载时间，提升用户体验。
• 优化 SEO: 搜索引擎可以更好地抓取和索引预渲染的页面内容，从而提升网站的 SEO 排名。
• 降低源站负载: 将渲染工作转移到边缘节点，可以减轻源站的负载压力，提高网站的可用性。

详细代码

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) {
            // 获取苹果公司和用户提供的 ASN 的网络信息
            const apNetwork = await new Network(apple['asn']).populate(); 
            const otherNetwork = await new Network(asn).populate();
            // 计算两个网络之间共享的设施和交换点
            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));
});