nuxt
<ContentDoc> rendering twice on server
Environment
Nuxt project info: 14:21:10
- Operating System:
Darwin - Node Version:
v18.2.0 - Nuxt Version:
3.0.0-rc.4 - Package Manager:
[email protected] - Builder:
vite - User Config:
modules,colorMode,content - Runtime Modules:
@nuxt/[email protected],@nuxtjs/[email protected],@nuxtjs/[email protected] - Build Modules:
-
Reproduction
https://github.com/jhull/narrative-test
Public repo, which is essentially a direct copy of contentwind with just a switch to slots in the [...slug].vue page.
Describe the bug
Direct links within the site work great (example live site], clicking on nav links works as expected.
But if you refresh the other links (grab static page) - content is rendered twice.
(unless I'm totally misunderstanding how to use slots in this instance...)
Additional context
No response
Logs
No response
I checked your repo and the only duplicate thing there is the content title. If you want to create a custom design for the title and render it outside of the content renderer, you should remove first H1 from your contents and move the title into frontmatter
---
+ title: Narrative Test
+ icon: carbon:sailboat-coastal
navTitle: 'Home'
---
- # Narrative Test :icon{name="carbon:sailboat-coastal" class="text-indigo-400"}
Thank you for your help - no idea why the static page (direct link) is now not duplicated...
[EDIT]: I just republished the site on Netlify - and the duplicated info is there now: about
This is for this about file from contentwind basic:
And here is the [...slug].vue:
<ContentDoc v-slot="{ doc }"
class="prose prose-gray dark:prose-invert max-w-none">
<!-- <BannerImage v-if="doc.banner_slug" :banner_slug="doc.banner_slug" class="mb-8" /> -->
<div class="mb-8 prose prose-gray dark:prose-invert max-w-none">
<h1>{{ doc.title }}</h1>
<p class="-mt-6 text-gray-400">{{ doc.tldr }}</p>
</div>
<ContentRenderer class="prose prose-gray dark:prose-invert max-w-none" :value="doc" />
</ContentDoc>
Which is the same component I used for my company's site: https://narrativefirst.com - where hundreds of articles are now duplicated when accessed through direct links (go to any page, and then refresh)
Changed the title to hopefully reflect more of the issue here. It's been 3 weeks with no real response, and I'm not sure if I'm missing something easy or this is a legitimate issue.
Pages look fine on client, but on server are rendered twice.
Tried upgrading to DocumentDriven in the hopes it would magically fix things but it didn't.
Sadly still I cannot reproduce it with your reproduction links, I can see in Netlify that it renders twice, but I could not reproduce it myself.
Also if you see the source of your Netlify reproduction
view-source:https://62bbb24a97b313494997dd4d--gregarious-marigold-a24b91.netlify.app/about/
you can see it rendered content one time only. So the issue is client hydration.
Brilliant! Thank you so much for offering some guidance. So this is a Netlify issue then, yes?
You can close this out. I gave up and switched to Document Driven mode and now my life is infinitely better (worked first time).
It's not a Netlify issue. It even happened on localhost. I think it's related to about.md being treated as index.md. That issue is still pending. #1237
If that's the case, you can try using the edge channel version and check if the problem persists.
Or are you already using this version already?
Oh--to be clear, I just gave up using this approach and instead upgraded and changed everything over to DocumentDriven mode and it all worked great first time.
Not sure how helpful this is but I had to revert Nuxt to "nuxt": "3.0.0-rc.3" to resolve this issue on my end for the Netlify deploy. That's with"@nuxt/content": "^2.0.1"
