Gatsby v4

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott

ghee. Welcome to syntax. In this Monday, hasty treat. We're gonna be talking all about Gatsby 4. That's right. The 4th iteration of the static site framework that we know and love is not as static as it once was.

So we'll be talking all about Gatsby 4 on this show, which is sponsored by 2 amazing companies, Prismic and Sentry.

Now before we get into those, let me introduce Wes Boss, the cohost of the show. Hey, Wes. How's it going?

Good. Good. This is our we're just finishing up today, our last recordings of the year. I'm excited for a little bit of time off, little bit of relaxation, you know.

A little bit of chill, little bit of grill.

A little bit of what's that mambo number 5? Yeah. A little bit of dirt.

Yeah. I don't wanna reveal too too much about myself here, but I happen to probably know most of the words that's okay.

So this episode, is sponsored by 2 companies actually that work really well with Gatsby 4. So good fit for these companies. We have Prismic and Century West. Do you wanna talk about Prismic, and I'll talk about Century?

I do. Prismic is, a CMS that you can use with literally any front end or literally any back end or or anything you want. It's just an API at the other day. So Prismic is awesome because you literally sign up, And you can immediately start creating your project. There's no npm install or anything. It's all on, on the GUI. So you just log in, start creating your content types. You can create people, and then you can create, maybe podcasts. You can relate those people to the podcast. You can have relationship. You can create these things called slices, which are I've talked about a lot, but it's sort of like component focused data instead of page focused data, which is really refreshing.

It's awesome. So You wanna check out Prismic for your next project that you're working on, prismic.i0forward/syntax.

I've used on a couple projects this year myself. I really, really enjoyed it, so check it out. Thank you, Prismic, for sponsoring. This episode is also sponsored by Century, which is the perfect place to see all of your errors and exceptions happen.

And not only that, give you, really neat tools like performance metrics where you can see a user misery score. All this and more. Sentry has all the tools you need to be able to solve any bug or issue on your site whether that is a front end issue or a server side issue depending on, what your environment is. I mean, it it works with everything you could possibly imagine. So, even if your back end is not written in Node. Js, you could use this absolutely. So check it out at century.io.

Use the coupon code tasty treat, all lowercase, all one word, and you can see for yourself why so many people trust Sentry with their errors and exceptions.

So let's check it out here at Gatsby 4.

I remember when, I did a first look at Gatsby when it was just in its pre one phase, and now here we are 4 versions old.

What an what an amazing accomplishment for the Gatsby team, 1st and foremost. But also just wow, time flies. Right? Look, it's all grown up. Yeah. It's it's really exciting. And this is one thing that I

had, predicted that would happen this year is that Gatsby now Has the Gatsby 4 has a whole bunch of stuff.

And I updated my own personal website to Gatsby 4, and I did it in about 45 minutes. There's a huge a list of change logs. And I think the the sort of sticking thing is if your plugins support it, then it was very easy to update. And the Gatsby The crew made sure that the ecosystem was sort of ready for the update. So I had one tiny little issue. I fixed it in about 20 minutes, And the upgrade was very, very smooth coming from 3 to 4. But let's talk about features. Oh, wait. Before you do that, should,

Was there any, like, node version requirements? I think that was the only issue I've ever had with Gatsby updates is, like, occasionally, they'll change the version of node. So

Oh, yeah. With all these things, they usually always support the LTS long term LTS. What a long term

Stable.

Stable? Is that what the s stands for? Makes sense.

Yeah. LTS is is generally what most frameworks will do because Node themselves say we'll support this and the long term support.

Yeah. Long term support. I think you say support. Yeah. There you go. So I don't I haven't looked into what versions of it. We generally with specifically Gatsby, it's not that big of a deal to update it, your version of node just because, like, we're working on the latest stuff and the LTS goes back a couple years usually. Totes.

So, Three major updates is that there are now different rendering options in Gatsby. So one of the, thing the whole the whole thing of Gatsby b was that it was entirely prerendered, and the thing just rendered out to HTML and CSS and JavaScript at the end of the day.

And if you wanted to do anything dynamically or if you wanted to do anything on demand, you had to do it in the client. And use In that case, he had to sort of step outside of the whole Gatsby data ecosystem, and it was kind of a pain, honestly. And and, also, one of the hugest pains of Of Gatsby with a large site is that the build times get get massive. They're they're really, really big. So But how big how big is that? Because I I've never had any issues with that personally, And I know you have. So, like, where would you say that threshold was? So, like, my website, I don't know how many pages. Probably a couple 1,000 pages, couple 1,000 images.

Yeah. So big, big, big. Yeah. I wouldn't say big, big, big, but, like, medium medium website, I would say. It's not like a, Oh, I coded my blog. Like, you hear all the time. Developers are like, I coded my blog in these 16 different frameworks this year, and and it's like a it's like a hello page and a link to their Twitter, and that's their website. One blog post they wrote 3 years ago. My website is very large. I have an entire script guide on it. I have 10 years of blog posts on it. I have an entire store that I used to sell swag. All these different things.

And I usually, with building Gatsby, from cache, it takes, I don't know, 5 minutes or so. But If I wipe the entire cache, a lot of that being images, it often took me 50, 60 minutes to build the website, from absolute scratch.

And Gatsby has sort of solved those things. Well, the first one being the different rendering options and the second one is parallel queries.

I will talk about the rendering options. So obviously there's static, which is do it all beforehand.

Now there is DSG deferred static generation, which means that, These pages do not generate until somebody visits the website. So they've kinda switched from this is a static website to, Okay. Now you're hosting a Node application, and it sort of brings it back into the Next. Js world of things where you let's say, like, for a good example is the Syntax website that's built on x. Js. If you go to a podcast from 3 years ago and you visit the page, That page is generated. You're the 1st person to land on that thing in however long.

That page is quickly generated before you actually see it. Right? Mhmm. And it actually even goes one step further. It will serve you the older version of that page and then regenerate it after, so that it's updated for the next person that that visits it as well.

With Gatsby, you had to do a whole regen or a partial regen. And now you can just say, like, don't build that page until somebody actually wants it and that sort of leads that's how traditional server side generation has worked.

You can just Generate it once somebody visits it. It's very simple.

You now have a function called config that you export at a page level so that you opt in to these new rendering options at a page level. Same thing as Next. Js, and you can export a defer prop from that page. And what that will do is it just At build time it doesn't build.

And only at request time does it go ahead and build.

Same thing for the create pages API. If you're dynamically creating pages via the API, you can click on defer

or you can you can put a defer prop in there. Oh, it's because say, you know what? That reminds me of a good way to think about this for those of you who maybe didn't didn't pick this up Is that it it's very similar to what something like Cloudinary or Mux does. Right? The first time you hit it, it's creating it and then caching it. So the next person that hits it will then be getting the the build. But because it it takes very little for node to build Or render 1 page,

that user is hardly going to notice any sort of hit from that because it's just 1 page. Right? Yeah. And a lot of the world is is built on that. I know, Right. Server side rendering is that. Yeah. Yeah. It's just the server renders, and then it keeps it as static forever.

Bread. And there's a new Gatsby serve, command that you use to actually fire that up, and it's a node. So and that you can't you have to now host this on a server, That supports node and not just a server that supports HTML.

Yeah. Right. Yeah. And then The 3rd new generator the 2nd new generation is SSR, which is it's server rendered.

Instead, the same deferred static gen is server rendered, but SSR is, has a new function called get server data. So you now have access to your entire GraphQL API at build time.

And that's really good for things that update frequently. Like, the online store was always a good example. It's like how do you if you want a display, I have 10 things left. Like, I had 10 t shirts left.

Do you have to rebuild the entire website to show that? And the answer to that was just you just have to update it on the client after the page loads. Mhmm. But now with SSR, you can You can generate that. You could generate it on every single request if you wanted to.

And then the the question I had is, like, what about caching that? Like, what if I What if I want something between SSR and every request and DSG deferred static gen Mhmm. Once and that's static forever? And the answers to that is that, You use SSR and then you, put a cache control header on that, and that's just an HTTP header. Like, when the browser gets your page, there will be a header that says how long to cache this page for and all of its assets. Now you might be thinking, okay. Well, that just caches it for, like, the client, like, 1 person. Like, what if another person visits that website? Right? Like, I only wanna generate this page once every hour or once every 10 minutes. And if I have 50,000 people hit the page, I'm not generating at 50,000 people Times. And the answer to that is you use a proxy or a CDN, Cloudflare or literally any of the proxies out there. And the proxies these understand the cache control header and will cache it for however long it says, and then it'll dump it and go grab a new copy the next time it needs it. Yeah. I always wonder about, like, what the right approach is for content with,

like, user user authenticated data, you know, you know, with these sort of things Because it seems like servers server render really is the option there because you can't really prerender something like that.

But how much can you I mean, I guess caching is the right way, but how How much prerendering can you do with with user data? That's where my brain goes. Yeah. I I don't I don't think so. It's nice to be able to

opt into this at a page level.

Yeah. There's some there's some show ideas I have for people have been talking about module federation and whatnot, And I think that that's the answer. Like, could you cache the header

and the footer but not the account? Because, like, all of it, like, Next. Js and That that's kind of what I'm thinking. Yeah. It would be like you you would you would statically render the this or you'd cache the the server data for the content

And maybe not the user stuff. Yeah. Yeah. Could you could you, Kat, like, opt into this at a component level as well? That'd be kinda interesting.

Right. Yeah. That'd be very interesting. I'm really excited about that, because,

like, a lot a lot of people it's funny. When we started this podcast, we built the website in Next. Js, and Everybody said, why why didn't you use, Gatsby? And then that pendulum swung back to Next. Js.

And then now everyone's like, well, Next. Js is kind of the best of all worlds. You can static. You can defer it. Or you can SSR it.

Whatever you want. Right? And then Next. Js got the image component.

And then Next. Js got functions. And now Gatsby got functions in 3.6.

And now we have these options in Gatsby. And the Gatsby image component's been there forever.

So it's like I think we need to do another, like, throw down of Gatsby versus Next. Right. Where where is the what's the difference? What is the key differences? Yeah. I mean, I was sitting here this morning being, like, I don't

I don't know what the difference is, and I have to dig a little deeper. I'm sure there's some edge cases here or there, but, like The best news through all of this is that People will be able to get their things on the latest version of whatever they built their site with and still have access to these features Regardless if they chose to build their platform in Gatsby or Next. Js. Right? Because nobody wants to rewrite things. When I looked at rewriting my application Into Next. Js. Sure enough, it was going to be it was gonna be a project. Right? It wasn't it wasn't going to be a little thing. So I I could imagine if you were on Gatsby, the last thing you'd want to do would be to rewrite it on Next. Js just to, you know, stay with what's trendy. Totally. Totally. Exactly. And and that's a frustrating thing about the dev world is that

People jump all over the place.

And the reality is companies and teams choose tech Oh, yeah. Years in advance, And you can't you can't flip flop from that tech. Like, I had so many people. I was like, alright. Here I go. I'm updating my website to Gatsby, Gatsby 4 from Gatsby 3. And I had so many people that are, like, why don't you use Remix? And at that point, it had been out for, like, 3 days. I was like Oh, yeah. I'm not gonna rewrite my higher website.

Something that just came out. Totally different framework

because for no reason.

Because of it's the new hotness. You know? Like, I picked Gatsby 2, 3 years ago, and I'm gonna be on that for the foreseeable future. I don't have I would never even think to do that, Wes. No. I got others. I got others. I would never think to rewrite my entire platform. Oh. Something that's brand new and not even a version one yet.

Yeah. Honestly, I don't wanna have to babysit. That's why I was on WordPress for so long, because I don't wanna have to once or twice a year, I don't mind jumping in and fixing a few things or dealing with whatever, but I don't wanna have to babysit anything. I've got enough on my plate. That's that there.

Let's talk about other features in Gatsby 4. Parallel queries It's a big one now. So, for an example, I have blog posts. I have tutorial, JavaScript pages. And I have tips On my Gatsby website, those are my 3 big pieces of content along with pages.

And I have to I query all my tips. I loop over them, create a page or query all my blog posts, loop over them, create a page, query all my tutorials, loop over them, create a page. Right? But now with parallel queries, you can run them all, in parallel because they have nothing to do with each other. They're not waiting on each other for anything else. So They can run-in parallel now. Again, that that will speed things up significantly.

New data sync. This is a big one for, People who want to see the update right away. Those entire businesses built on top of making Gatsby update immediately so you can see what's going on, right? So there's a new data sync that makes that a lot easier because people change something in the CMS they want to see it on their website before they hit publish. So there that makes it a lot easier to integrate with these different different CMSs.

Gatsby and Min is deprecated. Gatsby rolled this thing out a while ago called Gatsby and Min, and it was kind of like a just a bunch of text boxes where you could put your plugins and I was wondering about that. What it Yeah. I don't know too much about Gatsby admin. Yeah. They they deprecated it because it's just like we're devs. We can I don't I don't need a UI to input, like, things like that? I can I can do that in a config file? And I think that they said we've we've seen almost no usage of it. So they've deprecated that.

And that's it. So, it seems like there was a lot of changes under the hood. They did a really good job at not breaking too many things. Update was painless for me which I was really happy about, and some pretty interesting stuff. So I'm curious to see What they will be rolling out

in the future now that they've sort of set themselves up for this. Yeah. I mean, the there's one thing that the The Gatsby team has always done and that's, you know, been releasing consistently since like, there's never been a point where you're like, oh, man.

The Gatsby team has really fallen behind here. No. They're always they're always releasing a ton of stuff, and I you know, I know that that's really hard to do for this long. So, Oh, shout out to them, Killan. Yeah. Yeah. Yeah. I'm very curious now what what their next move is. So we talked about this with Next. Js as well.

I I'm betting they're gonna take some a look at some of the features that Remix is now, popularizing and saying, like, alright. How do we how do we put those in in our frameworks, but we'll leave that for another show.

We'll leave that for another show. Cool. Well, this is this has been eye opening for me. I wasn't quite sure what came in the the new update. I'm not as up on this as you, which is fun because I've been, you know, up in a Gatsby head for a long time. So it's really, really neat to see. So that's it for this episode of Syntax. We will catch you on Wednesday for a full on tasty treat.

Beatrice.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player Or drop a review if you like this show.