Zero Runtime
When using Nuxt as a server-side app with prerendered OG Images, you are forced to have runtime OG images as well which added significant overhead to the server build.
To address this, we introduce the zeroRuntime
config, which ensures all tree-shakable OG image code is removed from the final output.
Usage
To enable zero runtime, add the following to your config:
export default {
ogImage: {
zeroRuntime: true
}
}
You will need to make sure you're prerendering all of your pages that use OG images, as the server runtime will not be available.
export default defineNuxtConfig({
nitro: {
prerender: {
crawlLinks: true,
routes: [
'/',
// ...
],
},
}
})
Limitations
When using the Zero Runtime mode none of the community templates will be available in your final build, you must copy+paste any community template that you wish to use into your components/OgImage
folder.
Benchmarks
Nuxt OG Image - Defaults
Nitro: 1.6mb
- node_modules: 25mb
Nuxt OG Image - Zero Runtime
Nitro: 306kb (81% reduction)
- node_modules: 2.0mb (92% reduction)