Nuxt | Nuxt generates double components

Asked Aug 26 '22 at 20:43

Active Aug 26 '22 at 20:59

Viewed 433 times

I'm facing an issue with nuxt 3 where when I deployed my website using SSG, the first route which is the index route loaded 2 components so for example if I had index.vue like this

<template>
<Component1 />
<Component2 />
</template>

it would show like this

<template>
<Component1 />
<Component1 />
<Component2 />
<Component2 />
</template>

and this only applies to the main route (/) and when I switch to any other route then come back the problem seems to be fixed but when I refresh it always generates double components.

edited Aug 26 '22 at 20:59

kissu

40,416
14
65
133

asked Aug 26 '22 at 20:43

Termin

Hydration issue maybe? Did you check the github issues? Sounds like not a so uncommon issue so far. – kissu Aug 26 '22 at 20:59
@kissu what do you mean by hydration? – Termin Aug 26 '22 at 21:04
Basically this: https://stackoverflow.com/a/67978474/8816585 It's the fact that your template from server side is "merged" on the client-side. Google for it. – kissu Aug 26 '22 at 22:04
I'm not using server-side rendering, I'm using SSG, @kissu – Termin Aug 27 '22 at 17:27
Still, the same applies. It's "SSR" in the generic way aka, everything that is basically not an SPA so SSR, SSG, ISR, Edge etc... – kissu Aug 27 '22 at 17:51
I didn't see any of these warns, the only warn I see is Hydration completed but contains mismatches. – Termin Aug 27 '22 at 18:03
Maybe the wording has changed a bit but it's exactly the same thing/reasons/solutions as what I've shared. – kissu Aug 27 '22 at 18:04
Well, I've tried all of the solutions you said, sadly none worked. – Termin Aug 27 '22 at 18:11
Some more context is then needed IMO. – kissu Aug 27 '22 at 22:34

Nuxt | Nuxt generates double components

0 Answers0