javascript - Nuxt js - SSR page duplicates components - Stack Overflow

admin管理员组

文章数量:1426105

I am generating a simple static page with a list of ponents and when I visit the page from another page it renders everything correctly. When I land directly on the page some of the ponents are rendered again after the footer. If I inspect the element I can see that they are the same elements but rendered again after the footer. Anyone has any idea on why this is happening?

<template>
  <div>
    <client-only>
      <MobileNav v-if="!isDesktop" />
      <Topnav v-if="isDesktop" />
      <div v-if="isDesktop">
        <Navbar active-page="consumers" />
      </div>
    </client-only>
    <Hero page="consumers" hero-text="for consumers" text-alignment="middle" />
    <AnchorNav :anchor-nav-items="anchorNavData" />

    <div id="for-consumers">
      <Highlight :data="highlight1" />
      <Highlight :data="highlight2" />
    </div>

    <LazyCardsWithModal :data="cardsList" />

    <LazyImageText :data="imageTextDirector" />

    <LazyKeyCards :data="keyCards" />

    <LazyAccordion :data="accordionData" />

    <LazyOrderedList :data="orderedList" />

    <LazyLogoCards :data="logoCards" :index="1" />
    <LazyLogoCards :data="logoCards2" :index="2" />

    <LazyCardsWithModal :data="productsCards" class="consumers-cards-2" />

    <Footer />

    <Modal
      v-show="this.$store.state.modal.active"
      :id="this.$store.state.modal.id"
    />
  </div>
</template>

This is what the page template looks like

I am generating a simple static page with a list of ponents and when I visit the page from another page it renders everything correctly. When I land directly on the page some of the ponents are rendered again after the footer. If I inspect the element I can see that they are the same elements but rendered again after the footer. Anyone has any idea on why this is happening?

<template>
  <div>
    <client-only>
      <MobileNav v-if="!isDesktop" />
      <Topnav v-if="isDesktop" />
      <div v-if="isDesktop">
        <Navbar active-page="consumers" />
      </div>
    </client-only>
    <Hero page="consumers" hero-text="for consumers" text-alignment="middle" />
    <AnchorNav :anchor-nav-items="anchorNavData" />

    <div id="for-consumers">
      <Highlight :data="highlight1" />
      <Highlight :data="highlight2" />
    </div>

    <LazyCardsWithModal :data="cardsList" />

    <LazyImageText :data="imageTextDirector" />

    <LazyKeyCards :data="keyCards" />

    <LazyAccordion :data="accordionData" />

    <LazyOrderedList :data="orderedList" />

    <LazyLogoCards :data="logoCards" :index="1" />
    <LazyLogoCards :data="logoCards2" :index="2" />

    <LazyCardsWithModal :data="productsCards" class="consumers-cards-2" />

    <Footer />

    <Modal
      v-show="this.$store.state.modal.active"
      :id="this.$store.state.modal.id"
    />
  </div>
</template>

This is what the page template looks like

• javascript
• vue.js
• nuxt.js

Share Improve this question Follow asked Feb 11, 2021 at 10:27 Alessio ChiffiAlessio Chiffi 14122 silver badges1212 bronze badges 9

• seems like <Modal v-show="this.$store.state.modal.active" :id="this.$store.state.modal.id" /> Model after the footer is causing this issue. Since you are using vuex state, if you refresh then the data wont be persisted. log the this.$store.state.modal.active and check it out. – Lohith Commented Feb 11, 2021 at 10:31
• 1 thanks for the ment @Lohith, I think it makes sense. How would you approach the modal? Shall I include it in the ponent and not at the page level? – Alessio Chiffi Commented Feb 11, 2021 at 10:37
• If the problem is really uncontrolled state data, then you can keep default value in data(){modalActive:false} , update the value with mapState, then refer modalActive in the template. – Lohith Commented Feb 11, 2021 at 10:40
• 1 I am removing the modal functionality for now to check if it still has the issue. I will keep you posted but looks like it's related to the state data as you mentioned. One more thing I have noticed is that it works fine when I run it locally and the issue is only when it gets generated – Alessio Chiffi Commented Feb 11, 2021 at 11:00
• 1 hey @Lohith confirming that was a vuex issue. I've spotted the ponent and wrapped it with a client-only tag and it fixed the issue. thx for your help – Alessio Chiffi Commented Feb 12, 2021 at 9:16

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 6

Issue is with vuex state management when running it as static site. which works proper when running in the develop mode.

Ways to overe this is.

1. avoiding the direct call to state variables in the template.
2. making use of client-only tag which helps to avoid dom-mismatch issue.

本文标签： javascriptNuxt jsSSR page duplicates componentsStack Overflow