Gatsby (the company) held a “summer camp” online earlier today and used the occasion to push the new “functions” capability into general availability. Functions is interesting in and of itself, but equally interesting was the way that Gatsby, and product director Dustin Schau (@SchauDustin ) in particular, were talking about what the rollout meant for Gatsby (the framework).
Pointing out that “rich web experiences are now the norm, not the outlier,” Schau went on to say that this “relies upon dynamic functionality.”
Whoa, that’s dynamic…
This marked a change in tone from the usual “make some API calls if you really must have dynamic functions” train of thought in the larger static web site community. Schau went on to say that there’s a spectrum ranging from all dynamic to all static and Gatsby is “shifting left” toward more built-in dynamic support.
The trick to all this is, no surprise, the support for functions. I haven’t dug in and tried to do things with functions yet, but there’s definitely a nice clarity and neatness to the basic idea, which is that if you write and export a function in a file that you’re storing in the “api” subdirectory you’ve created in your “src” directory, this function will be run at the network edge at runtime. So, to take a minimal example, if you create a function that returns the current time, it will execute when the user is looking at the page that renders it, will run right then and there, and will display the actual current time in the browser.
You don’t need a function to get the current time displayed, but stop for a moment to think about how clean the basic setup is.
In one of these functions, you have to take care of two variables that are passed in, the first being Node’s request object and the second being Node’s reply object. This, roughly speaking, means you can easily act like you’re dealing with a POST or GET request and spit your results back out as a reply. You can also redirect fin the reply object, which is a clean way to chain together different functions.
Developing with Gatsby Functions
You can test sites with functions in your local environment—it works with versions of Gatsby from 3.7 up (which is roughly as of the very latest available version, at least as this is being written). If you deploy using Gatsby Cloud, yup, it just works. Netlify (which has its own function capability that’s not Gatsby specific) has also added support for Gatsby functions, so that works too.
This really is a different animal than what we typically might call an SSG. At the same time, it’s not the same thing as just throwing up a server on the back end to handle the dynamic stuff. Pushing the dynamic functions out to a serverless edge compute scenario gives you inherently faster performance for dynamic features, gives you the same inherent “magic” scalability that you get by running static sites on CDN’s, and for me at least, it raises some questions about how data is synchronized across, say, an enterprise application.
To put it another way, I don’t yet entirely understand where the data comes from, though presumably its accessible using the exact same mechanisms you’d normally think of within React. But… from where? I’m sure it differs by application and whether you have any margin for slightly stale data.
More to explore in this regard, and I’ll follow up when I know more.
Gatsby says recordings of the presentations (there was more than just the function announcement, including a nice demonstration of putting together a few functions who’s patterns you’re likely to encounter in typical applications) will be up in a few days. The demos are worth checking out. I’ll update with a link when they’re up.
Leave a Reply