Nuxt 无故重新渲染 - 内容从一个版本跳到另一个版本

如何解决Nuxt 无故重新渲染 - 内容从一个版本跳到另一个版本

我正在尝试在我的目标网页上运行 A/B 测试，该网页是静态生成的 Nuxt (v2.15.7) 网站的一部分。对于 50% 的用户，我们会在表单上显示不同的标题和说明。

问题在于，当页面加载时，内容有时会从 A 测试版本弹出到 B 测试版本（无需刷新页面或其他任何导致重新呈现的手动操作）。

这是我的代码，减少了问题的最准系统重现：

我的着陆页组件：

<template>
  <div>
    <SliceMinimalFormHeader
      :locale="locale"
      v-bind="formContent"
      :experiments="experiments"
    />
  </div>
</template>

<script>
import SliceMinimalFormHeader from '@/components/SliceMinimalFormHeader.vue'
import { EXPERIMENTS } from '@/data/consts.js'

export default {
  components: {
    SliceMinimalFormHeader,},props: {
    locale: {
      type: String,default: 'en-us'
    }
  },data() {
    const testGroup = Math.random() > 0.5 ? 'A' : 'B'
    return {
      experiments:
        this.locale === 'en-us' && testGroup === 'A'
          ? [EXPERIMENTS.CALCULATOR]
          : [],formContent: {
        'form-heading': '','form-description': ''
      },}
  },created() {
    const newFormContent = { 
      'form-heading': 'Heading for the B test version','form-description': 'Description for the B test version' 
    }
    if (this.experiments.includes(EXPERIMENTS.CALCULATOR)) {
      newFormContent['form-heading'] =
        'Heading for the A test version'
      newFormContent['form-description'] =
        'Description for the A test version'
    }
    this.formContent = newFormContent
  }
}
</script>

然后，在子 SliceMinimalFormHeader 组件中：

<template>
  <section class="grid-12 content-wrapper">
    <h4 class="heading-2" :class="$style['form-heading']">
      {{ formHeading }}
    </h4>
    <div :class="$style['form-description']">
      {{ formDescription }}
    </div>
  </section>
</template>

<script>
export default {
  props: {
    formHeading: {
      type: String,default: ''
    },formDescription: {
      type: String,default: ''
    }
  }
}
</script>

我在想办法解决这个问题！任何帮助将不胜感激。

解决方法

Vue 是一个客户端框架。所有的 HTML 都是由浏览器中的 JS 生成的。这意味着典型的 Vue 应用程序只是非常简单的 HTMl 文件，几乎没有 HTML 和一些 CSS 和 Javascript <script> 标签...

这对 SEO 来说是个问题，因为大多数爬虫（Google、FB、Twitter）不执行 JS，只是扫描从服务器返回的 HTML...

为了解决这个问题，Nuxt 框架应运而生。他们通过在服务器上执行 Vue 应用程序并在服务器上渲染 HTML 来解决问题——无论是在请求时（Nuxt 经典​​——每次请求来时都会生成新的 HTML）或在构建时（Nuxt 生成——HTML 生成到每个请求返回相同的 HTML 文件）

在所有情况下，服务器返回的 HTML 都不同，但其他一切都相同。它仍然是一个 Vue 应用程序，它在客户端上执行，一旦启动，它就会覆盖从服务器返回的任何 HTML...

因此，在您的情况下，您为所有用户 generate 一些 HTML（因此随机选择 A 或 B），为所有用户加载此 HTML，但是一旦加载 Vue 应用程序，它就会获取控制权并渲染（随机）A 或 B 变体...