Netlify Edge Handlers

Netlify Edge Processor Early Access: Redefining Jamstack

Netlify edge processors are currently in the early access stage (you can request access), but their power is worth a deep dive now. I think it will change the nature and possibility of Jamstack.

You understand CDN (Content Distribution Network). They are global and can geographically place resources near users, thus speeding up the website. Netlify provides CDN services for all content. The more content you can deploy on a CDN, the better. Jamstack advocates placing resources and pre-rendered content on global CDNs, with speed being its main advantage.

Traditionally, Jamstack and CDN's mindset is this: We need to weigh the pros and cons. To get the speed advantage of CDN, we did more work when building, not when rendering. But in doing so, we also lose some of the dynamic ability to use the server. Or, we're still doing dynamic things, but since we have to do so, we can only do it when the client renders.

This mindset is changing. Edge processors show that you no longer need to make this trade-off. You can perform dynamic server-side operations and stay on the global CDN. Here is an example:

1. Your website has a /blog section that you want to return the latest blog posts stored in some cloud database. This edge processor only needs to run in /blog , so you configure the edge processor to run only at this URL.
2. You write a JavaScript file to get these articles and place them in /edge-handlers/getBlogPosts.js .
3. Now, when you build and deploy, this code will only run at that URL and do its work.

So what type of JavaScript code are you writing? It's very focused. I think 95% of the cases you replace the original response directly. For example, the HTML code for /blog on your website might be:

<meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title> Testing Netlify edge functions</title><div></div>

With an edge processor, it is not particularly difficult to get the original response, make cloud data calls, and replace content with a blog post.

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

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

    // Replace empty div with new content
    // For greater robustness, you can use Cheerio or other similar tools 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}
      `
    );

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

    return response;
  });
}

(I use the REST API of the website as an example of cloud data storage.)

This is much like the client's fetch, except that it does not operate the DOM after requesting some data, but rather happens before the response first arrives in the browser. The code runs on the CDN itself ("Edge").

Well, this is certainly slower than pre-rendered CDN content, because it requires additional network requests before responding, right? There is indeed some overhead, but it's faster than you think. Network requests occur on the network itself, so using superfast computers on superfast networks. It may only take a few milliseconds. In any case, they only allow 50 milliseconds of execution time.

I've successfully run all of this on my approved account. What's great is that you can test them locally using the following command:

 netlify dev --trafficMesh

This works well in both development and deployment.

Anything you output in console.log() can be set in the Netlify dashboard.

Here is a repository link containing my normal functioning edge processor: [Repository link] (The actual repository link should be inserted here)

The above is the detailed content of Netlify Edge Handlers. For more information, please follow other related articles on the PHP Chinese website!