nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.
https://nuxtseo.com/og-image
400 stars 25 forks source link

Cloudflare Pages - Too many _route.json entries #77

Closed AleeeKoi closed 2 weeks ago

AleeeKoi commented 1 year ago

Clear and concise description of the problem

If the page path is very long (in my case i'm using some keyword in url for SEO), cloudflare pages may deny the distribution

these are the official CF limits:

source: https://developers.cloudflare.com/pages/platform/functions/routing/#limits

Suggested solution

My current solution is replace all path form the og image, replacing them with an universal unique version:

/*/__og_image__/og.png this rule will exclude from the worker everything that matches (in this case if it ends with)

import { promises } from 'node:fs'
import { resolve } from 'pathe'

export default defineNuxtConfig({
  ...
  hooks: {
    'nitro:build:before': (nitro) => {

      if (nitro.options.dev) { return }

      nitro.hooks.addHooks({
        compiled: async (nitro) => {
          const routesPath = resolve(nitro.options.output.publicDir, "_routes.json")
          const routes: { version: number; include: string[]; exclude: string[] } = await promises
            .readFile(routesPath)
            .then((buffer) => JSON.parse(buffer.toString()))

          routes.exclude = routes.exclude.filter(path => !path.includes('__og_image__'))
          routes.exclude.push('/*/__og_image__/og.png')

          await promises
            .writeFile(routesPath, JSON.stringify(routes, void 0, 2))
        }
      })
    }
  },
  nitro: {
    preset: "cloudflare-pages",
    prerender: {
      crawlLinks: true,
      routes: [
        '/',
      ]
    }
  }
})

Alternative

No response

Additional context

No response