Nuxt.js error: The client-side rendered virtual DOM tree is not matching server-rendered content

问题

How can I fix this error in Nuxt? A tip would be appreciated, I've been trying to get this to work for a few hours.


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

It happens when I call this from AsyncData():

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

In my Vuex store:

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);
  },
};

In my template:

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

Note that everyting works fine if I don't call this from asyncData(), but I need to do so for SSR:

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

How can I solve this problem? I feel like there's something I am missing here, but I can't quite put a finger on it.

EDIT: The no-ssr tag is deprecated and being replaced with < client-only > Using < client-only > that just hides the error, doesnt quite fix it.

I narrowed it down to this:

                <!-- 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 has html like: Founder at <a href='https://www.example.com' target='_blank'>Domain</a>

and I want to include it in SSR mode (remove the client-only tag), but it results in that error:

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

回答1:

Figured it out.

authorObj.bioHeadline has a link, and because of the code below I had a nested link....which I guess isn't allowed.

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

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

来源：https://stackoverflow.com/questions/58251532/nuxt-js-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server

标签

Vue.js

vuejs2

vuex

nuxt.js