Vue SSR是否支持Edge Side Includes？Nuxt项目ESI渲染问题求助

问题场景 #

在Nuxt项目中引入<esi:include>标签，通过Varnish提供服务时该标签无法被渲染，已在Nuxt配置中添加ignoredElements忽略该元素的警告，但问题仍存在。

现有代码配置 #

1. Vue组件模板代码：

<div>
  <Header/>
  <esi:include src="http://widget-webapp/header-bar" />
  <Footer/>
</div>

2. Nuxt配置（nuxt.config.js）：

export default {
  vue: {
    config: {
      productionTip: false,
      devtools: process.env.NODE_ENV === 'prod' || process.env.NODE_ENV === 'stage' ? false : true,
      ignoredElements: ['esi:include']
    }
  },
  // 其他配置...
}

3. Varnish VCL配置：

if (bereq.http.host ~ "example\.com$") {
    set beresp.grace = 24h;

    # Enable ESI
    if (beresp.http.content-type ~ "html|xml") {
      set beresp.do_esi = true;
    }
}

解决方案 #

1. 确保Nuxt SSR保留ESI标签 #

Vue SSR默认可能会对自定义标签进行处理，即使添加了ignoredElements，也可能在渲染时丢失或修改标签。可以通过自定义组件确保服务端渲染时输出原始ESI标签：

创建全局组件components/EsiInclude.vue：

<template>
  <!-- 仅在服务端渲染ESI标签，客户端不渲染避免报错 -->
  <component 
    :is="'esi:include'" 
    :src="src" 
    v-if="process.server" 
  />
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  }
}
</script>

在Nuxt配置中注册全局组件（nuxt.config.js）：

export default {
  components: true, // 自动注册components目录下的组件
  // 其他配置...
}

页面中使用：

<div>
  <Header/>
  <EsiInclude src="http://widget-webapp/header-bar" />
  <Footer/>
</div>

2. 验证Varnish配置有效性 #

• 确认请求的Host匹配example.com，确保ESI启用规则触发。
• 检查响应的Content-Type是否为text/html，Varnish仅对配置中指定的类型处理ESI。
• 通过Varnish日志调试，查看beresp.do_esi是否被设置为true：

  varnishlog -g request -q "ReqHost ~ 'example.com'"
  

  日志中若出现beresp.do_esi = true则说明配置生效。

3. 配置HTML压缩避免破坏ESI标签 #

如果Nuxt启用了HTML压缩（如使用@nuxtjs/html-minifier），压缩工具可能会修改或移除ESI标签。需要在压缩配置中添加忽略规则：

在nuxt.config.js中修改：

export default {
  buildModules: ['@nuxtjs/html-minifier'],
  htmlMinifier: {
    ignoreCustomFragments: [/<esi:[\s\S]*?>/gi], // 忽略ESI标签
    collapseWhitespace: true,
    // 其他压缩配置...
  },
  // 其他配置...
}

4. 自定义渲染逻辑（进阶） #

如果需要更灵活的控制，可以在Nuxt的serverMiddleware或自定义渲染器中直接插入ESI标签，或者调整nuxt.config.js的render配置中的HTML模板，确保ESI标签被正确保留。

内容的提问来源于stack exchange，提问作者Ragib