问题标签 [edge-side-includes]

我最近才开始阅读 Varnish Cache 的功能，以帮助优化我的 PHP 网站的性能。我读到了一个名为 Edge Side Includes 的功能，它似乎让我可以选择构建可以在组件级别缓存的 html 内容小部件。这样一页的动态内容可以有部分页面被缓存，而其他部分不被缓存。

然后我开始研究 Amazon CloudFront，它似乎也提供了页面级缓存功能。但我不清楚 CloudFront 是否提供相当于 Edge Side Includes 的功能。如果可能的话，有人可以为我澄清一下吗？这将影响我构建 PHP 网站的方式。

Kubernetes Ingress Nginx 可以通过允许服务器片段来执行服务器端包含。

• https://kubernetes.github.io/ingress-nginx/user-guide/nginx-configuration/annotations/#server-snippet

虽然，traefik 似乎不支持服务器端包含或边缘端包含。

• https://docs.traefik.io/configuration/backends/kubernetes/#annotations

从微服务中拆分单体应用程序和构建系统需要一个可靠的策略，将来自不同系统的输出集成到最终用户的连贯体验中。使用 Edge Side Includes (ESI) 在表示层进行集成以进行页面组合是一种实用且优雅的解决方案。

• https://www.thoughtworks.com/radar/techniques/edge-side-includes-for-page-composition

我有一个nextjs(v7)构建的应用程序，我们正在尝试向其添加一些 Edge Side Include 标签：

我们已将这些添加到我们的自定义 _document.js（所有 nextjs/react 编译页面都使用）中，如下所示：

问题是正在编译/转换的内容是将结束标记添加到 esi:include 元素中，而不是将它们保留为 void 样式的自结束标记元素：

我认为这可能没问题，边缘服务器应该希望能同样识别它，但是不行，因为边缘服务器必须有一个自结束标签（根据规范中的第 3.1 节）才能找到它并执行代码注入。

我们尝试使用一些危险的SetInnerHTML 解决方案，但同样的事情发生了，结束标签被添加，而不是保持自我结束标签原样。因此，我怀疑这与我们在 JSX 代码中的操作方式无关，而是发生在 webpack 中的某个地方，babel 编译/转译以使其有效 html5，但我不确定如何解决它。似乎要求包含标签自关闭的 ESI 规范和只允许一个小的指定集合为无效（自关闭）元素的HTML5规范是不兼容的。

关于如何配置 Webpack 或 Babel 以保留自闭合标签的任何想法？提前感谢您的帮助！

----- 更新的部分工作 -----

通过将 3 个静态 html 文件添加到为 nextjs/react 应用程序提供服务的 express 服务器的指定静态文件夹中，我们已成功实现了此问题的部分解决方法。这 3 个文件（head.html、menu.html 和 foot.html）然后由添加到自定义 _document.js 的一些客户端 javascript 注入，如下所示：

这样做的原因是边缘服务器现在可以将页眉/菜单/页脚代码正确地注入到未干扰（没有 webpack 或 babel 转译）的 html 文件中，但是当我们添加的脚本将代码插入到反应页面使用的主 DOM 中时它没有在某些插入的 javascript 中正确绑定某些行为，因此菜单实际上不起作用。这可能是由于在完成所有其他渲染和 JS 绑定之后使用 insertAdjacentHTML 将其添加到 DOM。所以还是没有解决办法...

我有父 main_layout.html.twig，里面是这样的：

我们有子 user_profile_main_page.html.twig，里面是这样的：

User/Profile:activeAds 正在呈现 user_profile_active_ads.html.twig 其中包含：

Encore 设置为：

config.yml 包含：

UserProfileActiveAds.js 包含：

当这个页面启动时，'aaa' 被写入控制台两次。

创建的 Html 如下所示：

那就是runtime.672c0058.js?r12513在html中包含了两次！我认为这就是为什么将字符串写入 2 次以进行日志记录的原因。console.log('aaa') 只能在 js 文件中找到一次（在 /build/user_profile_active_ads.9b477d8d.js?r12513 中）。

当我不写render_esi时，我只写render：一切都按预期工作 - 字符串曾经记录到输出（并且运行时只包含一次）。但我想使用 render_esi，因为 user_profile_active_ads.html.twig 不应该被缓存，而它的父级被缓存。

如何通过双重初始化解决此问题？

对于主要端点需要授权的端点，我使用 varnish 和 Edge-side 包含，但 ESI 通常不会......但有时它们会这样做。当我希望所有 ESI 请求保留授权标头时，我现在通过添加一个我调用Keep-Authorization到主请求的标头来处理它。然后我有

这工作正常，但很不优雅——它要求请求者知道是否添加该 Keep-Authorization 标头。虽然 API 目前仅供我们使用，但可能会发生变化。

事实上，0 级响应知道它的 ESI 孩子是否需要授权，并且应该能够设置一个标头来表明这一点。如果我可以在清漆生命周期的适当部分阅读它，我可以在 ESI 基于我从 0 级响应得到的内容解决之前适当地删除（或不）授权标头。

这似乎是我必须做的事情vcl_backend_response，但我不太确定。或者，如果vcl_recv有类似req_top顶级响应的东西（在解决 ESI 时应该可用），也可以解决问题。

简而言之，我希望源能够确定是否保留授权标头以在其响应中解析 ESI。这是可行的吗？