Using netlify edge functions with netlify_edge nitro preset

[dbzx10299]

I have a site hosted on netlify and I am using Nuxt 3. I was using the npm run generate command and I had in my nuxt file structure a netlify directory with edge functions (/netlify/edge-functions/foo.js).

I wanted to move away from SSG and start using SWR and leveraging the cache so rather than pre-rendering the entire site I set the netlify build command to npm run build. This requires the nitro config to be set a bit differently as documented in the netlify docs for using nuxt on netlify:

Nuxt 3 introduces new rendering options, such as server-side rendering (SSR). SSR is supported when you deploy Nuxt 3 to Netlify, but requires configuration when you use Edge Functions.

In my nuxt.config.ts file I set this up

export default defineNuxtConfig({
  nitro: {
    preset: 'netlify_edge'
  }
})

Now when I run this edge function from /netlify/edge-functions/foo.js

export default async (req, context) => {
  return Response.json({ msg: 'foo' })
}

export const config = {
  path: '/foo'
}

I get an error

GET https://my-site.com/foo 404 (Not Found)

It seems this is happening because the nuxt pages directory is scanned and the pages are being served. If there would be a page bar.vue (/pages/bar.vue)

<script setup>

</script>

<template>
  <h1>bar page</h1>
</template>

It appears that this page is being served from the edge which is pretty cool. But how can I set this up that my edge functions in /netlify/edge-functions/foo.js still work?

Another interesting thing is that when the build command runs on netlify, it shows that the edge functions are bundled. When the nitro netlify_edge preset is used though, trying to fetch foo fails since it isn‘t a page. Also running netlify dev works as I would expect, so something here must be happening with the nitro output that I don't understand.

I can see here in the source code what is going on, but I don't get why I can't hit the edge function as an endpoint.

export const netlifyEdge = defineNitroPreset({
  extends: "base-worker",
  entry: "#internal/nitro/entries/netlify-edge",
  exportConditions: ["netlify"],
  output: {
    serverDir: "{{ rootDir }}/.netlify/edge-functions/server",
    publicDir: "{{ rootDir }}/dist",
  },
  rollupConfig: {
    output: {
      entryFileNames: "server.js",
      format: "esm",
    },
  },
  unenv: {
    polyfill: ["#internal/nitro/polyfill/deno-env"],
  },
  hooks: {
    "rollup:before": (nitro: Nitro) => {
      deprecateSWR(nitro);
    },
    async compiled(nitro: Nitro) {
      await writeHeaders(nitro);
      await writeRedirects(nitro);

      // https://docs.netlify.com/edge-functions/create-integration/
      const manifest = {
        version: 1,
        functions: [
          {
            path: "/*",
            name: "nitro server handler",
            function: "server",
            generator: `${nitroPkg.name}@${nitroPkg.version}`,
          },
        ],
      };
      const manifestPath = join(
        nitro.options.rootDir,
        ".netlify/edge-functions/manifest.json"
      );
      await fsp.mkdir(dirname(manifestPath), { recursive: true });
      await fsp.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
    },
  },
})

[serhalp]

Hi @dbzx10299!

Next time, you might have better luck asking this type of question over in the Netlify Support Forums. I just happened to be passing by here and saw this question!

You can see in the code you pasted that Netlify's generated edge function runs on path: '/*'. Since framework-generated functions run first and the request chain ends as soon as an edge function returns a response, your edge function never gets invoked.

What is your use case for your edge function that returns a response when using edge SSR?

[dbzx10299]

Hi @serhalp , I actually did post this question here on the netlify support forums but I wasn't sure if it was the right place since this is a framework specific question.

My question is that I think it's super cool that the pages get rendered on the edge and I would like to leverage that, but if I have a nuxt.config.ts file:

export default defineNuxtConfig({
  nitro: {
    preset: 'netlify_edge'
  }
})

with the following folder structure

pages/
└── foo.vue
netlify/
└── edge-functions/
    └── add_item.js

There may be a case I want the /foo page to be SSR rendered on netlify's cdn at the edge, but I also want to hit an endpoint with fetch that returns some kind of json object, for example a wishlist that extends shopify customer metafields. In the below example I have to use shopify's admin api, and I might have quite a large json object that gets sent back.

<script setup>
async function addWishlistItem() {
  // use the add_item edge function here
  const { data } = await fetch('/add_item', /* ... */)
}
</script>

<template>
  <h1>wishlist</h1>
  <button @click="addWishlistItem">add item</button>
</template>