907: Wes’ New Site: Gatsby → React Server Components

Wes rebuilt his personal site from Gatsby to a modern stack using Waku, React Server Components, and Cloudflare Workers — all while keeping the same design. Scott and Wes break down the pain points with Next.js, MDX, image handling, caching, and the custom setup that now powers a blazing-fast blog. Show Notes 00:00 Welcome to Syntax! 01:03 Barcelona Conference. 04:09 Brought to you by Sentry.io. 04:33 Existing stack, goodbye to Gatsby. 06:11 New stack, the goals for moving. 06:56 So what is the new stack? 08:32 Challenges with NextJS. 08:58 Problems with plugins. 09:30 Problems with dynamic imports. 10:21 Problems with Cloudflare deployment. 12:37 Landing on Waku. 13:59 Hot Tips functionality updates. 16:30 Blog Posts + JavaScript Notes. 17:09 Moving from Gatsby. 19:03 Page speeds. 19:29 Removing nav resizing process. 21:03 Writing custom MDX plugins. 23:28 Hosting. 24:08 Why is the build so fast? 28:01 Pricing. 32:25 Caching. 34:49 Migration errors. 36:37 CSS. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, we're going to be talking about Wes's new website. He moved it from Gatsby to React Server Components. So there's a lot of lessons to be learned here, and I'm excited to get into it, learn a little bit about your experience, and just general get the vibes for what the type of re-rate like this actually costs. My name is Scott Tolinski. I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes?

• 0:27Wes Bos?

  Hey, I'm super stoked to actually have this out the door. So one of those projects I've been poking around at for quite a while. You know, those projects where it's like not super pressing, but every now and then I dip into it. And finally, I was like, I gotta actually finish this thing. Let me get this thing out the door. So I learned a lot about moving it from Gatsby. I'll talk about why I moved it and whatnot in just a sec, but learned quite a bit as well. We're going to talk about how to migrate over as well as hosting it. I put it on Cloudflare, how much that costs, all that good stuff.

• 1:02Scott Tolinski?

  Nice. Sick. I just got back from Barcelona at the Svelte Summit, Wes?

• 1:07Wes Bos?

  Yeah.

• 1:07Scott Tolinski?

  How was that? Man, cool conference. They had it in this like really kind of old rustic kind of building. You said it looked kind of like a prison, but it was really cool. The whole thing was just like felt like very specific vibes to it. And all the talks were great. You know, there's something really special about a smaller conference where all of the talks are about like one common thread. Like you really feel like you can get something out of all of the talks. And there were like several speakers who it was their first time speaking and they like, you would have never known. They were just like, every single person was dialed. Everybody was there for the same reasons. It was great.

• 1:48Wes Bos?

  What was your talk on?

• 1:49Scott Tolinski?

  My talk was on local first with zero, basically, talking about how

• 1:56Scott Tolinski?

  Local first as a, as a concept is like, it's fairly rigid in terms of what local first is defined as. But like, not every site can practically use all of those things. So maybe more like local first-ish and how that pertains to something like Zero. Even like the guy who created Zero tweeted out, it's like, Zero is not local first. And like, that's pretty much what my talk was about. Yeah, it is pretty cool. Also, I gotta say, there's a really funny moment. Just forgive me for telling this story really quick. After, after I spoke, Wes, I was wearing my Syntax Big Perp tee. I'm wearing jeans and a hat. And I went to go out to eat and I was just like, alright, I'll go out to eat.

• 2:42Scott Tolinski?

  And I found this place, you know, the, I looked at the, so first and foremost, I looked at the menu and the prices did not look bad. And maybe it was the lunch menu because I walked in and I talked to the guy and I asked for a table for one. He says there's no tables and then he goes off to talk to another guy. And they're far enough away that I cannot hear what they're saying, right? And then they come back and he's like, we have a table. And then as they're walking me back into the dining area, which I could not see from the entrance, I have this terrible feeling in my stomach because every single man in this restaurant was wearing a full suit. And all of the women were wearing like fancy dresses and I'm wearing jeans and a t-shirt and a hat.

• 3:26Wes Bos?

  Like a mineral wash purple t-shirt.

• 3:29Scott Tolinski?

  And they're walking me back to this table and I kid you not, this table could not have been more hidden. They hid me. They, there was these two massive plants to the one side of the table. And then nothing in front of me, a window to the right of me. So like, if you were walking into the street, you might be able to just see my back. But from any other vantage point in the restaurant, you're just seeing plants. They hid me.

• 3:55Wes Bos?

  That's hilarious.

• 3:57Scott Tolinski?

  They didn't want me to be seen, uh, which I don't blame them. It was, uh, what, uh, I was just like feeling, oh, wait, oh no, uh, maybe I'll just get an appetizer and bounce.

• 4:06Wes Bos?

  Yeah, I don't belong here.

• 4:08Scott Tolinski?

  Yeah, totally. And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io forward slash syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io forward slash syntax. Again, we've been using this tool for a long time and it totally rules. All right. Let's get into actual real stuff.

• 4:34Wes Bos?

  Yes, let's get into it. So my personal website, this is not my like course platform or anything. This is just my personal website that houses several things. It has my blog on it, has all of my like hot tip, screenshots and videos. Um, and it has all of my notes for my, my JavaScript content as well. It's just like pages and whatnot about speaking and about me, et cetera. So that website I built, you know, probably six years ago, um, right when Gatsby was starting to have its sort of come up. And I built the whole thing in MDX on Gatsby and I was really happy with it for many years. However,

• 5:13Wes Bos?

  it grew to a point where it was getting very slow to deploy it. Um, because when I built it, Gatsby was simply just a static site generator. Um, and that included all of the, the actual images. And it grew to a point where I have, I don't know, probably, I think there's about 600 pages on my website. And I think there's 4,000 images or something like that. And it was taking like up to 25, 30 minutes to build the website without any like caching. And that was including like trying to process the images on like Google Cloud Compute and doing them in parallel. And I, I got to a point

• 5:54Wes Bos?

  where I was just like, I'm, I'm not putting anything on my website anymore because I don't want to fuss with it, you know? And, and that's not a good spot to be. So I was like, I gotta, I gotta get somewhere where. Adding content to my website is fast and easy to a point where I want to do it. So I decided, all right, let's move it off. And my goals for moving this off was I don't want to change the design. Even though it's a relatively old design, I'm very happy with it. I don't want to change the functionality because that's a can of worms. When you start migrating something, if you also want to change like what it looks like and how it functions, then it becomes too big of a project.

• 6:35Wes Bos?

  So I thought I can do that after, but let's just get this thing moved over one to one to a different framework. And then most importantly, I wanted to improve both the build time as well as the like the page speed score. The perf on that, there was some low hanging fruit that I could do to do that. So I, I decided that the new stack, I wanted to stay on React because even though it was built on Gatsby, like 90% of the website was simply just like templating out and logic and whatnot. And no JS logic at build time, React logic on, I guess it wasn't really on the server, right? It was just, it was just pre-rendered HTML and then on the client.

• 7:20Wes Bos?

  So I wanted to stay on React so that I could just simply move over all of my existing components. It was, I was kind of tempted to redo it in Nuxt after talking to Daniel, but I was like, that's too big of a job. I'm going to stay on React and I want to stay on MDX as well because I had written 100, I think, like I said, about 500 JavaScript notes and blog posts that were all written in MBX. And I was not interested in moving that to a different CMS or anything like that. Plus like my, my beginner JavaScript course, I had it entirely, I paid a technical writer to basically take it and build

• 8:01Wes Bos?

  text notes and it's a huge, huge resource for it, right? And I love having that on GitHub because I've had, I've probably had three, 400 pull requests for clarifications on the content, little typo fixes, things here and there. And I, I don't think that I would be able to do 400 fixes to this content by myself. So I was, I very much wanted to keep that on GitHub. So what I did is I said, okay, I want to build this thing in React server components. It's starting to get more popular. I really want to understand how it works. So I moved the entire thing to NextJS and I was not super happy with it. And I'll tell you why. And this is not a, like a, like really a slam on NextJS.

• 8:45Scott Tolinski?

  No, roast it, Wes.

• 8:46Wes Bos?

  My personal project of I want to keep this thing similar to how I had it in Gatsby. It just didn't really fit into the holes that were NextJS. So I had problems with TurboPak and, and all the MDX plugins that I have. So I had to keep going back and forth between turning TurboPak on and, and turning it off. NextJS is still entirely common JS. So there was like a bunch of like weird edge cases where I couldn't import packages and I was pull requesting them. And it was just like weird annoyances where I just spent days on these like little paper cuts. And then I opened issues on the NextJS. A lot of them were fixed over time, but I kind of got frustrated with that.

• 9:30Wes Bos?

  Dynamic imports were, were a bit of a pain. So the weird thing about these websites, and this is not a NextJS thing, but if you want to dynamically import some content, meaning that like you, you go to your blog post and, and then you click on like a post, you have like a slug in your URL. And then it needs to look up the blog post by that slug and then find it, right? So I needed dynamic imports for that so that I could, when somebody visits this URL, you find the blog post and then you import that MDX file as a, as if it were like a JavaScript file, right? It goes through the whole ESM ecosystem and.

• 10:13Wes Bos?

  That dynamic import was really, really funky and I was using some weird webpack stuff and that didn't translate over well to turbopacks. I was like, you know what? I got it working and then I wanted to deploy it to Cloudflare and Cloudflare is working on this thing called the open next JS where essentially what they do is they take the next JS build and like the compressed webpack outputs and all of these like webpack bundles. And then they basically are just like monkey patching it to make it work on Cloudflare. And at the time, it was kind of just ramping up and it wasn't mature enough. I had, I logged like six or seven issues and I spent a lot of time in the Discord talking to

• 10:56Wes Bos?

  the devs with it, but I was just like, this is, I'm maybe like six months too early on this. I think it would be a bit better, but between that and the build times on Cloudflare, I was getting like 10, 11 minute build times on Cloudflare. I would hit this very frustrating issue where I hit this with Cloudflare in general. It's like something works locally because you're just, you just run it in Node JS and then you deploy it and the Cloudflare runtime is slightly different, you know? And you get this like annoying feedback loop where you have to like build it, deploy it, wait for, or like deploy it, build it, wait for it to point.

• 11:36Wes Bos?

  You can run Cloudflare locally, but the way that this and what I ended up using works is that you have to first build it and then run it through Cloudflare, whether that's on Cloudflare's infrastructure or whether that's locally through their wrangler tool. So I was like, oh, that's, that's kind of annoying as well, you know? Like it's, it's not just like a quick feedback loop. It is very, very slow. So I was like, you know what? I'm gonna try something else. I had moved everything to that point to React Server Components. And the beautiful thing about React Server Components is that it's not a NextJS thing. I had used very few NextJS APIs in actually building out the website.

• 12:20Wes Bos?

  So I was like, I can, I can move this thing anywhere. It's just, it's just no JS and React Server Component code. So I took a look at what the options were. I look at TanStack start. They don't have their React Server Component story just yet. And I didn't feel like moving it off of components again. So I, I ended up landing on Waku, which is a V base. Waku. I always say it wrong. Waku.

• 12:46Scott Tolinski?

  I know.

• 12:48Wes Bos?

  It's a V base React Server Component framework. It's very similar to NextJS, but it has a bit more. It's, it's way more peeled back. It's, there's a lot more like rougher edges. A lot of stuff is undocumented. But because it's, it's a pre 1.0, I was okay with that because I'm able to read the code. And I was in the Discord all the time chatting with the devs behind it who are, who are fantastic. So I moved it over to Waku and I've been really happy with it. It's, it's really easy to. The reason why I was on React Server Components with this type of thing is that it's very easy to either pre-generate

• 13:28Wes Bos?

  your components at build time or do asynchronous components on the server before they actually ship out to the, to the client. So I didn't have to build them all at, at build time if I didn't want to. You could just await like a database call or something right before you go and render out the page. All right. So that's, that's why I chose, uh, why, what is it? Waku? Waku?

• 13:53Scott Tolinski?

  Yeah. Waku.

• 13:54Wes Bos?

  What's when? Waku.

• 13:55Scott Tolinski?

  Waku. Yeah.

• 13:56Wes Bos?

  Waku. All right. Now, some of, I know I said I wasn't going to do a whole lot of functionality, but on my hot tips page, where I embed all the, like all the little TikTok and short form videos that I do. I was like, I need to post these on my own website because people are always coming to me being like, hey, where's the video on X, Y, and Z? And I'm just like, uh, I don't know. Or hey, do you have a spot with all your videos? I'm like, ah, they're kind of spread on all the social networks out there. I kind of need to own this content. So what I did is. I built some integration with all of the different social networks to scrape the stats

• 14:37Wes Bos?

  from each of them. And then I'm saving those stats, like the hearts, the retweets, the comments, the views. I'm saving all of that stuff to CloudFlare D1, which is just a SQLite database using Drizzle. And I've been been really happy with that setup because I essentially am just using the JSON schema from Drizzle, meaning that I figured out how to scrape Twitter, LinkedIn, Instagram, TikTok, and several others. And I'm just basically saving that data and throwing it in as a JSON object into CloudFlare D1. And then I can pull it out when it is that I need it,

• 15:21Wes Bos?

  or I can re-srape it if it's past the sort of expiry time. Been pretty happy with that. The videos themselves, I did a little bit of sneaky work here as well. It's like, I don't really want to host the videos myself, because like, that's a whole nother project of like, having to host them myself. So I figured out, I like reverse engineered the like, streaming protocol from one of these, I won't say which one it is, but the streaming protocol from one of these social networks. And I'm just using them to stream the M3U8 file into Media Chrome, which is the video player from Mux. And it's been been working really well for me as well.

• 16:04Scott Tolinski?

  Man.

• 16:05Wes Bos?

  Yeah, yeah, it was, that was, it was kind of a fun one as well, because I was always just like, I need to have all this content on my own. And like, of course, none of these social networks will want you being able to access this data, except for Blue Sky. Blue Sky is the only one that uses like a proper API to get this data. The rest of them are simply just scraped or using some sort of thing to go around it.

• 16:30Scott Tolinski?

  Huh.

• 16:30Wes Bos?

  The blog itself is

• 16:34Wes Bos?

  MDX, like I said, the images, that's another problem I had with NextJS is that the image sourcing was always a little bit tricky because they wanted you to put the images in like an images folder. And the way that I write my blog posts is I want to put the images kind of side by side with the MDX content, meaning that the, a blog post can just be a folder. And I can throw anything I want in that folder, right? I can throw assets, I could throw images, I could throw, and of course, MDX text and any other components I want to embed right inside of it. So moving it from Gatsby, so the way that Gatsby works is that there's like a whole sourcing engine and you create what are called nodes.

• 17:17Wes Bos?

  And then those nodes are then surfaced via a GraphQL API. I ended up simply just writing functions that dynamically require the MDX files and that replaced all of that, that work. I did have to write, like, for example, like for pagination and being able to figure out what the next piece of content is. So basically on startup, it sources every single piece of content from the MDX files and just does a require. And I have this massive, like, basically not, almost an import map.

• 17:56Wes Bos?

  And then from that, I can figure out if I want like 10, if I want page two, I can just take items 11 to 20. And then when I'm on a piece of content, if I want to be able to link to the next piece of content, then I'm able to basically look at that massive array of content. And then say, well, this is the current one. They'll give me the index that is the next one and the previous one. So it's, there's a lot of like tricky stuff with MDX because there's no, there's no database, right? So it's not like you can simply just like query two items or you can, you can use like a cursor and say like, give me these items and then the next two, and then the previous two.

• 18:38Wes Bos?

  Because there's no database, and even then, like if you look at all these like React JS tutorials of like build a blog. They're almost never showing like a listing of all the blog posts because, because there's no like, like API to just query all the blog posts. Unless you were to write a whole bunch of like wildcard matching, which is what I had ended up doing.

• 19:03Scott Tolinski?

  Hmm.

• 19:04Wes Bos?

  Um, page speed. I'm pretty happy with the page speed. I got a hundred on desktop and a 96 on mobile. Um, I had it up to like a, like a 97 or 98, but you know how these things work. It's just, if you do it on the wrong day or the wind is blowing in a certain way, then, then it goes up and down. But several things I did to make the page speed much better is, um, the old navigation did not look like this. The, the old navigation was there are two rows where the first row was a bunch of links and then the second, whatever wrapped onto the second row, I would apply a class to make it slightly smaller. So that the, the top ones were nice

• 19:47Wes Bos?

  and big. And then anything that spilled on to the second row was much smaller. Um, and in order to do that, you know, with CSS, you can't target things that are in a specific row. So what I was doing is I had a, like a resize observer on the nav and then I would check the X and Y coordinates of each of the links and, and I would figure out when something was, was knocked down into a secondary row. And that was causing like a bunch of page jank. Because what happened is that the page would load, the CSS would apply, then the JavaScript would, would trigger that change of the nav and then it would figure out and apply classes and it would make the, the items smaller. Um, and they would do that every time it loaded,

• 20:32Wes Bos?

  right? And that was, that was kind of disorienting to the user, not a huge deal because it only happens once, but it was also just killing me on, on page speed because I was, I was getting a largest contentful paint, like 200 or like 2000 milliseconds into the page load, which is way too late and it was absolutely killing me. So I ended up scrapping that nav, even though, like I posted on Twitter, everyone's like, I like the old nav better, but I ended up just doing a very simple, uh, navigation like this. And I'm pretty happy with that. I wrote a bunch of- MDX plugins myself, which is such a wild world. It's all like DOM tree traversal, or not DOM, like, um, not even DOM tree, AST trees.

• 21:15Scott Tolinski?

  Yeah.

• 21:15Wes Bos?

  Basically, your, your markdown gets exploded into this AST tree that is all infinitely nested. And you have to write these like walkers that go through.

• 21:26Scott Tolinski?

  And transform it.

• 21:26Wes Bos?

  Basically, I wrote a walker looking for images. And then when you hit an image, I would read that image and figure out what the width and the height of that image were. And then I would inline the, the width and the height and the aspect ratio of each of the images. So that when you visit one of the pages, like the about page, in the split second here, if, if you're, anyone was watching a video, you see the split second while this images is, is loading. It's not pushing the content down below it because there is a,

• 22:01Wes Bos?

  a width and a height explicitly set on it as well as a whole bunch of like source set. So all the different sizes of the images which are generated with the Cloudflare images.

• 22:12Scott Tolinski?

  Yeah. So you're telling me you put a walker in your Waku?

• 22:16Wes Bos?

  A walker in my Waku, yes. So I freaking hate writing. I'm, I'm not cut out for, for writing MDX plugins. And I probably wrote about four of them for this project.

• 22:26Scott Tolinski?

  Try, dude, uh, let me tell you, I wrote a custom demo one for, for mine where I have like HTML demos. And then by inserting like a line of, uh, like a special markdown string, what it's doing is it's loading and I framing in those demos. And like, that was enough for me. I mean, it was like, oh, this is, this is so painful.

• 22:47Wes Bos?

  So, so painful. So doing that with the images really up the, the page speed as well. Um, because Gatsby did that for you, but that was not, that's not something, and that's built into next JS, but it's not something that's built into, to, to Waku. You have to kind of do it yourself, especially when the images are not part of like a. Like a JSX file or TSX file, it's part of an MDX file. So you have to, you have to make sure that all of the images in your MDX files are actually explicitly exported or imported from each of those files. So I had to write a whole bunch of code for that as well.

• 23:27Scott Tolinski?

  Yeah.

• 23:28Wes Bos?

  Hosting, I put this thing on CloudFlare.

• 23:32Wes Bos?

  I previously was on Netlify, a big fan of that. I have quite a few of my projects on Vercel. I've got quite a bit of stuff on CloudFlare, but I don't have, I have a couple. I don't have a big site on CloudFlare workers, you know? It's lots of like demos and tiny little websites and whatnot. And I wanted something that had like serious traffic and used a lot of the products so that we can confidently talk about how it works, limitations, pricing, all of that stuff. So this thing, like Waku builds wicked fast. Like it's like a minute and a half or two minutes to build and deploy these things. And that's just the best. Yeah.

• 24:09Scott Tolinski?

  Why, why, why does it make, what makes building it fast? Is it that it's on Vite or is it on?

• 24:14Wes Bos?

  It's because it's V. Yeah. It's partially because it's on Vite and partially because it's not doing everything at build time. So my, my Gatsby website would generate a static page for, I don't know, there's probably six, a couple thousand pages, right? And, and then it would do it for all of the images. So now the images get generated on demand via the URL CloudFlare. So that was quite a bit. And then only, not every single page gets, gets pre-generated on build time because I can simply just do that on request and then cache the actual output of it.

• 24:55Wes Bos?

  So there's several of them that I do statically generate at build time, like the homepage and whatnot, just so that that's always nice and fast. But the rest of them are, you simply just wait until somebody needs to go to that page. Then it generates and then it will, it will try to serve up like a, like a cache version of it first and then kick off a re-validation in the background. But if not, then they, they wait around for. A couple hundred milliseconds for it to regenerate that page.

• 25:23Scott Tolinski?

  Nice.

• 25:24Wes Bos?

  So yeah, the builds were, I'm so happy about how fast the builds were on CloudFlare. Just because it's with Veet, that was always such a pain for me is just waiting for it to to deploy, you know, especially when like, there's like a silly, you send an email out to a couple hundred thousand people and then there's a typo on it. And you're getting emails, hey, this is spelled wrong. Like every five seconds, like, no, no, no, stop. I know I'm, I'm waiting for it to build.

• 25:53Scott Tolinski?

  Welcome to the year 2020, Wes.

• 25:57Wes Bos?

  Which?

• 25:59Scott Tolinski?

  That you've moved to Veet, that you are now, you've now entered the year 2020 where?

• 26:05Wes Bos?

  Oh, I've been using Veet for like, like eight years. I, I have Veet on my entire course platform.

• 26:10Scott Tolinski?

  I'm talking about in this site.

• 26:12Wes Bos?

  Oh, no. What?

• 26:15Scott Tolinski?

  I'm just goofing.

• 26:17Wes Bos?

  Okay.

• 26:17Scott Tolinski?

  But like, I don't know. I'm just goofing, man. I understand.

• 26:21Wes Bos?

  Okay. Well, like I, I'll use whatever, whatever the things use, Mr. Tolinski, you don't even have a website.

• 26:28Scott Tolinski?

  I do have a website. I'm not even, I'm a, it's not good though.

• 26:32Wes Bos?

  Yes, this is not very good.

• 26:35Scott Tolinski?

  It's fine. Hey, click on one of those blog posts. Click on one of them. Yeah, there we go. We got some, some page transitions. We got filtering. It's, it's all very.

• 26:45Wes Bos?

  I should add page transitions to mine.

• 26:47Scott Tolinski?

  I even got a couple of themes.

• 26:49Wes Bos?

  Yeah. But anyways, I'm very happy with, with how quick it is. Um, I'm so happy with Veet and it's funny because Veet is about to get so much faster as well. Um, this is not even using any of the, the new Veet stuff, which I'm really excited for.

• 27:05Scott Tolinski?

  Yeah, totally.

• 27:06Wes Bos?

  The Open Graph images are using CloudFlare's Puppeteer browser built in. So it takes a screenshot and use that. That worked really well.

• 27:16Scott Tolinski?

  That's such a clever implementation, Wes. I, I, I don't know if you are the person who came up with that, but you are the only person I've seen do that.

• 27:25Wes Bos?

  It's it's not perfect. It breaks from time to time because you're literally firing up a browser to take a screenshot and it has to take it fast enough. But you don't have to generate them like ahead of time or whatever. So I've been been happy. And you get like full control over it. So let me see if I can find. What is the URL? Oh, yeah. So like, here's an example of of one page. This one doesn't have any images on it, but I'm able to use CSS for all of this. And then it's just generated on demand and it does that via CloudFlare's puppeteer implementation, which was almost a one to one move from my existing puppeteer. Pricing. I was very curious about like, how much this would cost. It gets, I don't know,

• 28:05Wes Bos?

  I think I get about 5,000 visitors a day or so, which is not a ton of traffic, but but it's it's it's enough, you know? And I'm on the CloudFlare like $5 plan. And as part of that, you get a certain number of like milliseconds for CPU time. So they bill you based on CPU time, right? So my CloudFlare dashboard tells me that I'm averaging about 200 milliseconds per request of CPU time, which seems high because the free plan is 10 milliseconds. So I don't know if that is something I should be worried about or should be looking into.

• 28:46Wes Bos?

  It seems seems okay to me. But at 200 milliseconds, average, I'm doing about 300 or 3 million milliseconds per day. So that means on my $5 plan, I'm going to run out in 10 days on this. And then, once you're past the 3 million milliseconds of CPU time, then you have to pay about $0.06 a day. So an extra $0.20 a month to the host's website. Yeah. So I I'm doing all of the, I think so. So like, yeah, $6.20 or for for the website. And that also includes all of the bandwidth. That also includes all of the caching APIs.

• 29:30Wes Bos?

  That also includes the SQLite database.

• 29:34Wes Bos?

  Or I looked at it. I have 90 and I only post, I only put this thing live about four days ago and I have, I don't know, I think I have like 50 million reads or something and you get like billions. I did the math. I was like, I'm not going to hit that ever. Within the $5 plan. So, so I'm never going to go over on that. My image transformations look like they're going to stay within the, the $5 level as well. So, pretty much for six bucks a month, I'm able to host this website.

• 30:05Wes Bos?

  And that's not even only, I probably have seven or eight other projects on CloudFlare under that $5 plan as well. So I've been like, been pretty happy about that because like, the alternative is you either run like a VPS yourself, you know, you put Coolify, Coolify on there. I don't even know that I could do this for less on like a self-hosted Coolify. What do you think?

• 30:26Scott Tolinski?

  Oh, I don't think you could. And let me tell you, it probably wouldn't perform nearly as well because the things that I put on my Coolify are hobby things or like, they're not serious things. Not because Coolify can't handle that, but just because, you know, my server is far away. It is in the Netherlands or something because I, or Germany, because I host on Hetzner and they're like, they only offer ARM servers internationally and I wanted to just experiment with an ARM server. So, I don't know, you could probably do it on Coolify and get it to be just as fast, but I don't know if it would be as cheap. CloudFlare in my mind is the cheapest best, you know?

• 31:06Wes Bos?

  No kidding. Yeah. It's like, they, they own the infrastructure and they're at a very low level. Like they're a networking company. So I think it's going to be very hard, especially from like a bandwidth point of view. It's going to be very hard to, to beat that out. So, that feels good because like, I feel like a lot of these hosting companies are getting really expensive. Like a minimum 20 bucks a month and then they'll nickel, nickel and dime you for, for a lot of these features. And, and I, they kind of need to do that to, in order to make money, but. That stuff adds up. Once you have three or four different websites.

• 31:41Scott Tolinski?

  Some of these places, you need a doctorate to understand their pricing table. You just like, look at like, the 20 different item, 30 different items they're charging X amount of cents per million requests or whatever on various things. You're just like, alright, what, you know, what am I actually paying?

• 31:55Wes Bos?

  I will say CloudFlare is no better.

• 31:58Scott Tolinski?

  Sure.

• 31:59Wes Bos?

  Like you're, I'm counting milliseconds CPU time here.

• 32:02Scott Tolinski?

  Yeah.

• 32:02Wes Bos?

  And then like, the, the tools for like, visualizing how much you've used are not very clear as well. And then you have to go to the pricing page for every single thing. But I also don't care, because I know that it's, I don't know, you got a bazillion

• 32:18Scott Tolinski?

  Yeah.

• 32:18Wes Bos?

  people come to your website. I know that I'm not gonna go bankrupt with this type of thing.

• 32:23Scott Tolinski?

  Totally.

• 32:23Wes Bos?

  Which is great. So I'm pretty happy about that. Uh, caching. I use the CloudFlare cache API um, by setting headers. Um, in Waku, I have middlewares where I can just set the, the different caching headers that are, are needed. Um, and that's really nice because I can do that both on like a request page level, but I can also do it based on like React server component partials. So if you, if you visit one page to another, um, you can cache the React server component payloads. Um, I will say NextJS's implementation of caching is much better. Because like, if you look at my, the homepage here, in the footer, I have syntax podcast where

• 33:08Wes Bos?

  I, I ping the syntax API and, and show the latest um, syntax podcast, right? And then I have a whole, my tweets are being put into the footer and then my, my latest course are being put in there. So like, this content needs to be updated fairly frequently, you know, like at least every couple hours, but.

• 33:29Wes Bos?

  If you're caching every page, that's kind of weird because then you end up in a, you end up in a situation where one page might have old tweets cached because it's still good for five minutes and then the homepage is maybe a little bit different. So with NextJS, you can cache at a component level, which makes so much more sense to me. Because I could just cache this entire syntax component and then my tweets component could be cached as well. And then when you go from page to page, it simply just uses the cached parts to build it. So I ended up actually just caching the data for each of these and then, and then rendering it out inside the page. And then I have a fairly short caching.

• 34:13Wes Bos?

  I'm still kind of playing with it here and there. There's a delicate balance between trying to get like the fastest perf and having annoying caching issues, which makes you want to cry.

• 34:23Scott Tolinski?

  No kidding. Yeah.

• 34:25Wes Bos?

  So yeah, that's one thing that I really missed from, from NextJS is the, the really nice cache API from, from doing that. And as well as like, I don't have any like interactive stuff, like I don't have stuff where people can type into a box and then it sends it to the server and updates the database. It's mostly just content being pushed out. So I don't have to do any like revalidation of, of specific pages. Last two things, errors and CSS. So the errors, I integrated Sentry. I'm using the React server component integration and the Cloudflare Hano. So Waku uses Hano as a server and they expose several hooks where you can get access to the raw Hano API,

• 35:09Wes Bos?

  which I absolutely love. It's like, just give me access to it if I need it. And I can do things at like a Hano server level if I want, or I can just pass, I can, I can pass it on to the, the Waku router and it will, it'll pick it up from there. So if I ever need to like step in front of Waku before it does any weird rendering or anything like that. Or if I ever want to write a custom middleware, which I wrote several of, then I can do that.

• 35:38Scott Tolinski?

  Yeah.

• 35:39Wes Bos?

  One kind of cool thing is moving over a huge site is you're always worried that you didn't get all the, the right pages and whatnot. And I actually found a Sentry blog post. Where they, when they moved their docs, they had hundreds and hundreds of pages in their docs. And they were just watching their, they are filtering for not found exceptions in the Sentry dashboard. And then they can, they set a little alert for when a specific page gets above a certain level. And what I did is I just pushed it live for a couple of hours and then I put it back to the old one. And that was enough traffic for me to see, A, any, any errors that I didn't catch,

• 36:21Wes Bos?

  but also any common pages that people were hitting that were, were possibly I hadn't linked to. You know, you, you did the URL a little bit weird because you, your slug function was a bit weird. So that was really nice integration.

• 36:36Scott Tolinski?

  Yeah.

• 36:37Wes Bos?

  And then finally CSS. So my old website was using styled components. And styled components don't play nice on the server. Plus, at the time, styled components were great, but CSS has come so far that I really didn't need any of the styled components features. Like I didn't need JavaScript in my CSS at all. It all had needed to be happening at build time. And styled components don't work on the server, on inside server components. So I, I took a look at like, what are, what are the different options that I can do? I don't want to rewrite any of my CSS.

• 37:19Wes Bos?

  So my CSS was just written in classes that were essentially just imported and put on to my components. So I don't want to rewrite any of that. And I kind of want to keep the styled components API where you just wrap tags around it. So I initially moved it to Panda CSS. And they have an integration that allows you to use like styled, like styled component like tags. And I forget why I ended up not liking that. I ended up saying, okay, I'm going to scrap this whole wanting to have components as like, like div wrappers with, with enclosed styles. And I just moved it all.

• 38:00Wes Bos?

  All to CSS modules, meaning that I put all of my, I moved all of my style components. And I just, I used cursor and I said, here's a couple that I've done. Move all of these style components into dot module dot CSS files. And then I simply imported the module dot CSS files into the components where the CSS was needed. And then you apply the class to the div or to the article or to the, to the layout that you need it. So that worked pretty well. I had to do a little bit of funkiness around getting the autocomplete for TypeScript to work. So that's, I don't know, CSS modules have been around for a long time, but there's not a lot of

• 38:42Wes Bos?

  great tooling around using them with TypeScript. I probably would have chose something else if I was doing this from scratch, but again, I was not interested in having to rewrite any of the CSS. I just wanted it to move over.

• 38:57Scott Tolinski?

  Yeah, I will. I, it's interesting because you know, CSS modules are one of those things that I've kind of avoided, mostly because I don't need them with the way that like Svelte handles scoped CSS, right?

• 39:10Wes Bos?

  Yeah.

• 39:11Scott Tolinski?

  But I do think it is probably a great option for most people and I'm stoked to see that you went with that.

• 39:17Wes Bos?

  Yeah, it works exactly like, I don't know, like Svelte's scoped CSS. So it like generates a random-ish class name. You know, if you, if you inspect something on this page, it'll be like content styles, one C I Y A. And those are all like unique, but you can also see what they are. That's exactly the same way that that's felt works. The one thing I had trouble with is I sometimes just like to select children inside of a selector, you know, so I might have, I might have like this box here for my tweets. And I want to select anything with the class of like red or anything with a class of heart.

• 39:59Wes Bos?

  And that parent child selectors do not work well in, in CSS modules. You have to explicitly give.

• 40:07Wes Bos?

  Everything a class unless I think there's some rules around like it will select raw elements or you can use the like colon global selector, which we use in the syntax site several times. So I did have to rewrite a couple of those, but I realized as I was refactoring it, I was like, ah, this is kind of better as even though it's a bit of a pain. This is probably better way to write some maintainable CSS. That's it. That's, uh, that's the website. I've been is pretty fun. A move over. I've been pretty happy with the perf and, and how smooth it is to deploy. I think my next steps now are putting more content on it, you know, being able to just write, people ask me all these questions. What 3D

• 40:49Wes Bos?

  printer that you have? I should just have a page on my website that has all of that information. And now that it's so easy to do that, I'm excited to put some more content online.

• 41:00Scott Tolinski?

  Nice. I'm happy for you that you were able to make this change, but also like, hey, man, that's some real world, uh, React server components and getting off Gatsby and all this stuff. It's a, that's a

• 41:12Wes Bos?

  Rest in peace, Gatsby.

• 41:13Scott Tolinski?

  Great thing. Yeah.

• 41:14Wes Bos?

  I know there's, there's a lot of people still on Gatsby that are probably trying to make this a similar move to see what do I do? Like, where do I go from here? And, oh, that's, that's one more thing is people are probably going to be asking, why not Astro? And I don't have a good answer to that, other than I just wanted to use React server components at the time. So Astro probably would have been a good fit for it as well. It's just, there's only so many cool things to try and I've used Astro in the past. So I wanted to, I wanted to dig a little bit deeper into React server components and see how viable that would be.

• 41:57Scott Tolinski?

  I've been using Astro Starlight and that, and it has been a nice experience to work inside of Astro.

• 42:02Wes Bos?

  What's that?

• 42:03Scott Tolinski?

  It's like their docs platform. They have like a bunch of templates. So like Astro now had, I don't, it's not like brand new or anything, but like the ability to get started with a template. And one of those templates is like DocuSaurus style type docs.

• 42:19Wes Bos?

  Oh, yeah.

• 42:19Scott Tolinski?

  And it is, it's Starlight. It's very nice looking out of the box. Um, yeah, it's kind of great.

• 42:25Wes Bos?

  Oh, that's good. I've certainly been on websites with docs like these. Docs websites are getting so good.

• 42:31Scott Tolinski?

  Cool.

• 42:32Wes Bos?

  Cool.

• 42:32Scott Tolinski?

  Well, thank you so much for giving us this deep dive. And it's actually also nice to know that you said you were not announcing this yet because you were waiting to make sure nothing was trickling in on your Sentry. Do you want to maybe talk about Sentry for one second?

• 42:51Wes Bos?

  Yeah, well, what I ended up doing is like I put it on a subdomain and I tweeted it out. I was like, go nuts, everyone, you know? And then when I was like, pretty much ready to deploy it, I just, like I said, I put it live for, I don't know, five hours. And then my Sentry starts to lighten up with all the issues and I flipped it back and I just had, it's almost like I had this like little to do list with all of the, like, I could see where people were clicking on the website and like, there was some like really odd ones where you would get like a white, people would be like, ah, it's just a white screen when I was clicking around and we're like, oh, that's helpful, you know? But then I was able to actually go to the website and see what people were clicking and

• 43:33Wes Bos?

  then, and then maybe hitting the back button or, or just like basically their path as a video. And then I was able to figure out, oh, that's, that's exactly what was happening. So yeah, pretty valuable in, in launching a new site. I had it, I had it on the second screen beside me here pretty much all day long, trying to figure out what's going on. And it feels so good to like, mark as resolved and say a little prayer, hope it doesn't come back.

• 44:02Scott Tolinski?

  Yeah, I love that. Yeah. Set it free. Hope it does not return.

• 44:07Wes Bos?

  Check it out, sentry.io forward slash syntax and you will get two months of the team plan for free.

• 44:15Scott Tolinski?

  Oh, yeah. Cool. Well, thank you so much, Wes, for this deep dive. Love to hear this stuff. And maybe someday we'll get to do something on my website if I choose to ever make it worth an episode.

• 44:27Wes Bos?

  Right on. All right. Peace.

• 44:29Scott Tolinski?

  Peace.