Edge Rendering

이 예제에서는 실용적인 사용 사례로 네트워크 피어링 분석을 사용하여 Edge Cloud Apps 함수를 사용하여 에지 렌더링을 구현하는 방법을 보여줍니다. 사용자는 ASN(자율 시스템 번호)만 제공하면 함수가 PeeringDB API를 쿼리하여 사용자가 제공한 ASN과 미리 구성된 대상 ASN(예: Apple) 간의 공유 시설 및 교환 지점을 계산합니다. 이 정보는 HTMLRewriter를 사용하여 기존 HTML 템플릿에 동적으로 삽입됩니다. 결과적으로 사용자 지정된 사전 렌더링된 응답이 사용자에게 직접 전달됩니다.

에지 렌더링의 이점

• 향상된 성능: 에지에서 페이지 콘텐츠를 사전 렌더링하면 브라우저의 렌더링 작업 부하가 줄어들어 페이지 로드 시간이 단축되고 사용자 경험이 향상됩니다.
• SEO 최적화: 에지 렌더링은 로딩 속도를 개선하고 CDN 에지 노드에 콘텐츠를 캐싱하여 오리진 서버 부하를 줄입니다. 이를 통해 검색 엔진이 사전 렌더링된 콘텐츠를 더 잘 크롤링하고 색인을 생성하여 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) {
            // Apple의 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));
});