Nuxt•2y ago

SSR Issue: Empty Data on Page Reload with Nuxt 3 and Strapi useAsyncData

Hello everyone! I'm having an issue with fetching content from Strapi using useAsyncData from Nuxt 3 for server-side rendering. When I refresh the page, the data is empty, but it works fine when I navigate to another page and come back. The issue occurs only on page reloads. Here's my code snippet: Does anyone have any idea why this doesn't work as expected on page reloads? Any suggestions or insights would be greatly appreciated! Thanks in advance.

3 Replies

Unknown User•2y ago

Message Not Public

XuloOP•2y ago

Yes I got some hydration issues, but these where because I was using a div inside a p tag. Here was the issue https://discord.com/channels/473401852243869706/1103357337793736785/1110685212263845978 Now all my hydration problems are fixed, but I’m still facing this issue. I tried using useFetch and noticed it does work with online production Strapi but not when fetching localhost:1337 I have posted an issue on Strapi server here https://discord.com/channels/811989166782021633/1110281756227154061/1110811555177697342

tjventurini•9mo ago

Just had a similar issue. In my case the problem was, that I was using docker and the nuxt container was not able to connect to the strapi container. Here is my nuxt config:

  strapi: {
    url: 'http://strapi:1337',
    prefix: '/api',
    version: 'v4',
  },
  runtimeConfig: {
    public: {
      strapi: {
        url: process.env.STRAPI_URL,
      },
    },
  },

  strapi: {
    url: 'http://strapi:1337',
    prefix: '/api',
    version: 'v4',
  },
  runtimeConfig: {
    public: {
      strapi: {
        url: process.env.STRAPI_URL,
      },
    },
  },

Gaming

Programming

SSR Issue: Empty Data on Page Reload with Nuxt 3 and Strapi useAsyncData