Netlify Edge 처리기

Netlify Edge 프로세서 Early Access : Jamstack을 재정의합니다

Netlify Edge 프로세서는 현재 초기 액세스 단계에 있지만 (액세스를 요청할 수 있음), 현재의 힘은 깊은 다이빙 가치가 있습니다. 나는 그것이 Jamstack의 본질과 가능성을 바꿀 것이라고 생각합니다.

CDN (콘텐츠 배포 네트워크)을 이해합니다. 그것들은 글로벌이며 사용자 근처에 리소스를 지리적으로 배치 할 수 있으므로 웹 사이트 속도를 높일 수 있습니다. NetLify는 모든 컨텐츠에 대한 CDN 서비스를 제공합니다. CDN에 더 많은 콘텐츠를 배포 할수록 더 좋습니다. Jamstack은 글로벌 CDN에 리소스와 사전 렌더링 된 콘텐츠를 배치하는 것을 옹호하며 속도는 주요 이점입니다.

전통적으로 Jamstack과 CDN의 사고 방식은 다음과 같습니다. 장단점을 평가해야합니다. CDN의 속도 이점을 얻기 위해 렌더링 할 때가 아니라 구축 할 때 더 많은 작업을 수행했습니다. 그러나 그렇게함으로써 서버를 사용하는 동적 능력도 잃어 버립니다. 또는 우리는 여전히 역동적 인 일을하고 있지만 그렇게해야하기 때문에 클라이언트가 렌더링 할 때만 할 수 있습니다.

이 사고 방식이 바뀌고 있습니다. Edge 프로세서는 더 이상이 절충을 할 필요가 없음을 보여줍니다. 동적 서버 측 작업을 수행하고 글로벌 CDN에 머무를 수 있습니다. 예는 다음과 같습니다.

1. 귀하의 웹 사이트에는 일부 클라우드 데이터베이스에 저장된 최신 블로그 게시물을 반환하려는 /blog 섹션이 있습니다. 이 Edge 프로세서는 /blog 에서만 실행되면이 URL에서만 실행되도록 Edge 프로세서를 구성합니다.
2. JavaScript 파일을 작성 하여이 기사를 가져 와서 /edge-handlers/getBlogPosts.js 에 배치합니다.
3. 이제 빌드 및 배포하면이 코드는 해당 URL에서만 실행되어 작업을 수행합니다.

그렇다면 어떤 유형의 JavaScript 코드를 작성하고 있습니까? 매우 집중되어 있습니다. 원래 응답을 직접 대체하는 경우의 95%가 생각합니다. 예를 들어, 웹 사이트의 HTML 코드 /blog 다음과 같습니다.

<meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title> Netlify Edge 함수 테스트</title><div></div>

Edge 프로세서를 사용하면 원래 응답을 얻고 클라우드 데이터 호출을 작성하고 컨텐츠를 블로그 게시물로 바꾸는 것이 특히 어렵지 않습니다.

 내보내기 onrequest (이벤트) {
  event.replaceresponse (async () => {
    // 원래 응답을받습니다. HTML
    Const OriginalRequest = Await Fetch (Event.Request);
    Const OriginalBody = Await OriginalRequest.text ();

    // 데이터 가져 오기 const cloudRequest = Await fetch (
      `https : // css-tricks.com/wp-json/wp/v2/posts`
    );
    const data = await cloudRequest.json ();

    // 빈 DIV를 새 컨텐츠로 바꾸십시오
    // 더 큰 견고성을 위해 Cheerio 또는 기타 유사한 도구를 사용할 수 있습니다. const ManipulatedResponse = OriginalBody.replace (
      `<div></div> `,
      `
        <h2>
          <a href="https://www.php.cn/link/441ba8b924a353d6ec1ac4bff30df801">$ {data [0] .title.rendered}</a>
        </h2>
        $ {data [0] .excerpt.rendered}
      `
    );

    응답 = 새 응답을하자
      헤더 : {
        "Content-Type": "Text/Html",
      },
      상태 : 200,
    });

    반환 응답;
  });
}

(클라우드 데이터 저장의 예로 웹 사이트의 나머지 API를 사용합니다.)

이는 일부 데이터를 요청한 후 DOM을 작동하지 않고 응답이 브라우저에 처음 도착하기 전에 발생한다는 점을 제외하고는 클라이언트의 페치와 매우 유사합니다. 코드는 CDN 자체에서 실행됩니다 ( "Edge").

글쎄, 이것은 사전 렌더링 된 CDN 컨텐츠보다 확실히 느리게 응답하기 전에 추가 네트워크 요청이 필요하기 때문입니다. 실제로 약간의 오버 헤드가 있지만 생각보다 빠릅니다. 네트워크 요청은 네트워크 자체에서 발생하므로 초고속 네트워크에서 초고속 컴퓨터를 사용합니다. 몇 밀리 초만 걸릴 수 있습니다. 어쨌든 그들은 50 밀리 초의 실행 시간 만 허용합니다.

승인 된 계정 에서이 모든 것을 성공적으로 실행합니다. 좋은 점은 다음 명령을 사용하여 로컬로 테스트 할 수 있다는 것입니다.

 Netlify Dev -Trafficmesh

이것은 개발과 배포 모두에서 잘 작동합니다.

console.log() 에서 출력 한 내용은 NetLify 대시 보드에서 설정할 수 있습니다.

다음은 정상적인 기능 에지 프로세서를 포함하는 저장소 링크입니다. [저장소 링크] (실제 리포지토리 링크는 여기에 삽입해야합니다).

위 내용은 Netlify Edge 처리기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!