swix Posts - Answer Overflow

swix

Explore posts from servers

•Created by swix on 2/10/2025 in #❓・help

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]"

7 replies

Gaming

Programming