Reducing Sanity API calls on keystroke and enabling CDN usage in Next.js

I understand you're experiencing high API usage from Sanity Studio during editing and finding that your CDN isn't being utilized as expected. Let me break down what's happening with both issues.

Understanding Studio's API Requests During Editing

When you edit documents in Sanity Studio, you're seeing thousands of API requests fire on each keystroke. This is expected behavior and is how Studio's autosave system works:

• Studio creates draft documents (prefixed with drafts.) as you type
• Each change triggers mutation/patch requests to save your work in real-time
• This ensures you never lose content during editing
• These mutation requests always use the live API endpoint (api.sanity.io), never the CDN

This behavior cannot be disabled or reduced - it's a core part of how Studio functions to provide a robust authoring experience. The API is designed to handle this load, and these requests count against your API quota (not CDN quota). Mutations cannot be cached by design since they're write operations.

Why Your CDN Isn't Being Used

The second issue is more straightforward than it might seem. Based on the Sanity CDN documentation, when you set useCdn: true in your client configuration, it tells the JavaScript client to fetch from apicdn.sanity.io instead of api.sanity.io.

Critical detail: In your configuration, you have a typo:

useCDN: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME === "production"

Notice it's useCDN (uppercase "CDN") but the correct property name is useCdn (lowercase "dn"). JavaScript is case-sensitive, so this typo means the client isn't recognizing your CDN setting at all and is defaulting to useCdn: false.

Solution

Fix the typo in all your client configurations:

// helpers/sanity.js
const options = {
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME,
  apiVersion: '2022-01-18',
  useCdn: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME === "production" // lowercase 'dn'
};

Also fix it in helpers/generateRedirects.js:

const options = {
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME,
  apiVersion: "2022-01-18",
  useCdn: process.env.NEXT_PUBLIC_SANITY_DATASET_NAME === "production" // lowercase 'dn'
};

When CDN is Used vs. Bypassed

Even with useCdn: true correctly configured, certain operations will always bypass the CDN:

• Mutations (create/edit/delete) - Studio editing uses the live API
• Listeners/subscriptions - real-time updates require live API
• Draft content - when using tokens to fetch unpublished drafts
• Preview/Draft Mode - when previewing unpublished content

According to the Live CDN documentation, the API CDN uses intelligent caching with approximately 10-minute cache times, providing a balance between freshness and performance.

Verifying Your Fix

After correcting the typo:

1. Check your Sanity project usage dashboard
2. Compare "API" vs "API CDN" usage
3. Expected pattern:

   • High API usage from Studio editing (mutations)
   • High API CDN usage from your Next.js app serving published content
   • Lower direct API usage from your Next.js app (reads should shift to CDN)

Additional Notes

Images: Assets always use the asset CDN (cdn.sanity.io) regardless of the useCdn setting - this is separate from the API CDN and explains why you're seeing cdn.sanity.io URLs for images even when your API queries weren't using the CDN.

Warning message: The console warning about useCdn not being specified should disappear once you fix the typo, as the client will properly recognize the setting.

The Studio's mutation-heavy behavior during editing is by design and ensures a robust authoring experience. The key to managing your API costs is ensuring your public-facing content delivery (your Next.js frontend) uses the CDN for read operations, which should now work once you fix the typo.