Why single-request bulk results matter for grids and carousels, and how to use count, caching, and quota headers efficiently.

Pagination exists because many search APIs were designed when bandwidth was scarce and mobile clients were weak. Image-heavy UIs today — masonry grids, infinite scroll, design tools — often need dozens of thumbnails immediately. Mungfali returns up to 150 images in one JSON payload so you spend one quota unit and one round trip.

The hidden cost of pagination

Multiple API calls consume multiple quota units
Your backend stitches pages and handles race conditions when the user types quickly
Latency stacks: three 200ms calls feel slower than one 350ms call
Duplicate or skipped results when the index shifts between page fetches

One request, one array

bash

curl -s "https://mungfali.net/v1/search?q=interior+design&count=150" \
  -H "X-API-Key: $MUNGFALI_API_KEY"

The response value array contains up to 150 objects. Each includes imageUrl, dimensions, hostUrl, FamilyFriendly, isTransparent, and accentColor — enough to render skeleton placeholders and lazy-loaded img tags without a second metadata endpoint.

When to request fewer than 150

Mobile list views: count=20–40 reduces payload size
Typeahead previews: count=8–12 for a single row of suggestions
Hero + sidebar layouts: one call with count=50 may be plenty

Request what your UI actually displays in the first paint. You can always fetch again when the user scrolls or refines the query — but you rarely need five paginated calls for the first screen.

Caching strategy

Cache server-side by normalized query string plus filter parameters (safesearch, site, transparent). A TTL of 15–60 minutes works well for editorial and e-commerce browse experiences. Respect your monthly quota: caching popular queries dramatically reduces spend.

Quota and rate-limit headers

Every successful search returns X-Monthly-Quota-Remaining and X-RateLimit-Remaining. Build admin dashboards or internal alerts when remaining quota drops below a threshold — especially before marketing campaigns or product launches.

Rendering a grid in React

javascript

export function ImageGrid({ query }) {
  const [images, setImages] = useState([]);
  useEffect(() => {
    fetch(`/api/images?q=${encodeURIComponent(query)}&count=48`)
      .then((r) => r.json())
      .then((data) => setImages(data.value));
  }, [query]);
  return (
    <div className="grid grid-cols-4 gap-2">
      {images.map((img) => (
        <img key={img.imageUrl} src={img.imageUrl} alt={img.name}
          width={img.width} height={img.height} loading="lazy" />
      ))}
    </div>
  );
}

The browser calls your proxy (/api/images), not Mungfali directly — see Examples for the server route pattern.

How we deliver 150 image results without pagination