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 …


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.

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 ArticlePermalink


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.


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-29T05:26:12+00:00) » CSS-Trickz: An Experiment with Netlify’s On-Demand Builders. Retrieved from https://www.scien.cx/2021/06/08/css-trickz-an-experiment-with-netlifys-on-demand-builders/.
MLA
" » CSS-Trickz: An Experiment with Netlify’s On-Demand Builders." Chris Coyier | Sciencx - Tuesday June 8, 2021, https://www.scien.cx/2021/06/08/css-trickz-an-experiment-with-netlifys-on-demand-builders/
HARVARD
Chris Coyier | Sciencx Tuesday June 8, 2021 » CSS-Trickz: An Experiment with Netlify’s On-Demand Builders., viewed 2024-03-29T05:26:12+00:00,<https://www.scien.cx/2021/06/08/css-trickz-an-experiment-with-netlifys-on-demand-builders/>
VANCOUVER
Chris Coyier | Sciencx - » CSS-Trickz: An Experiment with Netlify’s On-Demand Builders. [Internet]. [Accessed 2024-03-29T05:26:12+00:00]. Available from: https://www.scien.cx/2021/06/08/css-trickz-an-experiment-with-netlifys-on-demand-builders/
CHICAGO
" » CSS-Trickz: An Experiment with Netlify’s On-Demand Builders." Chris Coyier | Sciencx - Accessed 2024-03-29T05:26:12+00:00. https://www.scien.cx/2021/06/08/css-trickz-an-experiment-with-netlifys-on-demand-builders/
IEEE
" » CSS-Trickz: An Experiment with Netlify’s On-Demand Builders." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/06/08/css-trickz-an-experiment-with-netlifys-on-demand-builders/. [Accessed: 2024-03-29T05:26:12+00:00]
rf:citation
» CSS-Trickz: An Experiment with Netlify’s On-Demand Builders | Chris Coyier | Sciencx | https://www.scien.cx/2021/06/08/css-trickz-an-experiment-with-netlifys-on-demand-builders/ | 2024-03-29T05:26:12+00:00
https://github.com/addpipe/simple-recorderjs-demo