Nuxt/Buefy - <client-only>组件不一致地显示

Question

在我的Nuxt/Buefy项目中，我有一个非常奇怪的问题。我有一个组件site-header，它加载一个子组件，user-location仅供客户端使用，如下所示：

components/site-header.vue

<template>
  <div class=header-wrapper>
    <div class=container>
      <b-navbar centered class=navbar>
        <template #end>
          <nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
          <client-only>
            <user-location usage=siteHeader />
          </client-only>
        </template>
      </b-navbar>
    </div>
  </div>
</template>

我遇到的问题是user-location在热重新加载时会暂时显示，但是当我加载/刷新页面时，就不会显示。

但是，如果我把它移到b-navbar之外，它每次都会显示出来。

<template>
  <div class=header-wrapper>
    <div class=container>
    <nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
    <client-only>
      <user-location usage=siteHeader />
      </client-only>
    </div>
  </div>
</template>

什么能解释这件事？有一件事可能是或不相关的:在我删除node_modules dir重新安装所有东西之前，它一直运行良好。

Answer 1

是的，我在我的一些项目中也注意到了一些类似的问题。

我想说，这个问题主要来自HMR，我们没有能力发现我们并不真的需要它，并且仍然将它注入到模板中，或者可能是Webpack的包在你的项目中是巨大的。

至少，这个错误从来不会发生在生产中，所以它应该是好的！

无论是哪种方式，Nuxt v3都将很快发布，并且它将在Vite中使用，所以我不确定我们是否还会继续关注它的工作方式。

或者，您可以深入研究HMR的配置，并设置一些条件来查看是否在<client-only>中更新了一些(嵌套的)块。

同时，可能没有快速和简单的方法来解决这个问题。

Answer 2

如果它的SSR存在多种原因，那么它会显示出黑色的页面。

原因之一是elements没有正确关闭。所以试着以适当的方式关闭它们。

这样做：

<user-location usage="siteHeader"></user-location> // also, added quotes to "siteHeader" - Usually it should be there

而不是：

<user-location usage="siteHeader" />

这可能会解决以下问题:)