This Site Was Broken and I Didn't Even Realized It

Posted in Engineering

I think it was my first time, sharing a direct link to a blog post on this website. I posted it on social media, and someone commented that they can’t open the link.

It showed up for a moment and then went blank, iOS16

Of course the word iOS16 caught my attention. I thought it was just a cross-browser issue and I never really tested it thoroughly on mobile. I tried opening the link on my phone and yep, it was broken.

What Went Wrong?

This website is built with Nuxt on Netlify, and I use nuxt generate to generate the static files. I chose this approach because I want to have a fast website, and I don’t want to deal with server side rendering. Just a simple git based workflow to write post and push to publish.

Maybe it was a misconfigured static generation?

I checked the nuxt.config.js and everything seems fine. I tried to generate the static files locally and it was generated just fine. Nuxt told me that the .output/public directory is ready to be published so I thought maybe I should setup Netlify to use that directory instead of the dist directory.

So I went ahead and did that, but Netlify complained with non-zero exit code. I checked the deployment logs and it seems to be fine. There were some warnings, but I doubt it would emit non-zero exit code. I tried to deploy it again after removing all the warnings, but it still failed.

It was a bit frustrating, but then I clicked on the next deployment section log and there it was. The exit code 2 means that Netlify couldn’t find the .output/public directory. Maybe it’s cleaned up after the build process?

Maybe Nuxt didn’t properly generate the static files?

I tried to generate the static files locally again and this time I checked the .output directory. It was there, but there were some posts missing. Nuxt seems to be checking for exactly .md files, and I have some .html.md files that was an export from my Medium posts.

So I wrote a script to rename all the .html.md files to .md and tried to generate the static files again. This time it was generated properly. I pushed the changes to the repository, set the published directory to dist and Netlify was able to deploy it successfully.

So I opened the website, click on the blogpost, and it loaded just fine. But after I hit refresh, it went blank again.

Console says 404 trying to load content

Nuxt generates the API content as a static JSON file, and it seems that the API content was not generated properly.

Why would Nuxt try to reload the content again though? I specifically asked for it to generate fully fledged static files. I checked the nuxt.config.js again and nothing seems to be wrong.

The useAsyncData

After browsing the Nuxt documentation, I found out a mention of useAsyncData which I didn’t use at all. I thought it was just to fetch data from an external API, but it seems that I should use it as well to fetch the content from the Nuxt Content API.

const contentData = await useAsyncData('content',()=>{
  return queryContent().where({_path: currentPath}).findOne();
})

So I refactored the code to use useAsyncData and tried to generate the static files again. This time it was generated properly. I pushed the changes to the repository, let Netlify deploy it and it was deployed successfully.

Open the website, click on the blogpost and it loaded just fine. Hit refresh, and it was still there.

I guess that’s it.

Conclusion

For any kind of async data on a Nuxt application, internally or externally, you should use useAsyncData to fetch the data.

Also, make sure to test your site thoroughly on different devices and browsers. It worked just fine when I opened the main page and navigate to the blogpost, but it was broken when I opened the blogpost directly or did a refresh.