Cache cloudinary transformation api at edge
Image-heavy SPAs with fewer origin hits
To cache cloudinary transformation api at edge, put a TTL cache on your RealComposer pipeline. Cache transformation metadata responses per public_id. Shared edge cache absorbs repeat traffic before it reaches Cloudinary.
Why Cache cloudinary transformation api at edge is hard without an edge proxy
Calling Cloudinary directly from Vue / SPA risks leaked secrets, CORS blocks, or oversized JSON that slows rendering.
- Exposed API keys in Vue / SPA bundles or DevTools
- Sequential upstream calls on slow mobile networks
- Third-party rate limits and surprise billing spikes
How RealComposer Solves This at the Edge
Store credentials in Secret Vault
Save CLOUDINARY_API_SECRET in RealComposer.
Configure edge pipeline
Add upstream steps with vault header injection and map the response fields your client needs.
Call from Vue / SPA
Use your workspace edge URL with a restricted client token.
const res = await fetch('https://realcomposer.com/v1/workspace/cache-cloudinary-transformations-edge', {
headers: { Authorization: 'Bearer rc_live_client_token' }
});
const data = await res.json();
{
"status": 200,
"debug_trace": "trace_batch2",
"data": {
"id": "obj_batch2",
"status": "active",
"audit_logs": [
{
"action": "fetch",
"timestamp": 1714589200
}
],
"internal_metadata": {
"cluster": "edge"
},
"result": {
"name": "Sample",
"tags": [
"batch2"
]
}
}
}
{
"id": "obj_batch2",
"status": "active",
"result": {
"name": "Sample",
"tags": [
"batch2"
]
}
}
curl -X GET "https://realcomposer.com/v1/workspace/cache-cloudinary-transformations-edge" \ -H "Authorization: Bearer rc_live_client_token"
Developer Questions & Troubleshooting
Is it safe to call Cloudinary from Vue / SPA?
Only if secrets stay off the device. RealComposer injects credentials on the server edge so clients never hold production keys.
Does RealComposer add latency?
Cloudflare edge execution adds a few milliseconds; caching can answer repeat calls in under 10ms.
Deploy this Vue / SPA + Cloudinary Recipe
Clone this pre-configured pipeline into your RealComposer workspace in one click. We pre-populate upstream URLs, headers, and mapping rules.