Nuxt ISR and ESR on netlify

Support
, ,
1

In nuxt 3 the docs on edge side rendering state that

When a request for a page is made, instead of going all the way to the original server, it’s intercepted by the nearest edge server. This server generates the HTML for the page and sends it back to the user. This process minimizes the physical distance the data has to travel, reducing latency and loading the page faster .

It goes on to say that

I am confused because in the route rules part of the page, it shows the following code

export default defineNuxtConfig({
  routeRules: {
    // Products page generated on demand, revalidates in background, cached until API response changes
    '/products': { swr: true },
    // Product page generated on demand, revalidates in background, cached for 1 hour (3600 seconds)
    '/products/**': { swr: 3600 },
    // Blog posts page generated on demand, revalidates in background, cached on CDN for 1 hour (3600 seconds)
    '/blog': { isr: 3600 },
    // Blog post page generated on demand once until next deployment, cached on CDN
    '/blog/**': { isr: true },
  }
})

I don’t understand the difference between using ISR and ESR here. What is confusing me more is that the nitro docs give three different presets for the netlify provider

For example, the netlify_edge preset states:

Netlify Edge Functions use Deno and the powerful V8 JavaScript runtime to let you run globally distributed functions for the fastest possible response times.

and the netlify_builder preset states that

On-demand Builders are serverless functions used to generate web content as needed that’s automatically cached on Netlify’s Edge CDN. They enable you to build pages for your site when a user visits them for the first time and then cache them at the edge for subsequent visits.

I don’t understand the difference between the netlify_edge preset and the netlify_builder preset here and why one preset would be used over the other. Both of these sound like they use Edge SSR.

The nuxt 3 docs are very limited here and this is very confusing. The route rules section of the nuxt 3 docs gives the following definition for SWR

Add cache headers to the server response and cache it on the server or reverse proxy for a configurable TTL (time to live). The node-server preset of Nitro is able to cache the full response. When the TTL expired, the cached response will be sent while the page will be regenerated in the background. If true is used, a stale-while-revalidate header is added without a MaxAge.

and for ISR

The behavior is the same as swr except that we are able to add the response to the CDN cache on platforms that support this (currently Netlify or Vercel). If true is used, the content persists until the next deploy inside the CDN.

So my question is nuxt 3 says that edge rendering is accomplished with the netlify_edge preset, and using nuxt build command. Then what does using nuxt build with netlify_builder preset do? Isn’t nitro taking the nuxt pages and having them rendered at the edge? And lastly, the netlify docs state that ISR is accomplished with netlify builders. Does this mean to use nuxt 3 ISR the netlify_builder preset has to be used?

2

Your question is more suited for the Nuxt team as they have written their framework and the docs. From what I know (this might not be the latest info), netlify_builder preset uses On Demand Builders and not Edge Functions.