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

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 to Article — Permalink

---

The post CSS-Trickz: An Experiment with Netlify’s On-Demand Builders appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

source https://alex.party/posts/2021-05-31-css-trickz-an-experiment-with-netlify-s-on-demand-builders/