Nuxt re-rendering 无缘无故 - 内容从一个版本跳到另一个版本

Question

我正在尝试运行在我的着陆页上进行 A/B 测试，它是 statically-generated Nuxt (v2.15.7) 站点的一部分。对于 50% 的用户，我们在表单上显示不同的标题和描述。

问题是当页面加载时，内容有时会从 A 测试版本弹出到 B 测试版本（没有刷新页面，或任何其他手动导致 re-render） .

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

我的着陆页组件：

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

然后，在 child 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>

我已经无计可施了！！任何帮助将不胜感激。

Answer 1

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

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

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

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

所以在你的情况下你 generate 一些 HTML 为所有用户（所以 A 或 B 是随机选择的），这个 HTML 是为所有用户加载的，但是一旦Vue 应用程序已加载，它获取控制权并（随机）呈现 A 或 B 变体...

Nuxt re-rendering 无缘无故 - 内容从一个版本跳到另一个版本

Nuxt re-rendering for no reason - content popping from one version to another

javascript

vue.js

nuxt.js

rerender