A live crypto price ticker on a static site, three ways
I run a small static site on Netlify and wanted a scrolling price ticker across the top. No build step, no server, and ideally no signup. Here is what I tried and where each one hurt. 1. Fetch a public API in the browser The shortest path is a plain fetch against a public endpoint. CoinGecko still answers without a key on the simple price route: const url = "…
In pursuit of a live crypto price ticker for a static website, the author explored three distinct approaches, each with its own advantages and drawbacks. The first method involved fetching data directly from a public API via a browser fetch request. This approach required handling rate limits imposed by the free tier, which was based on calls per IP address and led to performance issues when multiple visitors accessed the site simultaneously.
To mitigate this, the author implemented caching using sessionStorage to store the last response for a minute, thereby reducing the number of API calls. However, this solution also required maintaining a hardcoded lookup table to map CoinGecko IDs to symbols, which could become outdated if the project's data changed. The second approach entailed creating a serverless function to serve as a proxy for the API calls.
This function would maintain a cache with an expiration time, ensuring that a single upstream call was made every minute, irrespective of the traffic volume. By using a KV store for caching, the author could ensure an exact rate and prevent multiple instances from keeping separate copies, thus avoiding unnecessary upstream calls.
Nevertheless, the function cache only persisted as long as the instance remained warm, leading to additional cold starts on the first request of the day. The third and final method involved using a hosted widget, which eliminated the need to manage data and API calls entirely. The author chose The Coin Analysis' marquee widget for its simplicity, lack of API key requirement, and customizable settings via data attributes.
However, the author acknowledged the trade-offs associated with this approach, including the risk of changes in the widget's terms of service, potential security implications due to Content Security Policy restrictions, layout shifts caused by the widget's loading, and potential motion-triggering effects for some users. Ultimately, the author recommended the hosted widget for side projects where crypto prices served as decorative elements, while opting for a custom implementation with a caching proxy for projects where price data represented the core functionality.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
