Gatsby v4

a couple 1,000 pages, couple 1,000 images.

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 if you wanted to do anything dynamically or if you wanted to do anything on demand, 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.

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 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, What they will be rolling out popularizing had, 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 then you, Yeah. Right. Yeah. And then The 3rd new generator the 2nd new generation is SSR, with LTS. What a long term

Cloudflare or literally any of the proxies out there. And the proxies these understand the cache control header

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,

SSR and every request and DSG deferred static gen Mhmm. Once and that's static forever? And the answers to that is that, so that it's updated for the next person that that visits it as well.

You use SSR like, we're working on the latest stuff and the LTS

then it was very easy to update. And the Gatsby The crew made sure that

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, Because of it's the new hotness. You know? Like, I picked Gatsby

versions old.

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, 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, the ecosystem was sort of ready for the update. So I had one tiny little issue. I fixed it in about 20 minutes, Same thing for the create pages API. If you're dynamically creating pages

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

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

Wes like, user

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, 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

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

So this episode,

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.

Boss, and Scott

soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda,

Now before we get into those, let me introduce So let's check it out here at Gatsby

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? Boss, the cohost of the show. Hey, Wes. How's it going?

I do. Prismic is,

So we'll be talking all about Gatsby 4

ghee. Welcome to syntax. In this Monday, hasty treat. We're gonna be talking all about

little bit of grill.

on the GUI. So you just log in, start creating your content types. You can create people, and then you can create, And Gatsby has sort of solved those things. Well, the first one being the different rendering options and the second one is parallel queries.

You wanna check out Prismic for your next predicted that would happen this year is that Gatsby now That page is generated. You're the 1st person to land on that thing and the thing just rendered out to HTML and CSS and JavaScript at the end of the day.

It's awesome. So Instead, the same deferred static gen is server rendered, but SSR is,

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

on this show, which is sponsored by 2 amazing companies, Prismic and Sentry.

A little bit of chill, 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 Beatrice.

Monday. Monday. Monday.

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.

Stable.

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. With all these things, they usually

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

goes back a couple years usually. Totes.

long term You can just

Stable? Is that what the s stands for? 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 I don't know how many pages. Probably 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.

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, always support the LTS Times. And the answer to that is you use a proxy or a CDN, Gatsby?

And then that pendulum swung back to Next. Js.

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,

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

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.

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 opt into this at a page level.

consistently since like, there's never been a point where you're like, oh, man.

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,

to input,

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

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,

Something that just came out. Totally different framework

Regardless if they chose to build their platform in Gatsby

because

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

or Next. Js. Right? Because nobody wants to rewrite things. When I looked at rewriting my application

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

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 and some pretty interesting stuff. So I'm curious to see from absolute scratch.

for no reason.

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.

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.

And then Next. Js got the image component.

usually, with building Gatsby, tutorials, loop over them, create a page. Right? But now with parallel queries, you can run them all, which is it's server rendered.

And 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, 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.

it often took me 50, 60 minutes to build the website, put a cache control header on that, 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.

I

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, and saying, like, alright. How do we how do we put those in in our frameworks, but we'll leave that for another show.

JavaScript pages. And I have tips On my Gatsby website, those are my 3 big pieces of content along with pages.

New data sync. This is a big one for, A little bit of what's that mambo number 5? Yeah. A little bit of dirt.

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

and whatnot, And I think that that's the answer. Like, could you cache the header so you can see what's going on, right?

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

user authenticated data, you know, even if your back end is not written in Node. Js, you could use this absolutely. So check it out at century.io.

you know, with these sort of things Because it seems like servers server render really is the option there because you can't really

people have been talking about module federation your version of node just because, 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.

where you let's say, So, specifically Gatsby, it's not that big of a deal to update it, And then the the question I had is, like, what about caching that? Like, what if I What if I want something between 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 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.

traditional server side generation has worked.

With Gatsby, you had to do a whole via the API, you can click on defer 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, And that's really good for

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

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, and that's just an HTTP header. Like, when the browser gets your page, Whatever you want. Right? 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.

generate

These pages do not Oh, request time does it go ahead and build.

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.

deferred static generation, which means that, 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,

these new rendering options at a page level. Same thing as Next. Js, and will data instead of page focused data, which is really refreshing.

And only at

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,

That page is quickly generated

in however long.

and it sort of brings it back into the Next. Js world of things I don't I don't need a UI 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.

Now there is DSG

4.

really neat tools like performance metrics where you can see a user misery score. All this

And not only that, give you, Or drop a review if you like this show.

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.

and more. Sentry has all the tools you need to be able to solve any bug or issue on your site

HTML.

Bread. And there's a new Gatsby serve, I I'm betting they're gonna take some a look at some of the features that Remix is now, And project that you're working on, prismic.i0forward/syntax.

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 supports node and not just a server that supports

has a new function called get server data. So you now have access to your entire GraphQL API Yeah. There's some there's some show ideas I have for Generate it once somebody visits it. It's very simple.

at build time.

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.

People who want to see the update right away. Those entire businesses built on top of making Gatsby update immediately People jump all over the place.

So there's a new data sync that makes that a lot easier You now have a function called config that you export at a page level so that you opt in to Has the Gatsby 4 has a whole bunch of stuff.

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 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,

for a full on tasty treat.

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 I remember when,

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.