时间戳

首页 > 解决方案 > Nuxt 无缘无故重新渲染 - 内容从一个版本弹出到另一个版本

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

我在我的智慧结束试图解决这个问题！任何帮助将非常感激。

标签： javascriptvue.jsnuxt.jsrerender

解决方案

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变种...

推荐阅读