Skip Navigation

React Router v7's meta() Runs on the Client

CodeTypeScript

meta() re-runs in the browser on every client-side navigation, so it has no access to server secrets. Sign your og:image URL in the loader and let meta() just read it:

export async function loader({ context }) {
return { ogImage: signOgUrl(context.cloudflare.env.OG_SIGNATURE, /* ... */) }
}
export function meta({ data }) {
return [{ property: "og:image", content: data.ogImage }]
}

Anything secret-dependent or privileged belongs at the server boundary. meta() is a formatter.

Reference: React Router route module meta