Netlify边缘处理程序

Netlify 边缘处理器抢先体验：重新定义 Jamstack

Netlify 边缘处理器目前处于抢先体验阶段（您可以申请访问），但其强大功能值得我们现在就深入了解。我认为它将改变 Jamstack 的本质和可能性。

您了解 CDN（内容分发网络）。它们是全球性的，可以在地理位置上将资源放置在用户附近，从而加快网站速度。Netlify 为所有内容都提供了 CDN 服务。能够在 CDN 上部署的内容越多越好。Jamstack 提倡将资源和预渲染内容都放置在全球 CDN 上，速度是其主要优势。

传统上，Jamstack 和 CDN 的思维模式是这样的：我们需要权衡利弊。为了获得 CDN 的速度优势，我们在构建时做了更多工作，而不是在渲染时。但这样做，我们也失去了一些使用服务器的动态能力。或者，我们仍然在做动态的事情，但由于必须这样做，我们只能在客户端渲染时进行。

这种思维模式正在改变。边缘处理器表明：您无需再进行这种权衡。您可以执行动态服务器端操作，并 保持 在全球 CDN 上。以下是一个示例：

1. 您的网站有一个 /blog 部分，您希望它返回存储在某个云数据库中的最新博客文章。此边缘处理器只需要在 /blog 运行，因此您将边缘处理器配置为仅在此 URL 运行。
2. 您编写一个 JavaScript 文件来获取这些文章，并将其放在 /edge-handlers/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 边缘函数</title><div></div>

使用边缘处理器，获取原始响应、进行云数据调用并用博客文章替换内容并不特别困难。

export function onRequest(event) {
  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}
      `
    );

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

    return response;
  });
}

（我使用该网站的 REST API 作为云数据存储的示例。）

这很像客户端的 fetch，只是它不是在请求一些数据后操作 DOM，而是在响应第一次到达浏览器之前发生的。代码在 CDN 本身（“边缘”）上运行。

那么，这肯定比预渲染的 CDN 内容慢，因为它需要在响应之前进行额外的网络请求，对吧？确实会有一些开销，但速度比您想象的要快。网络请求发生在网络本身，因此在超快的网络上使用超快的计算机。可能只需要几毫秒。无论如何，它们只允许 50 毫秒的执行时间。

我已经在我的已获准访问的帐户上成功运行了所有这些。非常棒的是，您可以使用以下命令在本地测试它们：

netlify dev --trafficMesh

这在开发和部署中都运行良好。

您在 console.log() 中输出的任何内容都可以在 Netlify 仪表板中设置。

这是一个包含我功能正常的边缘处理器的仓库链接：[仓库链接] (此处应插入实际仓库链接)

以上是Netlify边缘处理程序的详细内容。更多信息请关注PHP中文网其他相关文章！