Dynamic OG Image Generation: From SSG to Edge Functions

May 22, 2026 · 9 min read

Hard-coding OG images stops working the moment you have more than a handful of pages. Personalized previews, per-post designs, daily-changing landing pages — they all need dynamic generation. The question isn't whether to generate dynamically; it's where in the request pipeline to do it.

Three places to generate

1. Build time (SSG). Generate one PNG per page during your CI build. Pages that survive a deploy unchanged keep their OG image. Tools: next-og, satori, Playwright screenshots in CI.

2. Server-rendered on demand. Page hit triggers PNG generation, response is cached. Tools: Next.js @vercel/og, custom canvas renderer, Puppeteer in a serverless function.

3. Edge functions. Cloudflare Worker or Vercel Edge Function renders within ~50ms anywhere in the world. Best for personalization (user avatar in the image, daily quote, signed-in state).

When to use each

A minimal Next.js example

// app/og/[slug]/route.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(req: Request, { params }: { params: { slug: string } }) {
  return new ImageResponse(
    <div style={{ width: 1200, height: 630, background: '#0f172a', color: 'white' }}>
      <h1 style={{ fontSize: 64 }}>{params.slug}</h1>
    </div>,
    { width: 1200, height: 630 }
  )
}

FAQ