Netlify Edge -Handler

Netlify Edge -Prozessor Frühzugriff: Neudefinition von Jamstack neu definieren

Netlify Edge -Prozessoren befinden sich derzeit in der frühen Zugriffsstufe (Sie können Zugriff anfordern), aber ihre Leistung ist jetzt einen tiefen Tauchgang wert. Ich denke, es wird die Natur und die Möglichkeit von Jamstack verändern.

Sie verstehen CDN (Content Distribution Network). Sie sind global und können geografisch Ressourcen in der Nähe von Benutzern platzieren und so die Website beschleunigen. Netlify bietet CDN -Dienste für alle Inhalte. Je mehr Inhalte Sie auf einem CDN bereitstellen können, desto besser. Jamstack befürwortet, Ressourcen und vorgezogene Inhalte auf globalen CDNs zu platzieren, wobei die Geschwindigkeit ihr Hauptvorteil ist.

Traditionell lautet Jamstack und CDN: Wir müssen die Vor- und Nachteile abwägen. Um den Geschwindigkeitsvorteil von CDN zu erzielen, haben wir beim Bauen mehr Arbeit geleistet, nicht beim Rendern. Dabei verlieren wir jedoch auch die dynamische Fähigkeit, den Server zu verwenden. Oder wir machen immer noch dynamische Dinge, aber da wir dies tun müssen, können wir es nur tun, wenn der Kunde rendert.

Diese Denkweise ändert sich. Edge-Prozessoren zeigen, dass Sie diesen Kompromiss nicht mehr einführen müssen. Sie können dynamische serverseitige Vorgänge ausführen und auf dem globalen CDN bleiben . Hier ist ein Beispiel:

1. Ihre Website verfügt über einen A /blog -Bereich, den Sie die neuesten Blog -Beiträge zurückgeben möchten, die in einer Cloud -Datenbank gespeichert sind. Dieser Edge -Prozessor muss nur in /blog ausgeführt werden, sodass Sie den Edge -Prozessor so konfigurieren, dass er nur an dieser URL ausgeführt wird.
2. Sie schreiben eine JavaScript-Datei, um diese Artikel zu erhalten, und platzieren sie in /edge-handlers/getBlogPosts.js .
3. Wenn Sie nun erstellen und bereitstellen, wird dieser Code nur in dieser URL ausgeführt und erledigt seine Arbeit.

Welche Art von JavaScript -Code schreiben Sie? Es ist sehr fokussiert. Ich denke, 95% der Fälle, die Sie die ursprüngliche Antwort direkt ersetzen. Zum Beispiel könnte der HTML -Code für /blog auf Ihrer Website sein:

<meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title> Testen von Netlify Edge -Funktionen</title><div></div>

Bei einem Edge -Prozessor ist es nicht besonders schwierig, die ursprüngliche Antwort zu erhalten, Cloud -Datenaufrufe zu tätigen und Inhalte durch einen Blog -Beitrag zu ersetzen.

 Exportfunktion OnRequest (Ereignis) {
  Event.Replaceresponse (async () => {
    // Erhalten Sie die ursprüngliche Antwort HTML
    const originalRequest = warte fetch (Ereignis.Request);
    const originalbody = originalRequest.text ();

    // Data const CloudRequest abrufen = auf den Fetch (ABTEILEN) (
      `https: // CSS-tricks.com/wp-json/wp/v2/posts`
    );
    const data = wartet CloudRequest.json ();

    // Ersetzen Sie den leeren Div durch neue Inhalte
    // Für größere Robustheit können Sie Cheerio oder andere ähnliche Werkzeuge konstant manipuliertesResponse = originalbody.replace (Replace (
      `<div></div> `,
      `
        <h2>
          <a href="https://www.php.cn/link/441ba8b924a353d6ec1ac4bff30df801">$ {data [0] .title.rendered}</a>
        </h2>
        $ {data [0] .excerpt.rendered}
      `
    );

    response = new response (manipuledResponse, {
      Header: {
        "Inhaltstyp": "Text/HTML",
      },
      Status: 200,
    });

    Rücksendemantwort;
  });
}

(Ich verwende die Rest -API der Website als Beispiel für Cloud -Datenspeicher.)

Dies ist dem Abruf des Kunden ähnlich, außer dass er das DOM nach Anforderung einiger Daten nicht betreibt, sondern auftritt, bevor die Antwort zum ersten Mal im Browser eintrifft. Der Code wird auf dem CDN selbst ausgeführt ("Edge").

Nun, das ist sicherlich langsamer als vorbereitete CDN-Inhalte, da vor der Beantwortung zusätzliche Netzwerkanfragen erforderlich sind, oder? Es gibt in der Tat etwas Overhead, aber es ist schneller als Sie denken. Netzwerkanforderungen treten im Netzwerk selbst auf und verwenden daher superschnelle Computer in superschnellen Netzwerken. Es dauert möglicherweise nur ein paar Millisekunden. In jedem Fall erlauben sie nur 50 Millisekunden der Ausführungszeit.

Ich habe all dies erfolgreich auf meinem genehmigten Konto ausgeführt. Was großartig ist, ist, dass Sie sie lokal mit dem folgenden Befehl testen können:

 netlify dev --trafficmesh

Dies funktioniert sowohl in der Entwicklung als auch in der Bereitstellung gut.

Alles, was Sie in console.log() ausgeben, kann im Netlify -Dashboard eingestellt werden.

Hier ist ein Repository -Link, der meinen normalen Funktionsdichtsprozessor enthält: [Repository -Link] (der tatsächliche Repository -Link sollte hier eingefügt werden)

Das obige ist der detaillierte Inhalt vonNetlify Edge -Handler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!