CSS-Trickz: An Experiment with Netlify’s On-Demand Builders

Avatar of Chris Coyier
Chris Coyier on

Take your JavaScript to the next level at Frontend Masters.

WordPress sites have an API by default. Wanna see this site’s most recent posts, with just a specific set of data… in JSON format? Here ya go. Alex Riviere made a joke site using that.

At first, the site would fetch from that API client-side when it loaded. Fine, but if we take it seriously for a second, it’s very inefficient for people visiting the site (i.e. slower than server-rendered HTML), nor very efficient on API hits. So, Alex re-wrote it using a Netlify Function. The Netlify Function then would fetch (in Node-in-the-cloud) from the API and serve the pre-rendered HTML. That’s probably a bit better, but as Alex says:

This actually gives us a new problem that the function runs on MY dime every time someone comes to the site.

The free-tier of Netlify Functions is for a generous 125,000 requests per month, which should be plenty for a little site like this, but still, as Alex said, he’d “rather not become a victim of internet popularity.”

Good timing, as Netlify just released On-Demand builders, which make caching the results of something like this fairly easy. It’s just like creating any other function, except the signature looks like this:

const { builder } = require("@netlify/functions")

async function myfunction(event, context) {
  // logic to generate the required content
}

exports.handler = builder(myfunction);

I like what Andrew said in our ShopTalk D-D-D-Discord — this concept is widely applicable to API usage in general. Free blog post idea: Maximize Your API Free Tier with On-Demand Builders.

Direct Link →