Discussion about using the correct CDN for assets in Sanity and potential issues with multiple requests for the same asset.

13 replies
Last updated: Nov 30, 2022
Noticing during a component refresh network traffic is fetching the same asset multiple times. I found this to use apicdn.sanity.io instead of api.sanity.io https://www.sanity.io/docs/api-cdn
Currently we are using this dependency
https://sanity.nuxtjs.org/getting-started/quick-start and setting
useCDN: true
but what it's using instead is cdn.sanity.io ? Is there a difference between cdn & apicdn??
I think also we need to adjust the time for "Stale while revalidate" to cache an asset for longer
AI Update

Based on your question, I can clarify the difference between these endpoints and help with your caching concerns.

CDN Endpoints Explained

There are indeed different CDN endpoints in Sanity, and they serve different purposes:

  • apicdn.sanity.io - This is the API CDN used for caching API responses (your GROQ queries and document data). It provides unlimited rate for cached content and is optimized for delivering JSON API responses.

  • cdn.sanity.io - This is the Asset CDN specifically for serving media files like images, videos, and other uploaded assets. It's built on Google Cloud CDN and handles asset transformations and caching.

  • api.sanity.io - This is the non-cached API endpoint that always fetches fresh data from the Content Lake.

So when you're using the Nuxt Sanity module with useCDN: true, it's correctly using cdn.sanity.io for assets (images, files) and should be using apicdn.sanity.io for API queries. These are two different systems working together.

About the Duplicate Fetching Issue

If you're seeing the same asset fetched multiple times during component refreshes, this is likely a client-side issue rather than a CDN configuration problem. The Asset CDN caches indefinitely once an asset is processed, and uses content-addressable URLs (with SHA-1 hashes) that enable aggressive browser caching.

A few things to check:

  1. Make sure your asset URLs are stable - If the URL changes on each render (different transform parameters, for example), it will be treated as a new request
  2. Check your browser's cache headers - The Asset CDN supports Cache-Control, If-Modified-Since, and If-None-Match headers
  3. Verify you're not disabling cache in development - Some dev tools or configurations disable caching

Adjusting Stale-While-Revalidate

For the API CDN (apicdn.sanity.io), the cache behavior is controlled server-side by Sanity and uses stale-while-revalidate by default. You don't have direct control over the cache duration from the client side - this is managed by Sanity's infrastructure to balance freshness with performance.

If you need more control over caching behavior, you might want to implement your own caching layer (like using Nuxt's built-in caching features or a service worker) on top of Sanity's CDN.

The Asset CDN (cdn.sanity.io) caches assets indefinitely since they're content-addressed, so those shouldn't need adjustment - they're already maximally cached.

Noticing during a component refresh network traffic is fetching the same asset multiple times
Would you be able to provide an example of what you’re seeing?

what it’s using instead is cdn.sanity.io ? Is there a difference between cdn & apicdn?
The
useCdn
property is only for document requests (API vs. API CDN), while assets will always use
<http://cdn.sanity.io|cdn.sanity.io>
(and aren’t impacted by that property). There are some more details about the API and API CDN .
In this screenshot these are the same file 206 but not saying (from disk cache). We had a crazy spike in bandwidth last wednesday. idk if it kept requesting videos all day on someone's machine? my best guess
But okay, so the asset.url provided as "cdn.sanity" is expected
I’m probably using the wrong terminology, but could each of those requests be a chunk as part of the complete file?
Looks like 206 is a partial content status, which would seem to align with that.
Do the response headers include any sort of start and end metrics that you could analyze?
I think you're right
i'm not sure, tbh where to look - response tab isn't providing anything
Hmm… me neither. 😅
haha whale I did update everywhere to strictly use cdn and hard refresh - i don't see network traffic for videos anymore and they are playing just fine. Sorry it's been a long day
Oh, great!
I think we're okay. Keeping an eye on it, thanks!
To finish off that previous thought, it looks like you would only expect multiple requests with a 206 status if the content-type were multipart/byteranges. If you’re seeing the type, then the whole thing is in one range, and 206 has something to do with resuming interrupted downloads.
In any event, do let us know if it crops up again.
Definitely it appears what you're saying aligns with what I'm seeing. I'll ping you in this thread if our bandwidth spikes again. Appreciate it!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?