N
Nuxt•2mo ago
EGGSY

Nuxt Content didn't deploy to Netlify, static generation broke my server routes, I fixed all tho.

Hey! I've been working for a while to move my old website from Nuxt 2 to Nuxt 3 completely, rewriting every component and reworking on all the modules, scripts, functions I have. I recently completed the move and everything seemed to be working fine until I deployed my app on Netlify... At first I tried a static generation but then I realized I should be using a normal build as Nitro can deploy to Netlify quite well. But then I realized the posts won't load during SSR for some reason. I couldn't reproduce on my local machine when running the project in dev mode but then I decided to set { server: false } in my useAsyncData and realized it doesn't work... It works when I move from another page to that page but it doesn't work when I refresh the page, so I think it has something to do with Netlfiy and SSR in Nuxt. I couldn't find a related issue on GitHub issues, nor here. Maybe I missed it but could anyone point it out to me? My code is available on GitHub: https://github.com/eggsy/website/blob/main/pages/blog/index.vue#L9 And the page is online at: https://eggsy.xyz/blog
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @EGGSY. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources and your question, it appears that you're experiencing an issue with useAsyncData and Nuxt Content's queryContent when using { server: false } on Netlify. While the exact scenario you're describing isn't directly addressed in the provided knowledge sources, I can offer some insights and potential solutions based on related information. 1. Server-side rendering (SSR) issue: The problem you're experiencing where the posts don't load during SSR on Netlify, but work fine in development mode, could be related to how Netlify handles SSR for Nuxt applications. This might be causing the useAsyncData call to behave differently in production. 2. { server: false } behavior: Setting { server: false } in useAsyncData means that the data fetching will only occur on the client side. This explains why it works when navigating between pages (client-side navigation) but not on a page refresh (server-side rendering). 3. Potential solutions: a. Remove { server: false }: Try removing the { server: false } option from your useAsyncData call. This will allow the data to be fetched on both the server and client sides. b. Use useLazyAsyncData: As mentioned in the useAsyncData documentation, you can use useLazyAsyncData to have the same behavior as lazy: true with useAsyncData. This might help in your case: 
   const { data: posts } = await useLazyAsyncData('blog-posts', () =>
     queryContent('blog').sort({ date: -1 }).find()
   )
   
   const { data: posts } = await useLazyAsyncData('blog-posts', () =>
     queryContent('blog').sort({ date: -1 }).find()
   )
c. Add a unique key: As suggested in a Stack Overflow answer, adding a unique key to the useFetch options (which is similar to useAsyncData) might help: 
   const { data: posts } = await useAsyncData(
     'blog-posts',
     () => queryContent('blog').sort({ date: -1 }).find(),
     { key: Date.now().toString() }
   )
   
   const { data: posts } = await useAsyncData(
     'blog-posts',
     () => queryContent('blog').sort({ date: -1 }).find(),
     { key: Date.now().toString() }
   )
This forces a re-fetch on each call, preventing caching issues. 4. Netlify configuration: Ensure that your Netlify configuration is correct for a Nuxt 3 SSR application. You might need to adjust your build settings or Netlify functions to properly handle SSR requests. 5. Nuxt Content configuration: Double-check your Nuxt Content configuration to ensure it's set up correctly for production use on Netlify. If these suggestions don't resolve the issue, you might want to create a minimal reproduction of the problem and open an issue on the Nuxt GitHub repository, as this could be a specific edge case not covered in the current documentation or known issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@162969778699501569> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
EGGSY
EGGSYOP•2mo ago
I had to move to static generation and had to move my server API route to a Netlify function. It's all good now, except I wish I was able to use a node-server. Also, I was using the nitro:build:public-assets build hook to generate OG images using Satori for my blog posts (see code here). It used to create a folder in the .output/public directory and everything worked fine, the images were accessible in a normal build and a static build without a preset. But when I deployed on Netlify, it didn't really copy the generated folder to dist directory which made images unavailable on production. This seems like a bug, maybe you should look into this?

Did you find this page helpful?