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 adds significant overhead to the server build.
To address this, we introduce the zeroRuntime config, which removes all tree-shakable OG image code from the final output.
Usage
Enable zero runtime when your OG images only change at build time (not dynamically at runtime):
To enable zero runtime, add the following to your config:
export default {
ogImage: {
zeroRuntime: true
}
}Prerender every page that uses OG images, because the server runtime is not available. A page that is not prerendered gets no og:image tag: defineOgImage() only runs during prerender.
export default defineNuxtConfig({
nitro: {
prerender: {
crawlLinks: true,
routes: [
'/',
// ...
],
},
}
})Limitations: community templates are not in production builds, with or without Zero Runtime. Eject each community template that you use into your components/OgImage folder, or the build fails.
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)