Page blanking after briefly showing data
Hi all,
I've got what feels like something strange happening. When I render data on a page with a single
div all work fine, however if I try and add a nested div the data content on the page shows on the page very briefly (maybe 1 or 2 seconds) before showing only the basic text title on the page.
At this stage, there is no root template content in app.vue except the default
The data comes from Directus using nuxt-directus plugin but I dont see that this is the issue as it works when my pages/index.vue has only 1 div
Working page:
Note: fetchedGenres is defined in <script setup lang="ts"> but excluded in the snippet below due to discord post length limitations
Adding a div anywhere causes the error, both with and without tailwind classes
any help would be very much appreciated4 Replies
Hi @Dex_Vinyl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
This sounds like a hydration mismatch: the server initially renders the full list, but on the client something different is rendered, so Vue/Nuxt discards the initial DOM and you end up with only part of the content.
In the provided knowledge sources, similar “page briefly shows, then disappears / changes” issues are caused by:
- SSR and client doing different data calls or logic (e.g. confirm page that hits an API twice, second time returning different data, leading to a mismatch). [hydration mismatch confirm]
- Caching of fetch calls (e.g.
- Caching of fetch calls (e.g.
useFetch returning stale data until a key is changed). [useFetch cache]
However, there’s no direct reference to a case where adding a wrapping <div> alone changes the behaviour like you describe, and nothing in the docs provided for lazy hydration, layout transitions, or other PRs matches this pattern.
Given that:
- You are using a 3rd‑party module (nuxt-directus), whose behaviour is not covered in the sources.
- The issue appears only when modifying the template structure, which could subtly change how the data/composables are used.
The knowledge sources do not contain enough information to explain exactly why your page blanks when adding a div, nor to provide a concrete, source‑backed fix.
From the patterns in the sources, the most likely direction (but not confirmed by them) is to:
- Check whether your Directus query or composable is run both on server and client and whether it can return different results between the two (like the confirm‑key example). [hydration mismatch confirm]
- If you suspect SSR vs CSR differences, you can test by disabling SSR for that route in nuxt.config (ssr: false in routeRules), as done in the confirm‑email workaround, and see if the issue disappears. [hydration mismatch confirm]
- If you’re using useFetch or a similar composable under the hood, ensure it’s not serving cached/stale data; in similar situations adding a unique key to the fetch options forces a fresh request. [useFetch cache]
But beyond that, the provided sources don’t give a precise, documented cause or solution for this specific behaviour with nuxt-directus and adding a <div>.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@389695707877212171> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Setting
ssr:false as suggested has made no change, after stopping and starting the dev serverare you making an api call to fetch the data?