Nuxt•2mo ago

Impossible to cache anything with Nuxt + Cloudflare

Hi! 🙂 I have a Nuxt app I host on Render, using npm run generate. I defined the homepage as pre-render

 routeRules: {
        '/': { prerender: true },
    },

 routeRules: {
        '/': { prerender: true },
    },

However, when I check the Cloudflare header cf-cache-status: it's always set as DYNAMIC instead of HIT I have a Cloudflare page rule forcing everything to be cachet, yet nothing is cached Some extra context: - I can't use npm run generate for this project - I have Nuxt Images installed and I need the image cached too to avoid using all my host's allowed bandwidth, but same issue. Even with image: {provider: 'ipxStatic'}, in the nuxt config I tried a bunch of things but nothing works. Is it simply not possible?

13 Replies

kapa.ai•2mo ago

Hi @Nico. 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, I can offer some insights into your issue with caching a Nuxt app on Cloudflare. However, it's important to note that the knowledge sources don't contain specific information about Cloudflare's caching behavior with Nuxt applications. 1. Prerendering: You've correctly set up prerendering for your homepage using routeRules. This should generate a static HTML file for the homepage at build time. However, prerendering alone doesn't guarantee caching on Cloudflare's end. 2. Build Command: You mentioned you can't use npm run generate for this project. Instead, you might want to try using the build command with the Cloudflare Pages preset. As suggested in the Cloudflare Pages documentation, you can use:

   nuxi build --preset=cloudflare_pages

   nuxi build --preset=cloudflare_pages

This command is designed to work with Cloudflare Pages and might help with caching issues. 3. Nitro Configuration: You might want to adjust your Nitro configuration in nuxt.config.ts to ensure proper prerendering:

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'],
       },
     },
   })

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'],
       },
     },
   })

This configuration tells Nitro to prerender the homepage and crawl links from it, which might help with caching. 4. Cloudflare Settings: While you mentioned setting up a page rule in Cloudflare to force caching, it's worth double-checking other Cloudflare settings. As mentioned in the CDN Proxy documentation, certain Cloudflare options can interfere with Nuxt applications. Ensure that options like "Auto Minify", "Rocket Loader™", and "Email Address Obfuscation" are disabled. 5. Image Caching: For Nuxt Image, you're using the correct configuration with image: {provider: 'ipxStatic'}. However, caching of these images might still depend on Cloudflare's settings and how the images are served. Given that you're seeing DYNAMIC instead of HIT in the Cloudflare headers, it suggests that Cloudflare is not caching the content as expected. This could be due to how the content is being served from your origin (Render in this case) or due to specific Cloudflare settings. Unfortunately, the knowledge sources don't provide enough information to definitively say why Cloudflare isn't caching your content or how to resolve this specific issue. You might need to investigate further by: 1. Checking the response headers from your origin server (Render) to ensure they're set correctly for caching. 2. Reviewing your Cloudflare Page Rules and caching settings in detail. 3. Considering reaching out to Cloudflare support for more specific guidance on caching Nuxt applications. If the issue persists, you might want to consult Cloudflare's documentation or support channels for more specific guidance on caching Nuxt applications on their platform. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@244171974790742018> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NicoOP•2mo ago

Adding '/images/**': { prerender: true, cache: { maxAge: 60 * 60 * 24 * 30 } }, into routeRules does not fix the issue either I give up, seems it's impossible to cache anything with Nuxt when not using npm run generate 😦 I tried every option I found, it all hit as DYNAMIC 😅 The cache on Cloudflare is already configured, the issue is that Nuxt doesn't seems to send the proper headers I tried putting some files from my /public folder (that hit as DYNAMIC) into R2, and with R2 they are properly set as HIT With Nuxt yes. But with non-nuxt stuff it works

NicoOP•2mo ago

NicoOP•2mo ago

It's set as cache all Already did, had the same result 😅 tried with https:// and without too Yes, that's what I'm trying to figure out It's not a static website tho, I build it with npm build And hosted on Render The app won't work with Cloudflare Pages, it uses MongoDb Trying the Cache thing now

NicoOP•2mo ago

Still shows up as dynamic 😅 Same with "ignore cache-control" it seems

NicoOP•2mo ago

CF doesn't really offer support I think, but will contact Render

MEE6•2mo ago

l422y has been warned

Reason: Posted an invite

NicoOP•2mo ago

Oh Will ask there too, thanks! And thanks for the help here! 🙂 Will try that too Not with the nuxt-mongoose package 😅 Oh damn!! It worked! 😄 The page rule was somehow preventing it from working Oh wait Oh nevermind I confused files from the CDN 🥲 Where can I change that?

NicoOP•2mo ago

Found this, changed the records, waiting a bit to see if it changes

NicoOP•2mo ago

Yes! No idea what changed

Gaming

Programming

Impossible to cache anything with Nuxt + Cloudflare

Did you find this page helpful?