Skip to content


You can set the caching policy of your frames by defining the Cache-Control headers of your frame's image response

Since images are returned as an inline Data URL by default, this will require you to create a separate endpoint for your dynamic images that you want to avoid caching for.

// ...
const handleRequest = frames(async (ctx) => {
  return {
    image: "/images/my-image",
    // ...
import { NextRequest } from "next/server";
import { ImageResponse } from "@vercel/og";
export async function GET(req: NextRequest) {
  const imageResponse = new ImageResponse(
      <div tw="bg-purple-800 text-white w-full h-full justify-center items-center flex text-[48px]">
        The current time is {new Date().toLocaleString()}
    { width: 1146, height: 600 }
  // Set the cache control headers to ensure the image is not cached
  imageResponse.headers.set("Cache-Control", "public, max-age=0");
  return imageResponse;

Additional context can be passed to the image endpoint via URL query params.

See an example of how to use the Cache-Control header in the Caching example.