Gatsby vs Next.js in 2021

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Welcome

to Syntax. Today is I bet this is gonna be one of our most listened to episodes rid ever because the last time we did this episode, it was one of the most popular episodes, and that is Gatsby versus Next in 2020, rid. 2021, this is we're recording this in early November, so I I would say that this stuff will probably hold hold true for at least rid Halfway through 2021, would you say, Scott? Yeah. Yeah. It's very funny because I was thinking about changing this this episode's rid. Title 2 be 2021,

rather than 2020. And then I was like, well well, who knows where where you know, how things will change. But, yeah, I'm excited about this.

Awesome. Today, we are sponsored by 2 awesome companies. First 1 is Sanity, which is your structured content CMS, and second one rid Is Sentry does all of your error an exception tracking? So we're gonna talk about Next versus Gatsby. There's been a a lot of stuff that Has happened in the last couple weeks.

Most notably, Next 10 came out, and they dropped the very early image component. We'll talk about that in a bit. And in Next 9, they also dropped a whole bunch of statically rendered APIs. So rid Last time we talked about this, I was saying use Gatsby for websites and Next for apps. I mean, I don't really think that's that's necessarily true any longer. They're both ready. Starting to eat into each other's space. And I I I like this show because, like, I have no horse in this race. I just like rid. That both of these tools are fantastic for building websites and web apps. I've got courses on both of them. I think they're both fantastic tools.

And I I don't there's not gonna be a clear winner at the end of today, but we hopefully can just inform you as to what they both do. Yeah. I think you're dead on, and I think that was sort of inevitable even from the the time that we had recorded

that episode was that they would inevitably rid Run out of room in their respective spaces and start to bleed into each other's. And I I don't like, I would maybe agree rid To to some extent, to the effect that, like, I might even still do Gatsby for websites and extra apps if I was doing, like, straight up React rid Every time, but I almost would I'm gonna reach for things like Svelte for simple projects, especially for websites because of the well, even with you at, like, an MDX type of thing, the the the amount of code you're writing is really pretty minimal comparatively to some of these things. And, like, when I look at, like, Maybe like a template file or something like that in MDX or MD specs in the Svelte world compared to a Gatsby site, which by no means is like rid Crazy amount of syntax. There is just a lot of extra noise that kinda gets in between you and the HTML that you're working with.

I don't know if I would universally say, Gatsby hands next for every project as much as I would have last year anyway. So, Yeah. It it's interesting to see how the landscape changes in in a year or 2.

Alright. So let's get into it. We're gonna go through sort of rid A whole bunch of different pieces of building a website, server rendering, statically rendering, rerendering, client side data, dynamic rid Pages, hosting, images, videos, SEO, auth, plugins, ecommerce. We're gonna go through all these and sort of explain who does what in in how to do it in each of them, and then you can make your decision at the end of this. So let's start off with a server rendered rid. Or I'm just gonna say, like, yeah, like like rendered to HTML, meaning that when you hit a website, you're getting HTML from the server, and you're not getting a JavaScript bundle that then has to render on the client. And both do them.

The difference is is when they do them. So Gatsby ready. Is a build time currently is a build time rendered, meaning that they will, right before you deploy your application or as part of your deployment pipeline, rid. It will run Gatsby build, and they'll kick out a public folder that has all your images, all of your HTML, all your JavaScript, all of your folders, And then you can take that and and throw it up on a website. So that's done at build time. Next does a little bit differently where that's done on demand. So it's when you re You you can, like, prerender, like, statically, but you can also do things,

rid statically on Next. Js, either on demand. I guess that that sorta gets into the next one as well. We'll talk about that more in just a second. So, both of them do it. Yeah. Both of them do it. It's a matter of of what your needs are, and and sometimes we do we we talked about this a bunch in the last episode. It was like, when do you need rid. That data, do you need it live from the user, or do you need it pre user? And that really kinda defines which of those techniques In either platform you're going to reach for, as in, like, if you need statically if you need not statically. If you need server side rendered rid Data that includes user information, then Next. Js is the only option in that regard because Gatsby just can't do that. But Gatsby can do client side re User information, but not not server side as in statically rendered or even server side rendered because You don't know who the user is at the time of build, so that makes that kind of impossible.

Let's move on to the next one, which is static Generation. So, Gatsby is entirely static generated.

So you do everything at build time like we just said. Re so the big sort of thing that dropped in Next 9 was the ability to make some pages rid. Static Mhmm. And some pages server side rendered. That's great.

Not I think that's so cool because, like, you can rid Pick and choose which pages on your website are gonna be statically rendered, and then you can also opt in to if you want it rid to be a traditional server side rendered page as well, and you can decide on a page by page basis, which I think is, pretty killer feature in Next.

That's something I've always wanted in my own platform because I think about it, like, there are some pages, the about page, the, you know, the contact page. Like, those don't need to be re Created by the server whenever a user asks for them in a like, the standard SSR model of doing things. They don't need to be. Yeah. They could be just sitting there waiting, and I I think that's really neat. You know, I wonder if there's, like, the next generation of these things is, like, like, essentially chunks of HTML and JavaScript that are statically or prerendered or whatever that can just pop in to given specific spots rather than having to, like, Fish for information and maybe do DB calls or anything like that. Yeah. It's true. Like Static chunks. Static it's still built on demand, but the parts of it, static rich.

I like yeah. I wonder. Would that obviously like, would that be a a major benefit if you could still compile this thing but not have to do the database calls a specific thing. And it we we should say also, like, there's probably people listening to this and be like, I was doing that, like, 15 years ago. Like rid Anytime we talk about Next. Js, someone's like, so they invented PHP for JavaScript? What? So, like, obviously, yes, you you can you rid can do these things. Like, it's probably trivial to cache some URLs more aggressively than other URLs in your PHP ready. App or really any app. Right? But I I think that the the benefit that we're seeing here is that you're writing everything in JavaScript, and you're writing, rid Like, some of this dynamic stuff that happens in the browser as well as your server render pages are all in the same language. If they're all in the same React You can share components from one to another so you don't have to pick and choose which gets rendered on the client and which doesn't. There is something to be rid. Said about having all of your code and the entire code base in 1 language, in one, like, cohesive style and everything with that that I really, really love myself. So

I I do. I because, I mean, it makes it all of the entire code base approachable. Like, if if my code base was in PHP on the back end, then, yeah, sure, I'd manage. But, like, I'd have to keep track of, like, 2 sets of syntax APIs and tooling and all sorts of things that, just get in the way of being productive.

Yeah. That's a that's a huge benefit to just go all in on all in on 1 language and and one framework for for all of this. Re So next section is rerendering

pages.

You said Gatsby can be rerendered and redeployed. What do you mean by that? So, like, Let's say 1 page on your your website. A blog post is updated or a photo on one of the one of your pages has changed.

Maybe you just touched 1 page or maybe you just touched 6 pages out of the 7,000 that are on your website. So That's what Gatsby Cloud is is that it can Yeah. Yeah. It it can, like, partially rerender part of the Gatsby website, and it's really smart about it. It does have to know about your data source. So it's it only works with specific CMSs.

Actually, it works with Sanity, one of our sponsors today, and then it can redeploy it. So rid. That whole process of I changed a website, and it's live can really be boiled down to I know that they they've said they've gotten it down to re Seconds to re regenerate it, and then redeploying, I imagine, would just could be seconds as well. So that's kinda interesting if you think about it because, Like, let let's say it takes 30 seconds altogether to to make a change to your website and then to see it live. That's almost getting into the territory of just having Entirely server rendered, which is pretty cool. Almost. Yeah.

Almost. Then 30:30 seconds could be a lot in some cases. Right? Re Well, I I think about clients. Right? So I don't know how much client work you've done with Gatsby, but I did a couple in in, like, Outside APIs, maybe like WordPress. And what people don't understand with Gatsby is that when you, you know, rebuild, Like, they're used to their the flow of saving their WordPress file and then seeing it live on the site. And so even 30 seconds is a lot if you are rebuilding, because You save it, make a change, and it's not live on the site. I actually got, like, 3 or 4 like, even after explaining to the client that's how it works, I got, like, 3 or 4 emails asking about it. So, like, I think that is a big holdup. Yeah. I think that's where the and most of these CMSs

That they're using will have, like, a preview mode. Yeah.

And you can like, I know this is actually a perfect episode for Sanity Doody sponsoring because rid The preview mode will let you do that. Yeah.

Yeah. Let's let's save that for the ad read because that's perfect. Okay? Will do. And then the sort of like, I always like to point this out is that that is a paid feature. It always gets a little bit weird. There's obviously companies building these things, and these companies need to make money, But I always like to be super clear as to if you're not paying Gatsby for that, you don't get that feature. That's that's something that Gatsby just has in their secret sauce, and that's how they they attempt to to make their money.

Yeah. Yeah. That is well, that was also a thing what like, Last time we recorded this episode, what it was sort of a mystery how Gatsby was going to make money. Or Yeah. Yeah. I was like, okay. We get that next has, rid what was the previous name, Zite? Yeah. But Zites now. Yeah. At the time, they still had Zite and and Zite now. I mean, they still had that, so it was making money. But it's like, re Okay. So Gatsby got a lot of money, but how how are they gonna make money? And, it's funny because that whole situation in terms of, like, rid. How a company makes money leading the product and the project into different places really Yeah. Was sort of the downfall of Meteor's popularity Because they couldn't fig they got a lot of money. The Meteor developer group had got a lot of money, and they couldn't figure out how to make the money, and and not that Media wasn't making money because it certainly is. They started their hosting thing. It makes money, but it wasn't making enough money. So so so then they they come up with and GraphQL, and they're like, oh, okay. Well, we can charge for Apollo engine. We can charge for this and that, and it's like a whole more cohesive business model in that way to make the money. So it is funny how, like, we, as developers, can sometimes discount these things as being, like, higher level discussions that we're not, caring too much about, but it really has a huge impact on the future of the the code in the project.

Yeah. And and before like, whenever we talk about, like, Gatsby, There people always come swinging saying, like, they're just taking the problems that they made, which is regenerating and charging to fix it. And, like Yeah. But that's what a lot of companies do for for that. Like like, they'll take the hardest part about, like if you look at MongoDB is a good example. It's a Open source database, but they also have a massive company behind them. Massive. And they will take the hard parts, which is finding out why your database is slow rid Or, hosting a thing or security or replication, and they they make those things easy, and you can give them money to to make that easier. So rid That's that's a business model.

Yeah. They did a business, and that's how business works. So yeah. They did a business. Yeah. One of our our our sponsors also does business, and, They do business well, and they do business with a, neat little previewing thing that we just kinda hinted at. Do you do you wanna talk about that rid Now,

Wes? Yeah. Let let let's get into it because we are are talking about it. So, our sponsor is Sanity, which is a a headless CMS rid that you, generally, you use with wanna evenly use it with whatever you want. But Yeah. It's very popular to use these headless CMSs with Next. Js or Gatsby or or any of these rid. Frameworks to to pull in your data from Sanity.

And it's really cool because Sanity has a plug in that will allow you to Change your data, and you can preview that as if your site was updated. And then if you have build steps or anything that needs to happen, That will obviously go, but your client will see what it looks like. And that was actually kind of an interesting thing. Like, when I did WordPress way back in the day, rid. It was always hard for the client to say, like, I wanna change this thing on this page.

Now where does that field line up in in the back end? Right? And then you could change it and save it and then go And you had to clear caches in some cases as well, so Sanity is making that really easy for the person who ends up actually editing the website. So it out. If you are building a, a website or a web app or anything like that and you need a headless CMS or a structured content CMS as they call it, Go to sanity.i0forward/ syntax, and that will get you double the free usage tier. Sick. Thank you for Sanity for sponsoring.

Let's talk about Next. Js in terms of rerendering pages.

If you are doing server side props on Next. Js, then it is just rerendered. Rid. But one one kinda cool thing is, they helped us update the

syntax website to Which is statically different.

Rid. Yeah. It's statically generated, but, also, it needs to update itself when a new episode is released. And we didn't really wanna set up rid. CronJob or whatever.

So they have this revalidate flag that you can set on a page.

Basically, the way that it works is that when you you make a page called, like, Show. What you do is you you first, you fetch all of the possible routes that you want, and you return that. So forward slash show 1 forward slash show 2 forward slash show 3. So we fetch a a list of our podcast and then export that. And then for each of those shows, we go and fetch rid The individual data that can be done it's cool because it all happens server side. We don't have to have a public API for it because we just have internal libraries.

And then what happens is that there's a revalidate of 1 one second on it. You can set the you can set these the amount, rid to whatever you want. It's the amount of time that needs to pass after somebody visits the page, and it'll check if it's stale, and it will rid. It will revalidate it. And in our case so if you go to the website at 9 o'clock in one second, you will probably See, the new episode is not there, but that that kicks off, something in the background

that says, oh, this page is now rid. More than 1 second old, and it will regenerate that page and serve it up to the next person that comes. Yeah. So you won't get it, rid. But the next person will, so that should make people feel pretty good. With, like how does that work with, like like, pages that maybe don't get a ton of traffic, or can that be done on, like, rid CronJob where it would just, like, check it every so often. Oh, right. Yeah. Because you don't want that Sure. That first person. It's funny because a lot of these New service. Like, our our video streaming service, the 1st person who watches any of the videos at any of the given qualities gets a hit because it transcodes it on demand. Rid So that person's gonna inherently get a slower loading video, but then it caches it for the next person. Right? So it's it's funny that a lot of these new services, I don't I doubt this is a new idea, but, like, the 1st person takes a little bit of a hit. I mean, that's what that's how Cloudinary works too. Right? Yeah. And and, even, like, Heroku. Someone hasn't visited your thing. It takes, like, a second to spin up that droplet and run it you're not paying for it. That's a a Cold start. Yeah. Exactly. I remember, like, back in the day, people would write these little bots that would just ping the website every so often, so it would stay hot. It would stay up. That's that's gotta be invalidated

in terms of Yeah. I'm sure that doesn't work anymore. But, like, with those on demand, rid. We'll we'll talk about that when we hit images because, like, that's a huge benefit to doing it on demand versus that build time, which is it takes forever.

That's how Next. Js does it, which is kinda cool. You can just revalidate it in the background, and, I'm I'm curious now. I I don't actually know the answer to that. But, like, what if you have a website that's, like, rid. Six people hit it a day. Yeah. And it's important for whoever visits the website to get the most up to date. If that if that's the case, I guess, then you have to do server side rendered, which is probably not a big deal for Yeah. It's 60 people. It's not a big deal. Right? Because, I mean, like, we we act like that's a big deal, but, like, rid. At the end of the day, the server is really fast at generating,

HTML. It is very fast at that. And, you know, like, when I actually sit down and think about rid. The amount of work or the the process that my server has to do on each page that's hit, I'm, like, always pretty amazed at rid. How fast it's accomplished. And, I'm kind of a perfect freak where I'm looking at the, TTFB all the time and all that stuff. Like, I'm constantly evaluating those things. So For me, like, the server is very good at at producing HTML. So, this should not be a conversation of, Like, statically, always I mean, static has its advantages. Right? It can be cached. It can be served up really quick and fast. You don't have to do any processing to get it there, But the server is very good. So server side rendered applications, by no means, will be slow. Alright. I just had a a little note there about I hosted GraphQL, but I moved it to a different section, so hang on for that.

Oh, yeah.

Keep your hats on. I don't know if that's a saying.

We can we make it up. We make it up. To your hats. Hold on to your hats. There you go.

Keep your hats on. I got that. Re the next one is data management.

So you've you've got data. It comes from an API. It comes from markdown files. It comes from rid. All of these different areas, how do you manage that? So Gatsby has and I personally really like this. Gatsby has a GraphQL, API feature where it will it's called sourcing. So the way that it works is that when you fire up a a Gatsby thing, It will go and get the data from all of your different locations, whether that's data from Sanity, whether that's data from markdown files, whether it's data from the GitHub, REST re API, and it will normalize it all into 1 big GraphQL API.

And then you can go ahead and use GraphQL queries rid from your single GraphQL API anywhere in your your website, which is really cool. And I personally really like this because the rid. You don't have to write schemas or type anything

or or whatever with Gatsby. It just pulls in the data from your your source, And it will automatically detect types and schemas and all that stuff for you and just give you this really wicked GraphQL API. Yeah. And I've always liked it too. I I've liked it for everything except for the images because the images part like, the fact that you had to query Yeah. And do all the image transformation in the query. I always felt weird. But for the most part, I really loved being able to just, at any given point, write that GraphQL query. It would be neat if there was some there is some magic involved, but it'd be neat if there is, like, a little, like I don't know. I I think I'm just spoiled by, Like, single page component features that exist in Vue and Svelte. Like, the the single page component thing is nice because there could be a little bit of magic where you're just, like, the data. And, yeah, their Gatsby has a little bit of that, but I don't know if you're What do you mean by that? Like, single what is a single page component?

Oh, like CSS, JavaScript logic and templating?

Yeah. It kinda gets out of the realm of being a straight up JavaScript file, which is why people don't like it. Rid. Sean, Swix actually had a really neat little model of doing, like, single page,

React. And I don't know if it it gained any traction because I think React people are so used to the The whole just JavaScript thing that they, I think, are a little bit blinded by that sometimes, but that's just my I I'm I'm here for for like, rid We we made up JSX. Like, what more do you want? Like or we do want more, I mean. Yeah. Right? We we already changed the format Of the JavaScript we're writing, we're just putting HTML tags in the middle of our JavaScript, so why not why not more?

Yeah. Right? And speaking of why not more, why not, A GSX 2, please. With dude, I'm gonna stop saying salt in a second, but there's like a you know, they do, like, the 2 brackets rid Inside of a component, they just do, like, 2 brackets and then the variable name to pass that variable down. So instead of doing, like, prop Equals prop in brackets. It's just brackets prop. Like, come on. Can we at least get that? Can we Can we have that? Can we just I just want that. That's the only thing I like. Rid I'll take that. So Next. Js doesn't have anything built in for data management,

and that's not because they, like, Haven't thought about it. It's just they're intentionally saying, no. We don't we don't care how you manage your data. So go off and get Apollo or, rid. SWR, which is like, yeah, stale while revalidate, it's definitely much smaller in scope. It's basically like a a bunch of utilities around fetching data on when you should refetch that data, or you you go and get Redux. You're missing a big one.

What? React Query Oh, yeah. Is is basically, like, you could think of React Query as Apollo for, non GraphQL APIs Is really the way I like to think about it. You can do GraphQL APIs with it, but it's not as nice as Apollo in that regard. But it is you get these nice little use use query hooks and use mutation hooks, rid It does all the caching for you, and that caching is really nice. I I like, yeah, React Query is a it's it's in the definitely in the same same category as SWR here. We need a, a tasty on this because this looks awesome. I've not used this before. Or hasty. We need a hasty on it. Well, Tanner, who created it, He popped into the, chat room of our 300th episode, and we couldn't get him on the show because he had to head out to bounce. But I I've talked to Tim previously about coming on Syntax. So if there's Interested in having them come on. Yeah. Yeah. It's a it's a really, really great, really awesome platform. Sick.

Yeah. It it's funny. When we were talking about this whole, like, Next. Js is, like, bring your own data, I I had this realization because, You know, I those of you who've been listening to the show know that I've been using Meteor for a long time, and and I was trying to always figure out Isn't that dead, Scott? Oh, yes.

So I've always been trying to rid. Put in my mind, like, what is in fact the difference between these 2 platforms? Because they're both very encompassing platforms in a lot of ways, and rid and it's bring your own front end, where Next is a platform where the front end is not flexible and it's bring your own data.

And and that that to me kinda blew it all open because I also am seeing these things in different ways. It's like, oh, okay. If you if you like to bring your own data in your own rid Log in your own all that stuff, then Next is a great platform if you're happy with React. If you wanna use anything and you wanna, have that database, Like, if you wanna have that freedom for the front end, then, I don't know, Meteor Meteor is a great platform for that. So it kinda blew my mind when I I, just suddenly had that little bit of a realization that Next was making a lot of choices for you on the front end so, you can make those choices yourself on the back end, and Meteor is like the exact opposite.

Wow. That's that's a big revelation there, Scott.

Oh, okay. Okay. Mind last night. Oh, so don't don't cram it, man.

Rid No. I didn't mean to make money. I just I mean, it makes sense. I I actually, like, think about these things, and I'm like, well, Vercel, please come out with the rest of it. Yes. Like Yeah. They'll probably do an awesome job at it, and they're they intentionally are agnostic about, like, what rid CMS you're using or what data management thing you're using, and they probably believe strongly in that just because, like, otherwise, they probably woulda rolled out a I see a mess by now. Yeah.

It's funny because if if it seems like I'm talking a whole lot about other platforms in this episode, it might just be Because I haven't worked with Next and Gatsby as much this year as I did the year before, either of them, even though they both have made huge leaps and bounds. So If you if you're getting that that vibe that I'm I'm kind of allowed in other platforms, it it is really, really accurate. So I'm hopefully bringing that voice to this episode.

Rid Twitter or or, you know, something. Yeah.

It's funny. Like, we originally built the website for syntax in Next. Js, And and then Gatsby became super popular, and everyone's like, why is it not in Gatsby? And then, like, if you sit on it long enough now Now I think the pendulum is kinda swinging back to being like, oh, yeah. It is a good use case for the syntax website because, like, we also have have an API on there. Rid I pull the latest syntax into my own website, and and the syntax. F m hosts the API. And that's actually one thing we don't even have in the show is you You can't host an API with Gatsby because it's all done On build. At build time. Although Yeah. Although, there I'm I'm crossing my fingers. I got some stuff. Rid Let's let's get into the next part here.

Dynamic pages. So I'm gonna explain what I mean about these situations. So let let's say you have A website with a 100 shoes. Right? You could loop over those shoes, make a page for every single shoe, and that's good. You got a 100 a 100 shoes. And then, rid. Okay. You also have, like, different types of shoes, categories, basketball shoes, runners, casual shoes, bowling.

And then each of those shoes has colors. Rid You've gotten 6 or 7 different colors for those. And and then you have, like, sizes. You got 12 different sizes for each of those. So rid. That starts to get complicated when you wanna have a page that you say, okay. I want a page, and somebody, like, actually messaged this to me. They're like, I wanna have a page that shows me rid Basketball shoes that are red in size 5. Mhmm. Like, okay. Well okay. Now if we look at both platforms rid. With Next. Js, you probably throw that over to a server side rendered page. Yes. With Gatsby, it has to be prerendered.

So what that means is that you have to rid. Pick out every permutation of basketball shoes in red in size 5, basketball shoes in red in size 6, basketball shoes in And, you get the point. Right? Yeah. And I just did some quick math, and that's it gets exponentially large when you think about every single combination of it. Right? And then what if you wanna do size size 6 and 7 at the same time? Like, we've all seen a website with the the filter on the left hand side, and you want a filter for each of those. Has the filter rid on the left hand side.

So what happens is that you're like, okay. We we can't feasibly regenerate No. Rid 10,000 different combination pages here. So what do you do? Well, you Dynamic. Yeah. Yeah. You make it dynamic. You fetch the data on the client side. I think this is this is a bit of a downside to Gatsby is that then you have to go straight from the browser to your data source, and we I showed you how to I how to do this in my Gatsby course because I think it's important.

As if the data needs to be fetched on the client side, re There's no, like, refresh attribute you can put on a GraphQL query, refresh on client. And, also, In Gatsby, you query all the data from the GraphQL API, and that's just not available when you're when you're in production. Right? Unless you were to, like, Big brain. Run Gatsby develop on your server.

So you have to go straight to the source. Rid Like, in my course, we went straight to sanity. We bypassed the GraphQL API entirely, and then we have that. We have to deal with loading states, which is kind of a pain. So that's rid A downside.

And I just I've been talking about this all for a while, and I just finally searched it. And I searched Kyle Matthews hosted GraphQL, And I found a tweet from him in April 2020. It says, dynamic is a bit fixable too once we have a hosted GraphQL mode.

So I'm hoping what that means is that and I think what this means is that Gatsby will eventually have the option to deploy your rid GraphQL API as well, and then you'll be able to both, obviously, pre generate all of your pages, but you can also have them refresh With the latest data on the client Mhmm. Without having to do 2 different GraphQL APIs. Because that was frustrating because, like, the sanity GraphQL API It's not the same syntax as the Gatsby GraphQL API, and so you can't even reuse queries. Like, you can't even, like, Ship a query to the browser and then rerun it. You have to write the query again in the client, and I thought that was a bit of a a pain. Yeah. It is a little bit of a,

spaghetti salad at that point. Like, I feel like that that's a little bit of a a rough spot,

Especially when you think about how elegant all these things are, then you get into the weeds with something like that, and you're just like, why? Why is this why am I doing this? Yeah. I and I I love getting into the weeds on this type of thing because, like, this is not necessarily something you hit Yeah. Until you've you're way, like, way too late to to switch over. So that's a Right. And not rid. Not every website needs that, right, or or cares about that. Or maybe you decide to do the shoe searcher just entirely on the client side because who cares if You have a page, like, who's searching red shoes in in size five. Maybe that that's not necessary.

Yeah.

Next 1 is is routing, and, routing to me is the biggest thing I don't like about both of these platforms. I do love that they both do folder based routing. And folder based routing really saves you from having to write a router because it it basically looks at the folder structure of your application inside of your pages directory rid and then generates the routing based on that.

The big problem with folder based routing is that each of your page changes basically goes all the way up to the top, And you'll see the solutions for this being in, like, a wrapper file where you can wrap your code in as many providers and whatever as you need to, rid. In a, like, a file where you can import all of your providers, whatever. That way, you can do animations on mount and unmount. But the problem with that is is specifically in React. React doesn't handle animations on unmount very well, and because of that, you would have to orchestrate your entire applications Mounting and unmounting animations in the you'd have to orchestrate this all in the provider because you'd have to have all of those datas and values, whatever you're You're moving from what I'm I'm, like, trying to think of how I would do, like, customized page transitions per route In Next. Js or Gatsby with Framer Motion, and it it would not be really pretty. Like, one one thing I really love about React router setups for this rid. Is that you can have nested routes and nested routers.

So nested routes, fine. Whatever. Everybody can do nested routes, and that's something nobody understands is that Nestor routers, which is what React Router 5 and 4 or whatever allows you to do, where you physically let's say, I have a a page, and then I have a layout. And then inside of that layout, I have a whole section of the page. Maybe it's like user account information. You've seen this on GitHub where there's rid A menu like a sub menu with a content area. With Next or Gatsby, you click on any of those, and it's having to rerender everything top down. Right? And whether or not that's the layout that it's in, whatever. But in React Router, you can Have it be so that that little thing is self contained.

And that little layout, when you change a page there, it only affects the mounting and unmounting of components within that sub re Small subsection while changing the URL. It could be just like a box in the sidebar. Right? Could just be a box in the sidebar. Rid. And the the neat thing about that is you can like, for instance, I wrote a rapper for React Router that does mounting and unmounting animations of sub layouts, that would be impossible with Next or Gatsby. Just flat out impossible. So, like, the user account information, when you click any of those links, those pages can rid Mountain, unmountain, whatever, without affecting anything higher up on the chain. And that to me is, like, the biggest, biggest, biggest gripe I have about either of these platforms. When we went to move level up tutorials to next, that was, like, one of the most disappointing aspects of it was that we were losing so many of those neat user interface Touches that we had gained through React Router.

I would love to see them to add this. I think there some people don't necessarily Get what you're talking about when you talk about nested routers,

but it is it is like a a thing that I really, really love and use frequently. Okay. That makes a lot more sense to me. Because last time you talked about it, I was like, I don't understand what you're saying, which is but, like, I I get it. Like, even if you are on a user re and, like, an edit user page. So you have everything for the user admin page, but then just a small subset of the user page You were to change, then you could just animate or or switch, and it doesn't have to mount and unmount the entire thing. Like, in in Next. Js and and Gatsby, you can You can, like, put your header and your footer in, like, a higher level component, and those won't unmount and remount. Like, the the navigation won't, But everything else will. Everything else will. The whole guts of the page will. And if that's the case, you have to have the same layout for every single page. You can't sort of step outside of that. Right. And I think anybody who's tried to do mounting and unmounting animations on Gatsby and Next will instantly get what I'm talking about because There are so many hoops you have to jump through, especially when you're talking about, like, nested anything there.

Let's talk about hosting real quick. Rid Where can you host these things? Anywhere.

Anywhere. They're they're very easy to host.

Gatsby is just HTML, CSS, and JavaScript At the end of the day, so you can you can literally put that anywhere. FTP. But in most cases, you have a build step with both of these, so you'll need something to to push it. Rid I think that's that's good. The hosting hosting thing looks good. We'll talk about serverless in just a second, but hosting looks good for both of them. Yeah. Rid Yeah. The we will like I said, we'll talk about the serverless thing. It's it's a little weird that you get a better hosting experience

With Vercel of the Next. Js than anywhere else, but I guess that's the that's to be expected. That's how they're Yeah. Gonna make money. Businesses. Yeah. Yep.

Rid. You know, it does it does sometimes feel like that's like like, what what are they like, an intentional roadblocker put up? But I I honestly don't know too much about Specifics there, so I don't wanna say anything because I I honestly I don't know. And and and it is absolutely their it's their platform. So, it would be absolutely right for them to make money off their platform in that way. So I have no problems with it. It's just that it is one thing. Let's get into, images, and images are a big deal. And, Wes, I actually found something really neat, because I I know you have a lot to say about next new image component.

I haven't used it or checked it out too much. I wanna hear all about that. But regarding some of Gatsby's updates, I have rid Some neat little information to share. So you you can go ahead, and I'll I'll drop my tidbit after. Yeah. Yeah. It was just, it's, like, literally, like 20 minutes before we recorded the show. There's a bunch of tweets flying about updates to Gatsby. I don't understand what you think. I got code. You got code? I got code.

Alright. So images in both of these platforms, you wanna compress. You wanna resize. You wanna lazily load them. When people scroll into view, you want to Blur them up so that you can you can run, like, blurred versions. And then while you load them, it it it fades in nice. You, can do that cool SVG trick. I don't I still don't know if that's actually really cool or, like, if it's a gimmick or if it's, like, a real, like, where some you the way that it works is that you have an image of, like, Scott. I think it's pretty cool. And it will trace, like, Scott's face into an SVG and load that up while the image is downloading, and then it'll fade it from SVG Scott into Pixel, raster base, Scott. You think it's cool?

I think it's cool. I think it's cool for like, I I think you're playing a dangerous game if you're using it with faces because rid You're gonna get somebody who's got a really, bad looking SVG face, and they're gonna get upset about it. But I think for some images, it's very Cool. In other images, I think it's out of maybe a per case basis. I'm definitely more likely to use the blur the blurred version than the SVG one, but, I think it I think it has its use cases.

You know what? Would it be funny is if it automatically colored it like the Barack Obama hope poster It'd be great. For faces? Yeah. Well, it's, like, loading in. What's that guy's name?

Fairley? Rid Shepherd Fairley. Shepherd Fairley. I knew it wasn't Spencer.

Shepherd Fairley, the, the famous Obey guy. Is he the one that designed that? Yeah. He designed it. He did on May. He's done a lot of very fantastic art.

Cool. Yeah.

So with these, up until, Like, what, about a week ago at the time we're recording, Next. Js had no skin in the game for how you do images. And I even when I re Launch my own website. People are like, hey. Why don't you use Next? And I was like, well, images.

And they're like, well, why don't you go and use rid. Cloudinary or whatever. And, again, I've said this many times. I'll say it again. I love those services, but there's something to me rid Where if there's a core feature of your application that can't be done without paying for a service, That sort of pushes me away. Like, not that you shouldn't pay for these services. They're great. I I also use them on I use Cloudinary on a lot of them. ImageX is another one. But If if you can't do part of it, I I feel sort of the same way about search. Everyone's like, just use Algolia.

And, like, I love Algolia. It looks awesome. We're we're trying to integrate it with rid our website.

But, like, wouldn't it be nice if you could also just run that on a airplane where you had no Internet or if you wanted to just not have to pay for these services? Because, like, I rid I know sooner or later, we're gonna wake up, and we're gonna be like, wow.

These services are costing me $100 a month rid For, to run my own personal website. So Death by a 1000 services.

Death by a 1000 services. Exactly. Like, I always thought it would be funny. You know when you, like, go and pick a Mac And you, like, customize it, and you're like, what's the most expensive Mac I could make? Yes. I thought it would be funny. Like, what's the most expensive personal website you can make? You know? Like, very funny. I love that. Yeah. Back end, front end, re continuous integration, testing, search But only necessary. Yeah. Yeah. That's very good. Rid Could you go a 100% paid services?

Yeah. Mhmm. That would be good. Don't they call that no code movement?

Is that what they call that? Rid No code. So let's talk about Next. Next rolled out their image component. It's very early days for it. I think that they they pushed out what they had at rid time so they could announce it at, Next Chezkoff because it's not as good as the Gatsby image yet, but, like, I don't foresee that being an issue rid of swaying you either way. I guarantee it will be just as good as as Gatsby Image in a couple months from now or whatnot. They had a it looks like They had a dev at Google work on on all of it. So it's awesome because you just have an image tag. You give it a source, And that source can be a remote source. It can be a local source, and then you can specify the quality, the width, and the height, And it will regenerate all of the different sizes for you, and it will lazy load them in as you need it. It'll convert it to WebP and try to serve that up, and Gatsby Image does all of this as well. It's great. It it just takes all the hard stuff around making images good on the web and just puts it into a an image component. So it does Doesn't do blur app currently. It does do lazy loading. Both of them don't support GIFs, which is super annoying because, like, with Gatsby, you have to code your own fallback component, which I'm sure they'll fix at some point.

One of the big pains to Gatsby images is you have to write a GraphQL query just to get an image. Now you do. Yeah. That looks like it's not the case anymore. There's a GitHub thread that is proposing to do very similar to what Next is doing is just have an image tag And figure it out for me. You know?

Proper props where props are due. Gridsum did that a while ago, over a year and a half ago. Yeah. I was just looking at the Gridsome docs that you linked here, and, like, this is what I've wanted forever. I have no like I have it highlighted in gold, and it says the gold Standard in the links to grids and images. So,

check that out. It is the the gold standard because, like, also, another thing with Next. Js currently is you have to give it a width and a height, Whereas Gatsby has this idea of fluid and fixed images where you could supply the width or the height, or you can supply both, and then it's a fixed image. Rid. That's not currently something that works with Next. Js. Yeah. And then there also is an image and format auto. Cloudinary has a setting where you can say Format

auto and quality auto. Yeah. And it just picks it for you. And I was like, yes. That's what I want. If if they support web rid. WebP, give them WebP if they support whatever any of these new formats are. Literally, any new formats. And Gatsby do do the format thing. Oh, they do auto format.

Rid Yeah. You well, they not auto format, but they will try to serve up a web p. But what I'm thinking about is, like, you know, sometimes, like, a JPEG is

I love that f auto. I I it's just like the day I dropped that on everything. I was just amazed at the sizes of images always serving up. So you wanna tell us about the Gatsby,

image updates?

Somebody linked me to docs.

Sophia Andrin, re She linked me to the, updated docs for what will be the new Gatsby images thing. So if you do go to Gatsby plug ins images, there's the read me for the experimental image plug in, which will, most likely I don't know if this is gonna be the final rid But this seems to be the the code which shows a a static image component where you're passing in just the image rather than doing a GraphQL query, Which I love, and, I haven't I haven't really because she only sent this after we started recording, so I haven't really had the time to read this. I'm Not good at parsing stuff like that while we're while we're chatting here, but I'll leave this this in the show notes so you can check this out yourself and give it a look. It seems to be, pretty neat.

Yeah. I I just give it a quick scan, and it looks like you can use it anywhere so you don't have to query them at a page level, which is a re Page versus static query. This looks awesome. It it basically just gives you a image tag static image tag Yep. That will allow you to do and the only rid. Downside, it looks like, is you can't have a dynamic

width and height because You can, but I think you have to use the GraphQL interface still.

Rid. No. Because GraphQL queries cannot be dynamic. They can't be Gatsby. You're right. You're right. You're right. Unless unless they're at a page level, but, like, you can't change it in the browser, and you can't change that at You can't calculate it at build time because it has to has to be known. Right? You can't put variables into a GraphQL query. You get the the upside of it all being static and super fast and and whatnot, but then you also get I I think a hosted GraphQL will rid Will help us out there as well. Totally. The last thing we have here is one huge pain point for Gatsby is, you have to generate all your images rid a build time. And for web a lot of websites, that means a long time to generate it. And again, that's another thing rid. Cloud will do. I personally use something on Netlify that pushes them off to Google Cloud and, like, does them concurrently, But it's still kinda slow. And then, once you do it the 1st time, it's not as bad. But, like, if you have to delete your cache folder Oh, come. Because you're gonna be you might as well go get lunch If you've got a lot of images on it, and the next year says them on the fly. Right? 1st person that does it, it probably be a little bit slow, but then then it's generated on the fly. And I and that's also what Gatsby rid be does in in development mode. It doesn't Mhmm. It can just do them on the fly, which I wish they did in production, but, obviously, that's the downside to not having a server.

Yeah. Right. Always a consideration.

The other thing you wanna take into consideration when working on applications is rid. Having issues in your application. Because if you have issues in your application, you're gonna wanna go ahead and use a tool like Sentry. Now you might be thinking, Sentry, On a static website? Well, hey. Sentry works on front end code as well as it works in back end code. In fact, it's really easy to drop into a React project and get all of those re React errors that you might have in your application in your Sentry. So it's not just for server side code, and it's not just for straight up node code. It's for all of your code. We use Sentry in both our API as well as our React setup. And let me tell you, it's really nice to be able to have both of those setups and see any sort of issues And set up your React error boundaries, or you can just capture those exceptions that may happen. Anytime your users are getting a white screen of death, you're gonna wanna check out [email protected].

Use the coupon code tasty treat, all lowercase, all one word, and you're gonna be able to solve any of those bugs in your front end code As well as the back end code too if you're using any of that server side stuff.

So to get into it, let's actually, move to the server side stuff, which Little hint there. Let's talk about the server and or serverless platforms here.

Gatsby, they got nothing In terms of, like, what does Gatsby do themselves, they don't do anything with your your server side code other than the static generation.

There is no serverless platform For Gatsby, so to say, but that's could be seen as a strength because you can use whatever surrealist platform you'd like. Right? If you wanna use, AWS, you wanna use Netlify or begin any of those serverless function platforms that exist out there, You can use that, and and you can do it yourself. But, again, Gatsby itself does not not do anything there. No. No. It's just,

in some cases, that's good because you're just like Like, you can do it, obviously, but not with with what we do. Next. Js has API routes, and we said, we talked about API routes when we talked about rid The syntax website being updated because we moved all of the custom node code and the custom no node server that we had on syntax, And it moved all over to API routes, which if you haven't done this before, it's a it's a folder in your next app website, and then you can run rid Server side code on there. We got a message from Tim who runs a he says, for some reason, it sounded like we said you can't run the API routes Unless you host on Vercel but the thing we should say is that you can host the API routes anywhere.

It is only serverless if you host it on Vercel. Right. Rid Yeah. Right. So if you host it on DigitalOcean or something like that, then it's just a node app, which is it's just fine. Like, in a lot of cases, that that's all you need. Re It's only special serverless when you host it on Vercel. There is a couple community projects to try to get it to work on. Like, even I I reached out to rid. Brian LaRue, who works on Begin, has a cake. Can we host next? Yes. On Begin ended up not being possible, which is a bit of a bummer because it'd be cool to to move this thing wherever you want. But that is to say, if your app goes down on Vercel, Like, for whatever reason, if you wanna move like, I'm not saying you should. I love it. I host my we host Syntax there, and I host a bunch of my projects there. But if you need the option to move somewhere else, re It is doable on a server, but if you need the server less, then you have to yeah. I'm sure you can configure Nginx and some API gateway or something like that

rid Sounds like I should make it work. Yeah. I do wanna say that any experience I've ever had hosting on Vercel has been very positive. I think they get it in terms of the UI of things and the flow of things. Like, with Netlify, I I think they got it first. Maybe not first, but they got it, right, to make it easy. And I wanna say the first isn't before Vercel or something like that. I don't get into that. They got it right, and then Vercel also got it right in terms of just make it as easy as possible.

The thing I hate most in life is tweaking rid. NGINX file server, like, bring my server down as I goofed up an NGINX file. Like, no, thank you. Let's make it very, very easy rid. For me and and it all I think that all goes back to like, I I don't know if Heroku was the 1st ones to make it super easy, but, like, I love it. Bring on the easy hosts. Bring on just the push to deploy, not having to think about continuous integration. I don't wanna think about any of that stuff. For sure, repo, let it go. You know?

Let's move. We got we have SEO here, but both of them do SEO.

Great. Rid Yeah. So next, if it's rendered by the server, the Google bots can get to it, then it is good. Okay. The plug rid. Ecosystem. Gatsby has a ton of plug ins, and you know what? Gatsby's done that since day 1. Kyle himself probably wrote a ton of those initial Plugins, and they existed from the very first time that I found Gatsby. I clicked on Gatsby. I clicked on plugins, and I was like, what? There's a lot of stuff here. So it that kind of thing really gives you confidence in the platform and that there's people using the platform. Now this is funny that you said get Next. Yes. Has, plugins too, but I haven't used a single plugin, I don't think, for Next. Js ever. Do they make these things known? Yeah. There's there's a a whole repo called Next Dash plug ins. Yeah. But there's a re is it on their site? Like, if you could I don't think so. Yeah. That's about it. Thinking about this now. I've never used the Next plug in either.

I think because Next doesn't handle the data layer like Gatsby does, re There's not a whole lot of not necessarily sure if it's need or whatever, but there's not a lot of plug ins. And I think it's it's way easier with Gatsby just to throw in a plug in, a site map plug in. Bam. Throw it in. You're you're up and running. And that's not to say you can't do these things. You can do anything you want with anything. But in my experience, it's been much easier to click these things in. And I think that's key for the market that is like WordPress devs who are coming from rid The standpoint of if you need functionality, you can just click in something without a whole lot of fanfare.

I think that's part of who Gatsby is targeting, which is, like, I don't think Next. Js is targeting those types of people. So that's it's even another thing to say is, like, who are these platforms for? Right? Yeah. Rid. Although I, you know, would say that one experience that I would have liked to be better on Next. Js would have been, like, the Apollo experience. So, like,

Specifically getting user data available on server in time, I had a a mess of, like, rid. Almost were, like, circular dependencies, and I felt, like, very close to, like, this needs that, but this needs that, and this needs this, but that needs the thing before this before it even gets going. So how am I'm gonna get, like, how am I gonna get this data? And I I I had to, like, initialize some of my code twice when, like, I shouldn't have. And Granted, the cool thing about Next is their examples repo is top notch. Right? Those examples Yeah. The folder in their examples repo is very good. But the moment that you have to get outside of some of that stuff, I found it to be a little rough, and I would have loved for, like, a plug in to be like, oh, there here's the next rid Apollo plug in. You install that. You pass it this, whatever. It's all all taken care of for you. You know, granted I don't need it, but it'd be nice. Ready. Yeah. I agree. There's Lewis who actually, he he started this plug in when I was building one of my React courses. It's called Next with Apollo, and it is the plug in now ready to use it. And he he does an awesome job. It works great, but

just the there's often a disconnect between next and Apollo, and you get, like, weird loading states or, like, Loading is true or false, but there's no data, and then it rerenders again. And there's lots of little edge case, and I would love to see Like, get those Apollo and and and Vercel in a room and be like Just make it easy. All my pizzas if you guys can make this work. Yeah. Right? How about how about you figure out a way to make it as easy as Meteor's data set up, and I'll be I'll be, very happy. Rid Totally. Next step is auth, and neither of these platforms do auth in my, oh, in my opinion here. The first to do find some way to do easy auth is gonna see some big gains from that.

One of the reasons why I I think a lot of people really liked Meteor at first was because, like, you just drop in accounts. Like, we're talking about how easy the image plug in and, like, the new Gatsby image plug in. If you wanna see easy, counts, check out my auth. Rid. I I made a a plug in for Meteor auth and Svelte, and you literally import login window from accounts UI, and then you write rid. Log in as a component. There. You have accounts. They just work. Right? You get the password reset stuff. You get a login button. You get register. You get all that stuff. And, like, somebody rid Figure out the easiest way that we could get log in in Next. Js or Gatsby, and, I'll be a I'll be a happy customer. That's for sure. Rid. Yeah. I think the Next is not doing this because it's the job of the CMS.

Right. Yeah. The data layer. And, that's Keystone and Strapi have made that. Rid What you're asking for, that's in Keystone and Strappy right now. But I don't like it as much. No?

No offense to Keystone and Strappy. Neither of them have done it in a way that is as rid. Easy as Meteor did it. So, like, okay. That platform did it that easily in 2015.

Okay. It's 2020.

Rid. Why can't you make it that easy? You can just make it that easy. Yeah. I think the the frustration of a lot of these things that we're saying is, like, we want rid The rails of JavaScript. And we have lots of these things out there, but because the JavaScript ecosystem is rid. Bring your own 500 different things, and everything works interchangeably with everything.

Nothing in JavaScript is opinionated.

And because of that, We have these things where everything can work together. It just takes, like, a little bit of configuring or a lot of bit of configuring to to get it to work.

Last thing, ecommerce.

Doing ecommerce in Gatsby and Next.

With Gatsby, the options are limited to, like, headless rid. Shopping cart. Snipcart is a big one. Shopify, there's tons of them out there. But at the end of the day, if you're gonna have a cart and charge people's cards. You need server side code to be run, and that is either you have to fire up a server, run serverless functions, or pay a service In in order to do it so I honestly don't think Gatsby is a good use case for ecommerce. People ask me this all the time. I have 2 courses on Gatsby ecommerce. So, like Oh,

I don't mean to say that as in, like, you're wrong, but I mean to say that as in, like, I I have a a fair bit of experience there, And I have used several different ways whether it's just Stripe, which changed their API on me after the tutorial is released. Thank you very much, Stripe. And then Shopify and Snipcart or anything like this. And with Gatsby, the big problem with ecommerce and Gatsby rid is that the majority of the ecommerce functionality that you're going to be doing is gonna be taking place off your site. Yeah. So whether that is the cart rid functionality, which, sure, you can build your own cart and submit it to to Shopify or or whatever.

You can do that. That's fine. But once you get into the shipping screen, ridged. Like, their past orders, if a user wants to check up on their order, there's a lot of things there where these platforms you're going to need a service like Snipkart or Shopify. And without those things, it's not gonna be pretty because, again, the user account information cannot be generated. So you're gonna have to write, like, just about everything custom, Which I guess would get you to the the same point you are at with Next where you do have to do everything custom anyways, but at least a lot of that can live on your site rather than having to be an Iframe on your site. Well, that that's even another another good question is, should you even be doing any of this stuff custom, or should you just, like re Ecommerce is is a hard, hard thing. Right? And,

if you're getting into the weeds with ecommerce, you're probably better off rid. Reaching for some sorta

existing solution out there. Let me even plug an existing solution that I really like. It's called ReactionCommerce.

I don't know if you've seen Reaction Commerce, used by Fila. So shout out to Fila.

Yeah. Reaction Commerce is a really nice. It has, 1010,000 some stars on GitHub, and it's a really nice modern there's a company behind it. Right? But the code's on GitHub.

So what's neat about this platform, I heard about them because they initially built on Meteor. Now they're their own custom thing, but It's a really nice modern platform compared to, like, this giant monolithic corporation, Shopify.

Shout out to Shopify, but I I I'm not talking I'm not talking Trash to Shopify by any means, but it's a little bit more of, like, your own thing rather than, you know, somebody Like so is this This is the, like, the back end for your your commerce, or this is a I'm pretty sure it's React in the whole thing.

Okay. But, like Yep. This is not just a UI. This is actually like, it does shipping and orders and So, so Reaction is an API first re Headless commerce platform using Node React in GraphQL.

The UI is really nice. The The plug in system's really nice. When I was initially building level of tutorials, I was building it on the reaction commerce, rid. And then I, like, realized I need a lot of like, too much custom stuff with my subscriptions to to really go for it. But now I I wish I would have because they're rid The amount of, like, stuff that they do for you regarding those things, whether it is subscription orders or shipping or whatever, is like, oh, I gotta code that myself now.

Like, so I would check this one out. It's a neat platform. Pretty cool. So we'll talk about Next. They released, rid a boilerplate

for using Next. Js with commerce, and it's awesome because, like, it all the website runs on on Next. Js, but the all the heavy lifting will go to any headless shopping cart solution, Shopify Snipcart.

There's a 1000000 of them, out there, And that's pretty cool. And I I also like another thing we're not really talking about with this ecommerce is that a lot of times, especially Shopify, It's not just add to cart or whatever. It's the logistics of integrating with shipping providers and There's so much there.

Where that product lives or if you're drop shipping or if, like, you have a store as well where the product is shared between inventory and all that. Connections rid All these services

weighing and yeah. Oh my god. Yeah.

So that's why, like, Next is saying, like and re I I think Next is a great solution for doing ecommerce because, like, you can. Like, I do it in my advanced React course. You can do it entirely in rid. On server side with Next. Js and then just charge the card with Stripe APIs and all that, you can do that in in lots of cases. And that would be a perfect use case for rid Something like Scott and I. But as soon as you need to get into much more complex stuff where you need fulfillment and whatnot, then, yeah, you you certainly lean on, An existing solution out there. Mhmm. WooCommerce, we talked to, let's shout them out. Scott and I are we're looking at doing syntax shirts, spoiler. We're gonna have some sick merch for you pretty soon. We reached out on Twitter.

David Lindahl, who runs this really cool Activewear? What what would you say this is, Scott? Act I I Mountainware? Coloradawear?

He might be, like, Be upset of calling it Coloradawear, but it is very Coloradawear.

It's very Patagonia wary. You know that? Yeah. So he runs on on WooCommerce

Because he was saying just because of the the actual price of of running WooCommerce is way less for his little side gig here. It's called Rainier Watch.com.

If you want some some sick shirts so he he gave us, like, half an hour of his time. Just let us pick his brain, so we'll link up his brand here in the notes as well. I think if you're doing ecommerce, Next. Js is a good solution, over Gatsby, but, certainly, you can do both of them.

Just a lot of stuff. Yeah. Yeah. It's a lot of stuff. And, you know, I think these both of these platforms are very good, and we will see rid. Change is an evolution over the course of this year with both of these platforms, and and I'm I'm really excited because evolution of both of these Platforms means evolution in the work that we get to do, and so I'm excited about it. And, hopefully, a lot of great stuff comes out from both, next rid Teams, the Vericel team, as well as the Gatsby team.

Yes. And, like, again, shout out to everybody who's working on this kind of stuff because, like, rid Sometimes I feel bad saying anything. I don't really don't necessarily wanna do these these, like, versus shows because, like, here I am rid Talking, running my mouth into a microphone where there's, like, actual developers, like, working on the stuff day in and day out. So,

appreciate all the work that everybody does on this stuff because they are both 2 wicked platforms, and I love to use both of them. Yeah. Likewise. Yeah. And and and I would I would definitely stress that, like, don't take any bit of criticism that Wes or I ever have rid. Is is being, like, criticism of the work involved because I think both of us know firsthand, like, what that work looks like and how hard a lot of these problems are. So, Yeah. I I would I would certainly not want, our critique in any regards to be used in that way, but, shout rid To all of the the developers working on these really tough problems.

Alright.

I think that's it. Let's move into some sick picks.

I am going to sick pick another kitchen tool that I absolutely love, and that is deli containers. So A deli container is basically, if you get takeout from a gafaa place or something like that, you get this, like, plastic container with the plastic lid, and it's clear.

Ready. So I've been watching a lot of, like, food YouTube lately. And over the last years, I've seen Bon Appetit. They use them for everything. Re You can get them in 3 different sizes.

They're recyclable.

The lids in the bottoms are 2 different kinds, and I made sure before I bought them that they were recyclable in my where I live because I know I'm gonna get some hate for recommending a plastic piece of plastic.

But these things rid are the best. I took all my spices, and I switched them over to using deli containers. Oh, I saw that. Spices. Yeah. I saw that. Man, it rid It's just life changer because I can, like, see everything. They stack really nicely.

They're really durable. You can microwave them. You can throw them in the dishwasher.

It's just it's just awesome. Like, we we started getting them sort of like a replacement for for Tupperware, and, I'm I'm rid. Almost on the bridge, we have, like, this, like, glass lock where it's like a plastic lid and glass bottom right now. And I like it, but there's something about just these deli containers and how How flexible they are for for storing leftovers, for storing spices, for storing, like, pasta. You open up a bag of pasta.

You can just throw it into one of these. And and then when you you use the big one, and then once the leftovers get below a point, you throw it into a a smaller one, and you you can re your your fridge nice and tidy like that. So pretty big game changer for me in terms of cooking and organizing the kitchens called deli containers. Rid Yeah. You know what? With the the biggest problem we have with our spices is that they're in a lazy susan that's, like, at child level, and we have, like, a

floor.

The Brooklyn just goes, I got those buys, and the spice goes everywhere. That's been a huge problem in our household lately.

Rid. I'm going to sick pick the this is a tool that I used several times, and it is like okay. I had a preface as we're in our old house, old drains, all this rid Our drains clog up all the time.

And, I was reading about how bad Drano is for your drains, and I really like rid. The the ease of a solution like just pouring Drano into the drain, but that's really bad for your price. Not good if you have a septic tank either. You can, like, kill all the bacteria.

Yeah. You can you can do bad stuff with Draino. So I've moved entirely to this thing called the the COBRA drain Zip It, And Oh, we've got one of these. Oh, yeah. Disgusting. It's disgusting.

It's disgusting to use because you're shoving it down a drain. What it is, it's like a little like, it's got, like, little hooks rid It's a long little zipper plastic thing. So it's a a decently long piece of yellow plastic with these little hooks on the end, and what you do is you rid. Shove it down the drain, and then you pull it out. And when you pull it out, along comes everything that's stuck in your drain. And I like, I could I could fix, for the most part, all of our drains in about, like, 5 minutes on, like, just total through the whole house. Just go and and rid. Just zip it on each of the drains, and they're just instantly unclogged.

So, this thing is fantastic.

It's it's $7.

So, like, to have something around the house, that is nonchemical.

It's not gonna hurt your pipes. It's gonna be super duper easy and can get anything out. I love this COBRA rid drain, zip it, and I use it all the time.

I remember, like, our our shower was draining, like, really slowly. Slow. Yeah. And I never knew that the drain cover came off, and we had had this shower for I can't figure out how to get mine off. I I still can't figure it out. They all come off. Like, they all have have to be creative. I kinda stick chopsticks in it and turn it. It it was threaded.

That's probably rid I thought yours is threaded, or, sometimes there's little, it's just you just gotta yank it, and it'll pop out, because some they just have little tabs. Anyway, yeah, put it down there. It's rid Gossing it. Like, it takes up an entire, like, hairball. So she's like so gross when you're Yeah. Smells terrible. Yeah.

Good tool. I think I mine was just a couple bucks at Home Depot. Definitely, if you see 1 or this is definitely one of those, like, buy it before you need it tools.

Oh, yeah. Oh, yeah. Just definitely buy it before you need it and in the, like, longer the better in my mind. Yeah. That's that's a good tip.

Rid Alright. Let's move into some shameless plugs.

I'm gonna shamelessly plug. I'm gonna go agnostic on framework today. I have a master gats rid be .com course, which is built in Gatsby.

And I have a advanced react.com, which uses Next.

And that one is just about to be, updated.

Let's see. This is a month out. It might even be released by the time, rid. You're listening to this. So check it out at advancedreact.com.

It's using Keystone as the back end. And Keystone, little tip. Rid Nobody knows this yet, but by the time you're listening to this, KeyStone is rewriting their back end again on Next. Js.

The whole UI for editing in the CMS is gonna be in Next. Js, which is pretty cool. Neat. So I'm going to shamelessly plug ready. My Black Friday sale along with the latest course as of the time of recording this, for those of you don't know, I release a new course every single month. The most recent one is animating Svelte, and it is just showing you just how easy it is to build custom directives to rid To toss on stuff with, like, you gotta see some of the stuff that I'm doing in animating Svelte. Like, for instance, I built my own drag plug in. And to make anything draggable, All you do is you'd say use colon drag on anything, and then it can drag in any dimension. It's like toss it on the model. Oh, you can just drag it around. Rid. Oh, you wanna have actions fire? That's amazing. An action can fire when you hit the certain threshold, and then it it's so super easy. You you attach it to custom JavaScript events and all sorts of neat stuff, and that's all in the course. So if you wanna learn how to do that kind of thing, check out level up tutorials at .comforward/pro.

Sign up for the year and save a 50% right now, only right now at the time of when you're hearing this because The sale's gonna be over very, very soon by the time you're listening to this. So head on over to level up tutorials.com. Get that course along with 12 other are additional courses over the course of the year, not to mention the entire back catalog, which includes a mammoth amount of things at this point. So check it out. Leveluptutorials.comforward/pro.

Alright. That wasn't the longest show in the history of ever, but we needed it to be so we could get through all of the different pros and cons. Hopefully, you enjoyed that one, We will catch you on Monday.

Word. Peace. Peace.

Head on over to syntax.fm for a re 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.

Rid.