CSS-Trickz: Caching a Joke Site with Netlify's On-Demand Builders
WordPress sites ship with a default API, and CSS-Tricks' own is no exception — you can pull its 12 most recent posts as JSON with just the fields you want. Developer Alex Riviere turned that feed into a joke site called CSS-Trickz, but quickly ran into a performance problem.
The first version of the site fetched the API data client-side in the browser, which worked but was slow for visitors and hammered the API with hits. Riviere then rewrote it to use a Netlify Function, moving the fetch to Node running in the cloud and serving pre-rendered HTML back to the browser.
This actually gives us a new problem that the function runs on MY dime every time someone comes to the site.
Netlify's free tier allows 125,000 function requests per month — plenty for a small site — but Riviere said he'd "rather not become a victim of internet popularity." The timing worked out, though, as Netlify just introduced On-Demand builders, which make caching function results fairly straightforward. The code looks like any other Netlify Function, except the handler signature differs:
const { builder } = require("@netlify/functions")
async function myfunction(event, context) {
// logic to generate the required content
}
exports.handler = builder(myfunction);As Andrew pointed out in the ShopTalk Discord, the approach applies broadly to API usage in general: Maximize Your API Free Tier with On-Demand Builders.
