Netlify Edgeハンドラー

Netlify Edgeプロセッサ早期アクセス：Jamstackの再定義

Netlify Edgeプロセッサは現在、早期アクセス段階にあります（アクセスをリクエストできます）が、そのパワーは今や深くダイビングする価値があります。 Jamstackの性質と可能性を変えると思います。

CDN（コンテンツ配信ネットワーク）を理解しています。それらはグローバルであり、ユーザーの近くにリソースを地理的に配置できるため、ウェブサイトを高速化できます。 Netlifyは、すべてのコンテンツにCDNサービスを提供します。 CDNに展開できるコンテンツが多いほど、 Jamstackは、グローバルCDNにリソースと事前にレンダリングされたコンテンツを配置することを支持しており、速度が主な利点です。

伝統的に、JamstackとCDNの考え方は次のとおりです。長所と短所を比較検討する必要があります。 CDNの速度を得るために、レンダリング時ではなく、構築するときにさらに作業を行いました。しかし、そうすることで、サーバーを使用する動的な機能の一部も失います。または、私たちはまだ動的なことをしていますが、そうしなければならないので、クライアントがレンダリングしたときにのみそれを行うことができます。

この考え方は変化しています。エッジプロセッサは、このトレードオフを行う必要がなくなったことを示しています。動的なサーバー側の操作を実行し、グローバルCDNにとどまることができます。これが例です：

1. あなたのウェブサイトには、いくつかのクラウドデータベースに保存されている最新のブログ投稿を返す/blogセクションがあります。このEdgeプロセッサは/blogでのみ実行する必要があるため、このURLでのみ実行するようにEdgeプロセッサを構成します。
2. JavaScriptファイルを作成して、これらの記事を取得し、 /edge-handlers/getBlogPosts.js GetBlogPosts.jsに配置します。
3. これで、構築および展開すると、このコードはそのURLでのみ実行され、その作業を行います。

では、どのタイプのJavaScriptコードを書いていますか？それは非常に集中しています。元の応答を直接置き換えるケースの95％だと思います。たとえば、あなたのウェブサイトの/blogのHTMLコードは次のとおりです。

<meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title> Netlify Edge関数のテスト</title><div></div>

Edgeプロセッサを使用すると、元の応答を取得し、クラウドデータコールを作成し、コンテンツをブログ投稿に置き換えることは特に難しくありません。

エクスポート機能onrequest（event）{
  event.replaceresponse（async（）=> {
    //元の応答HTMLを取得します
    const originalRequest = await fetch（event.request）;
    const originalbody = await originalRequest.text（）;

    //データconst cloudRequest = wait wait fetch（
      `https：// css-tricks.com/wp-json/wp/v2/posts`
    ）;
    const data = await cloudRequest.json（）;

    //空のdivを新しいコンテンツに置き換えます
    //堅牢性を高めるには、chereioまたはその他の類似のツールを使用できますconst manipeluatedresponse = originalbody.replace（
      `<div></div> `、
      `
        <h2>
          <a href="//m.sbmmt.com/link/441ba8b924a353d6ec1ac4bff30df801">$ {data [0] .title.rendered}</a>
        </h2>
        $ {data [0] .excerpt.Rendered}
      `
    ）;

    let response = new Response（manipulatedResponse、{
      ヘッダー：{
        「コンテンツタイプ」：「テキスト/html」、
      }、
      ステータス：200、
    }）;

    返信応答。
  }）;
}

（クラウドデータストレージの例として、Webサイトの残りのAPIを使用しています。）

これは、クライアントのフェッチによく似ています。ただし、データをリクエストした後にDOMを操作するのではなく、応答が最初にブラウザに到着する前に発生します。コードはCDN自体（「エッジ」）で実行されます。

まあ、これは事前にレンダリングされたCDNコンテンツよりも確かに遅いです。なぜなら、応答する前に追加のネットワークリクエストが必要だからですよね？確かにいくつかのオーバーヘッドがありますが、それはあなたが思っているよりも速いです。ネットワークリクエストはネットワーク自体で発生するため、SuperfastネットワークでSuperfast Computersを使用します。数ミリ秒しかかからない場合があります。いずれにせよ、彼らは50ミリ秒の実行時間のみを許可します。

承認されたアカウントでこれらすべてを正常に実行しています。素晴らしいことは、次のコマンドを使用してローカルでテストできることです。

 netlify dev -trafficmesh

これは、開発と展開の両方でうまく機能します。

console.log()に出力するものはすべて、Netlifyダッシュボードで設定できます。

通常の機能エッジプロセッサを含むリポジトリリンクは次のとおりです。[リポジトリリンク]（実際のリポジトリリンクはここに挿入する必要があります）

以上がNetlify Edgeハンドラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。