N
Nuxt•2mo ago
peoray

Content: Articles not displaying on page load in Nuxt 4

There appears to be an issue on the deployed website, where the content articles do not display on page load until I navigate and return to the page, and then the content becomes visible. My site is deployed on Coolify, hosted on Hetzner. This is the URL: https://okikelabs.com/ This is the code to query for articles: 
// index.vue

const { data: posts } = await useAsyncData('home', () => {
  return queryCollection('blog')
    .where('draft', '=', 0)
    .select('slug', 'title', 'description', 'date', 'image', 'category')
    .order('date', 'DESC')
    .limit(2)
    .all()
})
// index.vue

const { data: posts } = await useAsyncData('home', () => {
  return queryCollection('blog')
    .where('draft', '=', 0)
    .select('slug', 'title', 'description', 'date', 'image', 'category')
    .order('date', 'DESC')
    .limit(2)
    .all()
})
// blog/index.vue

const { data: posts } = await useAsyncData('blog', () => {
  return queryCollection('blog')
    .where('draft', '=', 0)
    .select('slug', 'title', 'description', 'date', 'image', 'category')
    .order('date', 'DESC')
    .all()
})
// blog/index.vue

const { data: posts } = await useAsyncData('blog', () => {
  return queryCollection('blog')
    .where('draft', '=', 0)
    .select('slug', 'title', 'description', 'date', 'image', 'category')
    .order('date', 'DESC')
    .all()
})
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @peoray. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on your description and the provided code, it appears that your articles are not displaying on the initial page load but do appear after navigating away and returning. This is a common issue related to how data fetching and hydration work in Nuxt, especially when using composables like useAsyncData. Here are some possible causes and solutions based on the official Nuxt documentation and related sources: 1. Data Fetching Timing and SSR useAsyncData is designed to fetch data both on the server and client, and to hydrate the client with the server-fetched data. If your data is not available on the initial load, it could be due to: - The data not being fetched on the server (e.g., if you set server: false). - The data fetching function not resolving as expected during SSR. - Issues with the deployment environment not serving the latest content or payload. Make sure you are not using the server: false option unless you specifically want client-only fetching, as this will delay data fetching until after hydration, causing the data to be missing on the first render and only appear after navigation or manual refresh. By default, useAsyncData will fetch on both server and client, which is usually what you want for content pages Docs: useAsyncData. 2. Caching and Key Usage If you are using the same key ('home' or 'blog') for useAsyncData in multiple places, ensure that you are not running into issues with shared refs or caching. Nuxt 4 introduced changes where calls to useAsyncData or useFetch with the same key share the same data, error, and status refs. If you have conflicting options or fetch functions for the same key, this can cause unexpected behavior Singleton Data Fetching Layer. 3. Deployment and Static Payloads If your site is statically generated (SSG/prerendered), Nuxt will generate payloads at build time. If your content changes after deployment, the static payloads will not update until you redeploy. This can cause old or missing data to appear on initial load, but navigating client-side (SPA navigation) may trigger fresh fetches and show the latest data Nuxt website shows old data when refreshing a page that uses useFetch. 4. Recommendations - Ensure you are not using server: false or lazy: true unless you intend to handle loading states manually. - Make sure your deployment process is up-to-date and that your content is available at build time if using SSG. - If you need fresh data on every request (e.g., for dynamic content), consider using SSR or ISR (Incremental Static Regeneration) instead of full SSG. - Double-check that your queryCollection and useAsyncData usage is correct and that the data is available during SSR. Example (Correct Usage) 
<script setup lang="ts">
const { data: posts, status, error } = await useAsyncData('blog', () => {
  return queryCollection('blog')
    .where('draft', '=', 0)
    .select('slug', 'title', 'description', 'date', 'image', 'category')
    .order('date', 'DESC')
    .all()
})
</script>
<script setup lang="ts">
const { data: posts, status, error } = await useAsyncData('blog', () => {
  return queryCollection('blog')
    .where('draft', '=', 0)
    .select('slug', 'title', 'description', 'date', 'image', 'category')
    .order('date', 'DESC')
    .all()
})
</script>
This should work as expected if your content is available at build time or if you are using SSR Docs: queryCollection. If you are still experiencing issues, please check your deployment settings and ensure your content is being generated and served correctly. --- If you need more specific troubleshooting, please provide details about your Nuxt rendering mode (SSR, SSG, etc.) and any relevant configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@355872920062525451> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?