Tips for reducing API requests and bandwidth usage on a high-traffic Next.js blog

I understand your concern - those overage costs can definitely add up quickly! The good news is there are several proven strategies to dramatically reduce your Sanity API requests and bandwidth usage. Let me break down the most effective approaches:

1. Implement Sanity's Live Content API

The most modern solution is Sanity's Live Content API, which is specifically designed to reduce API requests while keeping content fresh. It handles fetching, rendering, caching, and cache invalidation automatically - this is now the recommended approach for Next.js applications and can significantly reduce your API call volume since it intelligently manages caching for you without complex setup.

2. Optimize Your Next.js Caching Strategy

Since you're on Next.js with high traffic, proper caching is crucial:

Use Incremental Static Regeneration (ISR):

• Set appropriate revalidate times based on how often your content actually changes
• For a blog, most posts probably don't change frequently after publication - consider revalidate: 3600 (1 hour) or even longer for older posts
• Only use short revalidation times (60 seconds or less) for truly dynamic content

Example:

const posts = await sanityFetch({
  query: POSTS_QUERY,
  revalidate: 3600, // Revalidate every hour instead of on every request
})

For App Router:

• Use force-static for pages that don't change often
• Configure proper cache segments with appropriate revalidation periods
• Consider using on-demand revalidation with Sanity Functions (the modern, recommended approach) or webhooks to only revalidate when content actually changes, rather than checking constantly

3. Optimize Your GROQ Queries

This can have a huge impact on bandwidth:

Use projections to only fetch the fields you need:

// Bad - fetches everything
*[_type == "post"]

// Good - only fetches what you need
*[_type == "post"] {
  title,
  slug,
  publishedAt,
  "imageUrl": image.asset->url
}

Avoid deep reference resolution when not necessary - each -> traversal adds to your query cost and response size. Read more about query optimization techniques in Sanity's documentation.

4. Optimize Image Delivery

Images often account for the majority of bandwidth:

• Make sure you're using next/image which automatically optimizes images
• Use Sanity's Image Pipeline with appropriate transformations (resize images to the actual display size, not serving full-resolution images)
• Add auto=format to serve WebP/AVIF to supported browsers
• The images are cached on Sanity's global CDN, so proper sizing prevents unnecessary bandwidth usage

Example:

import imageUrlBuilder from '@sanity/image-url'

const builder = imageUrlBuilder(client)

// Request appropriately sized images
const imageUrl = builder
  .image(post.image)
  .width(800)
  .auto('format')
  .url()

5. Disable Unnecessary Prefetching

Next.js Link components prefetch by default, which generates API requests even for links users never click:

• Consider disabling global prefetching in App Router for high-traffic sites
• Use prefetch={false} on individual links that don't need it
• This alone can reduce API calls by 50% or more on content-heavy sites

6. Check for Runaway Processes

Review your Sanity project's usage dashboard to identify:

• Which queries are running most frequently
• Whether you have preview/draft mode running more than necessary (draft queries aren't cached by the CDN)
• If any automated processes or bots are hitting your API unnecessarily
• Consider disabling Sanity CDN (useCdn: false) only for preview/draft contexts, not production

7. Implement Smart Pagination

If you're loading large lists of posts, implement efficient pagination strategies rather than fetching all posts at once.

Quick Wins to Start With

1. Add ISR with reasonable revalidation times (this alone can reduce requests by 80-90%)
2. Add projections to your GROQ queries to reduce response sizes
3. Optimize image URLs with proper sizing and format parameters
4. Disable unnecessary prefetching

The combination of proper caching strategy + query optimization should reduce your usage by 80-95% in most cases. Start with implementing ISR or the Live Content API with appropriate revalidation times, then optimize your queries and images. Monitor your usage dashboard to see which changes have the biggest impact for your specific use case.