Nuxt.js错误：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配

Question

如何在Nuxt中修复此错误？提示，我一直在努力使它工作几个小时。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. (repeated 9 times)
value @ vendors.app.js:12923
value @ vendors.app.js:12923
value @ vendors.app.js:12923
(anonymous) @ vendors.app.js:12923
(anonymous) @ commons.app.js:20499
setTimeout (async)
(anonymous) @ commons.app.js:20482
./node_modules/vue/dist/vue.runtime.esm.js @ commons.app.js:20512
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
(anonymous) @ app.js:2069
./.nuxt/client.js @ app.js:3157
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
0 @ app.js:19627
__webpack_require__ @ runtime.js:791
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
vendors.app.js:12923 info You are running Vue in development mode.

当我从AsyncData（）调用它时发生：

      context.store.dispatch('retrievePosts', {'feedUrl': '/' + process.env.backendPublicApiPrefix + '/posts', 'selection': 'feed'} );

在我的Vuex商店中：

export const actions = {

  async retrievePosts(context, { feedUrl, selection }) {
    context.commit("setLoading");
    context.commit("incrementPage");
    try {

      // only make an ajax call if we are not on or past the last page of posts
      if (!context.state.lastPage || (context.state.lastPage && (context.state.page <= context.state.lastPage))) {

        let finalUrl = feedUrl + '?page=' + context.state.page;

        finalUrl += '&viewBy=' + 'feed';
        const { data, status } = await this.$axios.get(finalUrl);
        if (!data) {
          throw ({ statusCode: 404, message: 'Something went wrong while retrieving the post feed. The link you clicked on may be broken or no longer exist.' });
        } else {
          if (data.last_page) {
            context.commit("setLastPage", data.last_page);
          }
          if (data.data && (data.data.length > 0)) {
            context.commit("appendPosts", data.data);
          } else {
            if (state.page < 1) {
              // context.state.error = "response.data.Error";
            }
          }
        }
      }

    } catch (e) {
      throw ({ statusCode: 404, message: 'Something went wrong while retrieving the post feed. The link you clicked on may be broken or no longer exist.' });
    }
    context.commit("unsetLoading");
  },
};


export const mutations = {
  setLoading(state) {
    state.loading = true;
  },
  unsetLoading(state) {
    state.loading = false;
  },
  setLastPage(state, pageId) {
    state.lastPage = pageId;
  },
  resetPostFeed(state) {
    console.log('resetPostFeed');
    state.posts = [];
    state.page = 0;
    state.lastPage = null;
  },
  setPostFeed(state, { postFeedSettings, posts }) {
    state.posts = posts;
  },
  setPage(state, pageId) {
    state.page = pageId;
  },
  incrementPage(state) {
    state.page++;
  },
  appendPosts(state, newPosts) {
    state.posts = state.posts.concat(newPosts);
  },
};

在我的模板中：

        <div v-for="post in postsFromStore">
          <news-feed-content-card
            :postObj="post"
            :authorObj="post.user"
          />
        </div>

请注意，如果我不从asyncData（）调用此方法，则一切正常，但对于SSR，我需要这样做：

context.store.dispatch('retrievePosts', {'feedUrl': '/' + process.env.backendPublicApiPrefix + '/posts', 'selection': 'feed'} );

我该如何解决这个问题？我觉得这里有些东西我想念，但我不能完全动手。

编辑：不建议使用no-ssr标记，并将其替换为使用仅隐藏错误，并不能完全解决问题。

我将其范围缩小到此：

                <!-- this causes an error: The client-side rendered virtual DOM tree is not matching server-rendered content. -->
                <client-only>
                  <p class="tw-text-xs tw-pt-1 tw-text-gray-600" v-html="authorObj.bioHeadline"></p>
                </client-only>

authorObj.bioHeadline具有HTML像：Founder at <a href='https://www.example.com' target='_blank'>Domain</a>

并且我想将其包含在SSR模式中（删除仅客户端标签），但是会导致该错误：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. (repeated 9 times)

Answer 1

想通了。

authorObj.bioHeadline有一个链接，并且由于下面的代码，我有一个嵌套的链接。...我想这是不允许的。

              <nuxt-link :to="getAuthorUrl">
                <p class="tw-font-bold kb-subtle-link tw-text-sm md:tw-text-lg">{{ authorObj.fullName }}</p>
                  <p class="tw-text-xs tw-pt-1 tw-text-gray-600" v-html="authorObj.bioHeadline"></p>
              </nuxt-link>

生成的HTML：

<a href="/" class=""><p class="tw-font-bold kb-subtle-link tw-text-sm md:tw-text-lg">kp</p> <p class="tw-text-xs tw-pt-1 tw-text-gray-600">Founder at <a href="https://www.example.com" target="_blank">Domain</a></p></a>