Netlify 边缘处理器 | CSS-Tricks

Netlify 边缘处理器 现已进入抢先体验阶段（您可以申请），它们非常酷，我认为现在值得您花时间去理解。我认为它们改变了 Jamstack 的本质，也改变了它可能成为的样子。

您了解 CDN。它们是全球性的。它们将资产托管在靠近用户的位置，从而使网站更快。Netlify 对所有内容都这样做。您可以在 CDN 上放置的内容越多越好。Jamstack 倡导将资产和预渲染内容放在全球 CDN 上的理念。速度是其中的主要优势。

过去，Jamstack 和 CDN 的思维方式是这样的：我正在权衡取舍。我在构建时做了更多工作，而不是在渲染时，因为我想为了速度而位于那个全球 CDN 上。但这样做，我失去了一些使用服务器的动态能力。或者，我仍然在做动态的事情，但我在客户端的渲染时进行，因为我必须这样做。

这种思维方式正在改变。边缘处理器正在说：您不必做出这样的权衡。您可以在全局 CDN 上进行动态的服务器端操作。以下是一个示例。

您的网站上有一个 /blog 区域，您希望它返回最近的博客文章，这些文章存储在某个云数据库中。此边缘处理器只需要在 /blog 处运行，因此您只需将边缘处理器配置为在该 URL 处运行。
您编写代码以在 JavaScript 文件中 fetch 这些帖子，并将其放在：/edge-handlers/getBlogPosts.js 中。
现在，当您构建和部署时，该代码将在该 URL 处运行，并完成其工作。

那么您要编写什么类型的 JavaScript 呢？它非常专注。我认为 95% 的时间您都在直接替换原始响应。例如，也许您网站上 /blog 的 HTML 实际上是这样的

<!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>

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

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.org.cn/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;
  });
}

（我以这个网站的 REST API 作为云数据存储的示例。）

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

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

我能够在我的获得访问权限的帐户上运行所有这些功能。您可以在本地使用以下命令测试它们，这一点非常棒

netlify dev --trafficMesh

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

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

这里有一个包含我功能性边缘处理器的仓库。

评论