Nuxt•2w ago

Exceeded CPU on Cloudflare Pages

So I have this tutorial app on Cloudflare Pages, with a few (like 10) markdown files in /content directory. When you go to a content page, e.g. myapp.pages.dev/about-us, it will first render Not found (data is also empty from console.log). Then after reloaded the page, it will render data content. But if you reload a couple times, it breaks. From Cloudflare real-time logs, it shows ExceededCpu.

// nuxt.config.ts
...
  content: {
    database: {
      type: 'd1',
      bindingName: 'DB',
    },
  },
...

// nuxt.config.ts
...
  content: {
    database: {
      type: 'd1',
      bindingName: 'DB',
    },
  },
...

// content.config.ts
export default defineContentConfig({
  collections: {
    // Because I'm using @nuxtjs/i18n
    a___en: defineCollection({
      source: 'a/*.md',
      type: 'page',
      schema: z.object({
        slug: z.string(),
        author: z.string(),
        publishedAt: z.date().nullish(),
      }),
    }),
    authors: defineCollection({
      source: 'authors/*.yml',
      type: 'data',
      schema: z.object({
        ...
      }),
    }),
    pages: defineCollection({
      source: {
        include: '**/*.md',
        exclude: ['a/*.md'],
      },
      type: 'page',
    }),
  },
})

// content.config.ts
export default defineContentConfig({
  collections: {
    // Because I'm using @nuxtjs/i18n
    a___en: defineCollection({
      source: 'a/*.md',
      type: 'page',
      schema: z.object({
        slug: z.string(),
        author: z.string(),
        publishedAt: z.date().nullish(),
      }),
    }),
    authors: defineCollection({
      source: 'authors/*.yml',
      type: 'data',
      schema: z.object({
        ...
      }),
    }),
    pages: defineCollection({
      source: {
        include: '**/*.md',
        exclude: ['a/*.md'],
      },
      type: 'page',
    }),
  },
})

<!-- app/pages/about-us.vue -->
<script setup lang="ts">
const route = useRoute()
// route.path is `/about-us` as default and for English
const { data } = await useAsyncData(route.path, () =>
  queryCollection('pages').path(route.path).first(),
)

useSeoMeta({
  title: data.value?.title,
  description: data.value?.description,
})
</script>

<template>
  <main>
    <article>
      <ContentRenderer
        v-if="data"
        :value="data"
      />
      <div v-else>
        <p>Not found</p>
      </div>
    </article>
  </main>
</template>

<!-- app/pages/about-us.vue -->
<script setup lang="ts">
const route = useRoute()
// route.path is `/about-us` as default and for English
const { data } = await useAsyncData(route.path, () =>
  queryCollection('pages').path(route.path).first(),
)

useSeoMeta({
  title: data.value?.title,
  description: data.value?.description,
})
</script>

<template>
  <main>
    <article>
      <ContentRenderer
        v-if="data"
        :value="data"
      />
      <div v-else>
        <p>Not found</p>
      </div>
    </article>
  </main>
</template>

"@nuxt/content": "3.1.0"
"@nuxtjs/i18n": "9.2.0"
"nuxt": "^3.15.4"
"nuxt-csurf": "1.6.5"
"vue": "^3.5.13"
"vue-router": "^4.5.0"
"@cloudflare/workers-types": "^4.20250204.0"
"nitro-cloudflare-dev": "^0.2.1"
"wrangler": "^3.107.3"
"packageManager": "[email protected]"

"@nuxt/content": "3.1.0"
"@nuxtjs/i18n": "9.2.0"
"nuxt": "^3.15.4"
"nuxt-csurf": "1.6.5"
"vue": "^3.5.13"
"vue-router": "^4.5.0"
"@cloudflare/workers-types": "^4.20250204.0"
"nitro-cloudflare-dev": "^0.2.1"
"wrangler": "^3.107.3"
"packageManager": "[email protected]"

4 Replies

kapa.ai•2w ago

Hi @swix. 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 your question and the knowledge sources available, it appears you're experiencing issues with Nuxt Content on Cloudflare Pages. Let's address the problems you're facing: 1. Initial "Not found" rendering: The issue where the page initially renders "Not found" and then shows content after a reload is likely related to how the content is being fetched and rendered. This could be due to the asynchronous nature of content loading or potential issues with the serverless environment. 2. CPU Exceeded error: The "ExceededCpu" error you're encountering on Cloudflare Pages after multiple reloads is concerning. This suggests that the content querying or rendering process is consuming more CPU resources than allowed by Cloudflare Pages. To address these issues, consider the following: 1. Optimize your content queries: Make sure you're not performing unnecessary or overly complex queries. The queryCollection('pages').path(route.path).first() approach seems reasonable, but ensure you're not accidentally querying more data than needed. 2. Use proper caching: Implement caching strategies to reduce the load on your serverless functions. Cloudflare Pages supports various caching mechanisms that can help reduce CPU usage. 3. Pre-render static pages: For content that doesn't change frequently, consider pre-rendering pages at build time. This can significantly reduce the load on your serverless functions. You can use the routeRules option in your nuxt.config.ts to pre-render specific routes:

export default defineNuxtConfig({
  routeRules: {
    '/about-us': { prerender: true }
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/about-us': { prerender: true }
  }
})

4. Optimize your database usage: Since you're using Cloudflare D1 as your database (as indicated by your nuxt.config.ts), make sure you're following best practices for D1 usage. Cloudflare D1 has specific limitations and performance characteristics that you should be aware of. 5. Update dependencies: Your Nuxt Content version (3.1.0) is not the latest. Consider updating to the latest version as it may include performance improvements and bug fixes. 6. Monitor and debug: Use Cloudflare's monitoring tools to identify which specific operations are causing the CPU to exceed its limits. This can help you pinpoint and optimize the problematic areas of your application. If these steps don't resolve your issues, you may need to consider architectural changes, such as moving to a different hosting platform or restructuring your content delivery approach. For more detailed information on deploying Nuxt Content to serverless environments like Cloudflare Pages, you can refer to the Deploy with Serverless documentation. Remember, serverless environments like Cloudflare Pages have specific constraints and best practices. Ensuring your application is optimized for this environment is crucial for smooth operation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

manniL•2w ago

Do you have the paid workers plan?

swixOP•2w ago

No. I'm on free plan. Do I need paid plan to use @nuxt/content?

Gaming

Programming

Exceeded CPU on Cloudflare Pages

Did you find this page helpful?