Netlify Edge Handlers

Netlify Edge Handlers befinden sich im Early Access (Sie können eine Anfrage dafür stellen), aber sie sind super cool und ich denke, es lohnt sich, sie jetzt zu verstehen. Ich glaube, sie verändern die Natur dessen, was Jamstack ist und sein kann.

Sie kennen CDNs. Sie sind global. Sie hosten Assets geografisch nah an den Menschen, damit Websites schneller sind. Netlify macht das für alles. Je mehr Sie auf einem CDN unterbringen können, desto besser. Jamstack fördert das Konzept, dass Assets sowie vorgerenderte Inhalte auf einem globalen CDN liegen sollten. Geschwindigkeit ist ein Hauptvorteil davon.

Die Kopfrechnung bei Jamstack und CDNs lief bisher so: Ich gehe Kompromisse ein. Ich mache mehr zur Build-Zeit als zur Render-Zeit, weil ich wegen der Geschwindigkeit auf diesem globalen CDN sein möchte. Aber dabei verliere ich ein wenig die dynamische Kraft der Nutzung eines Servers. Oder ich mache immer noch dynamische Dinge, aber ich tue sie zur Render-Zeit auf dem Client, weil ich es muss.

Diese Rechnung ändert sich. Was Edge Handlers sagen ist: Sie müssen diesen Kompromiss nicht eingehen. Sie können dynamische, Server-ähnliche Dinge tun und auf dem globalen CDN bleiben. Hier ist ein Beispiel.

Sie haben einen Bereich Ihrer Website unter /blog und möchten, dass dort aktuelle Blogbeiträge zurückgegeben werden, die irgendwo in einer Cloud-Datenbank gespeichert sind. Dieser Edge Handler muss nur unter /blog ausgeführt werden, also konfigurieren Sie den Edge Handler so, dass er nur unter dieser URL ausgeführt wird.
Sie schreiben den Code, um diese Beiträge in einer JavaScript-Datei zu fetchen und legen ihn ab unter: /edge-handlers/getBlogPosts.js.
Nun, wenn Sie bauen und bereitstellen, wird dieser Code ausgeführt – nur unter dieser URL – und erledigt seine Aufgabe.

Welche Art von JavaScript schreiben Sie also? Es ist sehr fokussiert. Ich würde denken, in 95 % der Fälle ersetzen Sie die ursprüngliche Antwort komplett. Vielleicht ist das HTML für /blog auf Ihrer Website buchstäblich dieses

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test a Netlify Edge Function</title>
</head>
<body>
  <div id="blog-posts"></div>
</body>
</html>

Mit einem Edge Handler ist es nicht besonders schwierig, diese ursprüngliche Antwort zu erhalten, den Cloud-Datenaufruf zu tätigen und den Inhalt durch Blogbeiträge zu ersetzen.

export function onRequest(event) {
  event.replaceResponse(async () => {
    // Get the original response HTML
    const originalRequest = await fetch(event.request);
    const originalBody = await originalRequest.text();

    // Get the data
    const cloudRequest = await fetch(
      `https://css-tricks.de/wp-json/wp/v2/posts`
    );
    const data = await cloudRequest.json();

    // Replace the empty div with content
    // Maybe you could use Cheerio or something for more robustness
    const manipulatedResponse = originalBody.replace(
      `<div id="blog-posts"></div>`,
      `
        <h2>
          <a href="${data[0].link}">${data[0].title.rendered}</a>
        </h2>
        ${data[0].excerpt.rendered}
      `
    );

    let response = new Response(manipulatedResponse, {
      headers: {
        "content-type": "text/html",
      },
      status: 200,
    });

    return response;
  });
}

(Ich greife auf die REST-API dieser Website als Beispiel für einen Cloud-Datenspeicher zu.)

Es ist viel wie ein Client-seitiges fetch, nur dass anstatt das DOM nach der Anfrage nach Daten zu manipulieren, dies geschieht, bevor die Antwort überhaupt zum ersten Mal im Browser ankommt. Es ist Code, der auf dem CDN selbst ("am Edge") ausgeführt wird.

Also, das muss langsamer sein als vorgerenderte CDN-Inhalte, weil es eine zusätzliche Netzwerkanfrage erfordert, bevor es antwortet, richtig. Nun, es gibt einen gewissen Overhead, aber es ist schneller, als Sie wahrscheinlich denken. Die Netzwerkanfrage findet im Netzwerk selbst statt, also auf superschnellen Computern in superschnellen Netzwerken. Wahrscheinlich wird es ein paar Millisekunden dauern. Sie sind sowieso nur auf 50 ms Ausführungszeit beschränkt.

Ich konnte das alles auf meinem Konto, dem Zugriff gewährt wurde, zum Laufen bringen. Es ist sehr schön, dass man sie lokal testen kann mit

netlify dev --trafficMesh

...was sowohl in der Entwicklung als auch nach der Bereitstellung großartig funktionierte.

Alles, was Sie console.log()en, können Sie auch im Netlify-Dashboard einstellen

Hier ist ein Repo mit meinem funktionierenden Edge Handler.

Martin

# 20. Januar 2021

Was ist der Unterschied zwischen Edge Handlers und (Lambda) Funktionen, die Netlify ebenfalls anbietet? Sie scheinen ähnliche Konzepte zu sein.

Chris Coyier

Permalink zum Kommentar# 20. Januar 2021

Sie SIND ähnlich!

Eine (Lambda)-Funktion ist wie eine URL, die Sie aufrufen können. Sie rufen diese also NACHDEM die Seite geladen ist auf, um Dinge zu tun. Vielleicht sogar Daten abzurufen, wie ich es hier tue. Aber dann macht IHR Computer diesen Abruf und das passiert NACHDEM die Seite geladen wurde und Sie JavaScript ausführen. Mit einem Edge Handler wird das JavaScript ausgeführt, bevor die Seite überhaupt bei Ihnen ankommt.

Kommentare