Astro SSR with Ben Holmes

Episode Description

Ben Holmes joins to discuss Next.js 13, React Server Components, framework competition, and demos Astro SSR with edge deployment and caching.

Episode Summary

In this episode of AJK and the Web Devs, Ben Holmes from Astro joins Anthony Campolo for a wide-ranging conversation about the state of web frameworks. Ben shares how his open source project Slinkity led him to join Astro, where he now works on features like SSR and Islands Architecture. The discussion shifts to Next.js 13 and its dramatic pivot from static-first to serverless-by-default, with Ben explaining how the framework now automatically infers deployment targets based on how developers write their code — a move he sees as potentially confusing for beginners. They trace the evolving React Server Components story across frameworks, noting how Next and Gatsby adopted them while Remix and Hydrogen went different directions. The conversation touches on edge functions, the relationship between frameworks and deployment platforms, and the challenge of standardizing around web technologies. A lively debate about the definition of Jamstack breaks out before the pair moves into a live coding demo, deploying an Astro SSR site to both Netlify Edge and Vercel, demonstrating how cache-control headers work differently across hosts. The demo highlights Astro's simplicity while revealing real platform-level inconsistencies that developers need to navigate.

Chapters

00:00:25 - Introductions and Ben's Journey to Astro

Anthony welcomes Ben Holmes to the fifth episode and they catch up on their streaming history together. Ben introduces himself as an open source developer and full-time Astro employee who creates whiteboard-style web development tutorials. He explains how his earlier project Slinkity, which explored Islands Architecture and multi-framework support, naturally led him to join the Astro team since both projects shared a similar vision.

The conversation touches on Angular support in Astro through Brandon Roberts's community plugin and the upcoming Analog meta framework. Ben reveals the origin story of his astronaut helmet, purchased specifically for Astro's 1.0 beta promo videos, and they briefly discuss upcoming events like Jamstack Conf and GitHub Summit where Ben will be appearing in person.

00:06:29 - Ben's Stream and the Next.js 13 Hype

Ben talks about his growing Twitch stream, which started as Astro-focused content but has expanded to cover broader web development topics including a recent Next.js 13 exploration. The pair discusses how Next Conf generated massive hype with its Apple-style presentation, and Ben breaks down the major architectural shift in Next 13 — moving from a static-first approach to one where the framework automatically determines whether routes should be static assets or serverless functions based on how the code is written.

Ben explains the implications of this hands-off approach, where developers no longer explicitly configure deployment targets. He notes that the framework infers intent from code patterns like cache headers and dynamic routes, which can be powerful for experienced developers but potentially confusing for beginners who might unknowingly deploy serverless functions with cost implications.

00:12:39 - React Server Components and Framework Landscape

Anthony provides a detailed history of React Server Components, tracing their journey from the December 2020 RFC through Hydrogen's parallel implementation, and ultimately to adoption by Next.js and Gatsby. They discuss the recent news of Shopify moving Hydrogen away from React Server Components to use Remix instead, marking a significant divergence in how major frameworks approach server-side React rendering.

The conversation covers Remix's early decision to pass on React Server Components, Kent C. Dodds's prescient prediction about their evolution, and Redwood's deliberate choice to stay focused on stable tools rather than chasing the React zeitgeist. Anthony and Ben emphasize that framework competition should remain healthy and collaborative rather than devolving into animosity, with Anthony noting he'll critique behavior but not trash-talk frameworks themselves.

00:20:39 - Next.js 13 Deep Dive and Deployment Concerns

Ben walks through the technical details of Next.js 13's new deployment model, explaining how it shifted from recommending static assets with client-side fetching to automatically deploying serverless functions. He describes how the framework silently switches routes to Lambda functions based on code patterns, with only a small Lambda logo indicating the change. This raises questions about developer awareness and potential unexpected hosting costs.

The discussion broadens into edge functions, with Anthony explaining the challenge of porting Lambda functions to edge runtimes across different platforms like Cloudflare, Deno Deploy, and Vercel. They debate whether serverless should be a default deployment target, with Anthony sharing Redwood's hard-learned experience of building entirely around AWS Lambdas and spending a year making the framework work on containers and VMs instead.

00:34:26 - Astro SSR Explained and the Jamstack Debate

After briefly celebrating the Remix-Shopify alignment, Ben explains Astro SSR's approach: every route acts as an endpoint that can return HTML with embedded framework components or raw data, making it a flexible server-side option. This leads into a spirited discussion about what constitutes Jamstack, with Anthony defining it as a decoupled front-end and back-end architecture distinct from monolithic frameworks like WordPress or Rails.

Ben argues that Astro SSR is explicitly not Jamstack since it couples backend and frontend, similar to Django but with JavaScript. The group debates whether monoliths can be Jamstack if they maintain internal decoupling, and whether "fullstack Jamstack" — where developers build their own API rather than relying on third parties — changes the definition. The conversation captures the community's ongoing struggle to pin down what Jamstack means as frameworks evolve.

00:44:35 - Live Coding: Edge Deployment and Cache Headers

The pair moves into a live coding session, starting with the Astro project Anthony built in a previous episode using Preact and Islands Architecture. Ben walks through the client directives, explaining that non-interactive components ship zero JavaScript by default. They deploy the site to Netlify Edge Functions with a simple adapter swap, demonstrating how Astro's tooling makes deployment changes trivial.

Ben then demonstrates adding cache-control headers to Astro SSR pages using the Astro.response.headers API, creating two pages — one cached and one uncached — with timestamps to visualize the difference. They discover that s-maxage cache headers don't work on Netlify Edge but do work on Vercel, prompting a quick pivot to deploy on Vercel instead. The successful demo shows the cached page retaining its timestamp while the uncached page updates on every refresh.

01:11:06 - Adapters, Platform Differences, and Closing

The final segment addresses viewer questions about Astro's integration system, with Ben explaining the options for custom adapters and middleware-based deployments using the Node integration. A Cloudflare-focused developer raises concerns about needing more raw control, and Ben encourages community feedback through issues and RFCs. They discuss platform-specific cache behavior differences and Ben's advice to wait before committing to edge functions in production.

Anthony and Ben wrap up with lighthearted exchanges about Web3 compatibility, Turbopack skepticism, and the Jamstack community's camaraderie. Ben promotes his Whiteboard the Web learning resources and Twitch stream, while Anthony thanks the active chat participants who contributed throughout the episode, promising to return the following Monday with another installment.

Transcript

00:00:25 - Anthony Campolo

Hello everyone. Welcome back to AJK and the Web Devs. This is episode five, and we’ve got Ben Holmes with us. Hello, Ben.

00:00:33 - Ben Holmes

Hello. It’s a cool band name, by the way.

00:00:36 - Anthony Campolo

AJ, I know, right? That was your doppelganger Ben, Ben Myers’s suggestion. So happy to thank him for the excellent name.

00:00:44 - Ben Holmes

Nice. I’m a groupie now.

00:00:47 - Anthony Campolo

Oh, awesome. Awesome. Why don’t you go ahead and introduce yourself? I would imagine most people who watch my stream are well aware of you, but go ahead and tell people who don’t know who you are.

00:00:58 - Ben Holmes

We’ve been very aligned. Long time listener, first time caller. Well, third time caller, something like that. I’m Ben.

00:01:07 - Anthony Campolo

You did. Damn, you did. Yeah, you did. QuickNode stream, and now you’re on AJK and the Web Devs.

00:01:16 - Ben Holmes

Yes. Are all of these streams going simultaneously, or does it depend on how you’re feeling? Like, which account do I want to sign into today?

00:01:25 - Anthony Campolo

Well, at this point, I thought about launching more of a bigger QuickNode stream, the one you were on. I realized the amount of time and effort it would take to really make that useful to the company was probably not worth it at this point in time. So I kind of pivoted to doing other stuff for them.

Then that’s why I created this stream, because I wanted to scratch my stream itch and not make my toy fun project part of my work. That was not really going to benefit them very much.

00:01:53 - Ben Holmes

Yeah, it’s a tough balance.

00:01:55 - Anthony Campolo

It is. Yeah. But I interrupted you. Go ahead.

00:01:59 - Ben Holmes

At least I can say some words. But yeah, I’m Ben. I am an open source person that has been floating around the web dev community for a while. I like whiteboards, as you can see here. Arrows are so hard. I don’t know how Theo does it.

I have a web series where I’ve started doing a lot of tutorials on any web dev content, some of it Astro-related, of course, which we’ll get into today, but other stuff around like Next.js, React, meta trends, and best practices. That has been taking up any time that I’ve been spending outside of Astro, which I didn’t even say, but I am a full-time employee over at Astro, working on a lot of new features that are rolling out, bug reports, responding to support threads, everything that makes Astro amazing.

So you’ll catch me around there in the Astro Discords.

[00:02:49] Otherwise, you’ll see me doing whiteboard content over on Twitter.

00:02:54 - Anthony Campolo

Very cool. And what inspired you to work for Astro versus any other company?

00:03:00 - Ben Holmes

Yeah. I guess there’s a through line of things that I worked on previously. Slinkity is where I started working on open source, and you were the one that made me release the first package. I was sitting on it forever, thinking, I don’t know if it’s ready for open source. It’s like, just ship something. So I did ship something, and it got a pretty nice reception.

Got a lot of actual feedback, people contributing with PRs and more. So I just got really excited about this idea of what if you could use any framework that you want inside of otherwise like static HTML.

So it optimizes like, if you’re just wanting to use static resources, you can do that here. If you want to switch over to a React component, you can do that here. You can just piecemeal build these little websites with tiny component trees with something called Islands Architecture. That’s something that Astro was working on, very similar to the Slinkity project, if anyone tried it.

[00:03:56] And I realized, oh, I could do the same thing, but for money. So I’m going to go do that. I left my software engineering job in e-commerce and ended up joining the Astro team, and the rest is history. But it’s been an amazing ride so far, especially building up to a 1.0 release since I joined.

00:04:14 - Anthony Campolo

Yeah, I thought it was such a great pairing because, you know, you’re talking about Slinkity, and when you and I were working more heavily on that, both I think we were thinking of it and we were presenting it and other people were thinking of it as basically an Astro competitor. There are a lot of similarities there. I think people saw that.

So I think there was a part of a thing that’s like, oh, this kind of sucks that Slinkity won’t get as much attention. I do think that’s a bit of a bummer, but it’s like you now get to work on a very high-level, very legit open source project and get to work with an awesome team and get to make money.

So I’m super, super in support of that. And I’m very happy that you kind of landed where you are. I’m going to just shout out some people here in the chat. We got homie coder.

[00:04:57] We got some new chatters here. Barrel Dodger and Caleb, thank you so much for joining us. This avatar looks familiar. I feel like I might actually know this person.

00:05:10 - Ben Holmes

Yeah.

00:05:10 - Anthony Campolo

Oh, okay. Sweet. And then, dev, thank you for joining. And so, dev, can we...

00:05:17 - Ben Holmes

Use.

00:05:18 - Anthony Campolo

...Angular with Astro?

00:05:21 - Ben Holmes

Oh, God. We’re starting here. Really? There is an amazing community integration from Brandon Roberts, who has held the torch of Angular with Vite for a long time. I think he actually gave a talk about Angular and Vite and how it can work really well together.

If you want to use Astro with Angular, he has an amazing plugin that you can go download and use for Islands Architecture. So not excluded, just not something we’ve merged in yet because, admittedly, no one on core has strong Angular knowledge and we didn’t feel like we should maintain it just yet. But we know about it, and we recommend that plugin all the time, so it’s exciting for sure.

00:05:59 - Anthony Campolo

That’s cool. Yeah. So I went ahead and shared that. And, Deb’s also pointing out here that he built his own Angular-based meta framework called Analog.

00:06:08 - Ben Holmes

I did not know it went this far.

00:06:10 - Anthony Campolo

So I was supposed to get him on the show specifically to go over this. He ended up having to cancel because he had some family stuff going on. But Brandon will be on the show at some point to actually talk about this, and in the meantime, I was wondering: did you get your astronaut helmet before or after Astro?

00:06:29 - Ben Holmes

That’s a great question.

00:06:32 - Anthony Campolo

It can only be answered while wearing it.

00:06:34 - Ben Holmes

Yes, it is fitting. I got this helmet when I started Astro. Yes, and fun fact, I actually bought it to record our 1.0 beta promo videos where we showed off the SSR features, and I thought we need to show lifting off with an actual astronaut flying through space and explaining things.

I ordered the cheapest thing that I could find on Amazon. I shipped it to my parents’ house because I was there for spring break, and then I brought it back with me. So here it is. Behold.

But I did not have it before. I was not born into this. I have become a cadet. But I wasn’t always. It would be cool if I had it earlier, though. Yes. Good link.

00:07:19 - Anthony Campolo

Good people dropping links here for Analog. And, fuzzy is here saying hello. That was for... This is the one thing I find a little bit challenging is showing links in StreamYard. But for people who are interested, check those ones out. And I should get into the habit of copy-pasting those and putting them in the YouTube description. That’s the move to know for myself. And you have your own stream. Why don’t you talk a little bit about that?

00:07:49 - Ben Holmes

Yeah, yeah. I’ve been trying to ramp it up a little bit, get more buzz around it, but I have a stream. It’s the handle you see there, Twitch.tv slash the handle you see there. And it has been mostly focused on building stuff with Astro for a while.

Like the whiteboarding that I mentioned. Video series. I wanted to have my own personal website to showcase all of them. So we worked with Astro SSR. We figured out how to crawl first the Twitter API, then switching over to YouTube embeds and getting those showing up very performantly.

And recently it’s just been any web tech that feels spiritually like it could improve Astro in some way. Like last time we did a Next 13 stream because, of course, I rode the hype train. Come on, you gotta ride the hype train a little bit. And I learned a lot of things from how they’re approaching these problems completely differently.

Because Astro and Next.js have similar APIs, or Astro’s definitely learned from Next.js’s approach. So seeing them go in a new direction is definitely something worth following. So the stream has kind of evolved to cover more topics, and I don’t really know what I want to do with it from there.

But a couple people from the Theo Discord are already in here. He’s definitely been a little inspiration of mine, been following his Twitch stream as it’s been blowing up. It’s like, how could I bring in that vibe? We will see. But yeah, thanks for shouting it out.

00:09:11 - Anthony Campolo

Yeah. No, I enjoy it. I’ve gotten to watch a decent chunk of them. And I remember when you first started, you were already pulling like 40, 50 people for some of them. So you got a good crowd.

And I find that that’s the hardest hump to get over. It’s like when you start streaming and you do an hour-long stream and you get zero messages in the chat, you’re just like, man, why am I doing this? But if you just get even, like, maybe ten people watching us right now, to me, this is enough to make it fun.

Which, speaking of, okay, hello. It’s been a while. It’s great to see you. I realized I was not following you on Twitter for some reason, so I just started following you. Also, dev is wondering: I am not going to be able to make Jamstack Conf. I’m very bummed, but I was just doing a two-week-long trip for work and for fun and it’s like I can’t do more.

[00:10:02] It’s just not really something I can do.

00:10:04 - Ben Holmes

Going on right now.

00:10:05 - Anthony Campolo

So I will be there in spirit. I’ll be there online. I’m nominated for an award because I’m an award-worthy person. Yes. And Jam is up for best podcast. And Ben himself is also up for an award. Are you going to be there?

00:10:22 - Ben Holmes

I will be there in person. We actually moved our Astro retreat a little bit earlier so that if anyone wanted to go to Jamstack Conf, they can. So if you are around, I will be there for the two days.

And also if anyone is there for GitHub Summit, I will be there too. I got an invite and thought, well, okay, it’s right after, so if anyone’s at that event I will also be there. But generally, San Francisco people show up. Let’s hang out.

00:10:48 - Anthony Campolo

That’s cool. Yeah. I was joking around yesterday. I don’t know if you saw GitHub Universe. Their logo is like a shining light with a rainbow prism onto it.

00:10:58 - Ben Holmes

And I was like, wait.

00:10:59 - Anthony Campolo

They got the idea for that?

00:11:01 - Ben Holmes

So their website’s been up for a while. I don’t think it was from Next.js. It really depends on who posted first.

00:11:08 - Anthony Campolo

It’s just a total coincidence, huh?

00:11:10 - Ben Holmes

It might be. I’m not sure, but yeah, the prism part. It’s like really interesting, a lot of inspiration being unnecessarily spicy.

00:11:18 - Anthony Campolo

Then I should go delete that tweet.

00:11:20 - Ben Holmes

Yeah.

00:11:23 - Anthony Campolo

Yeah, I know, never delete tweets. I will take it and I’ll eat them. I’ll own those terrible tweets I made. It’s very important that we all own our terrible tweets. They all stole from Pink Floyd.

00:11:34 - Ben Holmes

They all stole from Pink Floyd. That’s the real truth right there. They just added more corner glow, which is a good improvement. Not to say you should change the original Pink Floyd album art, but.

00:11:47 - Anthony Campolo

I want to chat a little bit about some of the happenings in the news recently because I think both you and I were aficionados of the framework wars. You’re actually someone who works for someone who is almost like a framework diplomat, to a certain extent. This is kind of how I think of working on a project like Astro because ideally you want to support all the frameworks and that’s cool, but also means you’re a meta framework, so you can’t support all the meta frameworks.

So there’s still a little bit of rivalry that exists. But rivalry can be healthy. Competition is good. Competition is what helps us all move each other forward. I always worry about competition turning into animosity and keeping collaboration out. I think you can compete and also collaborate at the same time.

[00:12:39] But yeah, there’s a lot of news this last week about Next. You did a stream about Next. So, Next 13. I’ll be super curious to hear your take on it and what you think is going on in that whole world right now and why people are watching it and talking about it so much.

00:12:56 - Ben Holmes

Yeah, a lot of it has to do with how Next Conf was presented, for sure. I know a few people that went up there. They brought in all the streamers. They gave a full Apple pitch. I don’t know if you saw the edit someone made, I think it was Kitsy, of overlaying “starting at 12.99” underneath Next 13. It’s like, oh my God, it looks so perfect. It is free, by the way, if anyone’s really wondering, but a lot that drove a lot of hype, for sure.

And it’s also been building up on taking all of the ideas that React has sort of mentioned for years, React Server Components being the main one, and actually building a framework around it in some way. And we just heard recent news of like, oh, Spotify will actually... it’s not Spotify, Shopify, the other S word. They’re actually moving off of React Server Components for the time being to use Remix instead, which is another really big happening.

[00:13:53] So now Next.js is like the real zeitgeist of what are React Server Components, how do you use them, and are they kind of like the next way to build React apps? So that’s exciting. On its own, just Next.js is the home to try out all these new React ideas. And also to ask, should Astro support some of these Astro or React features like Server Components and other things? And we will watch and see how they work.

But I’m happy to go into Next 13 details as well. I tried it a little bit and there’s a bunch of things floating around, some of them kind of like what Redwood’s done with nested layouts, etc., that I know you’ve messed with in the past. I don’t know how you feel about that.

00:14:35 - Anthony Campolo

But yeah, I think for me, I have a hard time getting excited about layout stuff. I don’t know why.

00:14:43 - Ben Holmes

Oh yeah, I know.

00:14:45 - Anthony Campolo

It’s...

00:14:45 - Ben Holmes

Important. I don’t care.

00:14:47 - Anthony Campolo

It’s like, yeah, you put a layout in a layout. That’s cool. And like you said, Redwood has been able to do that. We have a flat routing file and then a concept called sets. So we can use sets to nest arbitrarily, like whatever we want within itself. So that’s super cool. We basically had to invent our own router to do that so that we can easily share it among other frameworks. So that’s something that kind of just floats in the air and I don’t really think about very often, but it’s a thing that’s a constant discussion in the Next world.

But I definitely want to hit on the React Server Component stuff. I think this is very interesting. It’s something I’m personally passionate about because I’ve been following this since it was announced back in December 2020. So we’re going on almost two years now of this being a thing that’s been under the surface. For people who are real extreme React nerds or React chads, they’ve been following this very closely. The rest of the world has been kind of oblivious to it.

Then it kind of all just blew up and spilled out onto the streets and one day I was like, oh, I’m glad people finally are paying attention at least. So that’s fun.

But one thing that we did not mention is that Gatsby is also part of this new group of frameworks, along with Next, that are currently making use of the current version of React Server Components. Because there’s a long history here now that needs to be kind of unpacked, which is that it was started and released as an RFC, just like this experimental thing that React just dropped on the world and people are like, okay, this is very interesting. This would be a paradigm shift. It could have really great downstream benefits for performance and for bundle size, and for making working with the server a lot easier, which has been a perennial problem with React.

[00:16:30] Then Hydrogen jumped in and said, hey, this is cool. This is exactly what we want. This is what we’ve been hoping to build ourselves. We’re going to look at what you’re doing and build kind of in parallel to it. So they kind of implemented the same pattern in their own way. This is at least how it was described to me from Josh Larson when I talked to him about it. He was on a first-ever interview that Hydrogen even gave. So yeah, I have a vested interest in this kind of storyline myself, and this is why I find it so fascinating.

And so they were building alongside it and taking inspiration from it and trying to implement it and finding kind of issues with it. So I thought the Hydrogen team and the React team were going to harmonize and that they were going to come together, and that’s not what happened at all. Instead, Next kind of picked up that baton and Gatsby picked up that baton. And now they’re implementing it in Hydrogen, as we just found out today.

[00:17:28] I did not know this until today, that they’re deciding to go the Remix route because Remix, which is the other part of the story, tried React Server Components back when Hydrogen was trying it and were like, nah, this is not for us. We think we can get similar benefits in our own way. I also talked to Kent about this on FSJam. He said he was fairly certain that React Server Components were not going to ship in their current form, which was very prescient. They did get modified before getting shipped. So yeah.

So now here we are. Next is using it. Gatsby is using it. Remix and Hydrogen are not. Redwood has just been kind of off in the woods, not even paying attention.

00:18:10 - Ben Holmes

Literally in the redwoods.

00:18:12 - Anthony Campolo

Yeah, yeah, just not even caring. [00:18:14] - Ben Holmes Just helping out startups. I love it.

00:18:17 - Anthony Campolo

Yeah, and that's great because Redwood hesitates to chase the zeitgeist with React, because that's not what we think our purpose is. We think our purpose is to provide good, stable tools for companies building products. So there's a bit of a rub there.

But yeah, let's look at some of these messages we got here. We got some nested layout fans.

00:18:41 - Ben Holmes

Fuzzy's got thoughts.

00:18:44 - Anthony Campolo

Throwing out some Gatsby shade, as people tend to. And I first learned Gatsby, so this is fine if you jam like Chris.

00:18:57 - Ben Holmes

I love that he brings that perspective.

00:19:00 - Anthony Campolo

He always brings it back to, it's never Gatsby, it's always Gatsby too.

00:19:06 - Ben Holmes

Same. I remember the migration from Gatsby 1 to 2. That's the last time that I played with Gatsby a little bit on a personal site, and switched to Eleventy and then a bunch of other things. But yeah, it's been a minute. That was a golden time.

00:19:21 - Anthony Campolo

You know, actually seeing the Gatsby team kind of hop into the React server component stuff and how they've been engaging with this whole fallout thing, I think it's actually been, you know, it's made me want to pay attention to Gatsby again because I feel like they have been very levelheaded about it. They were like, yeah, we were part of the working group. We helped out, and we're using it, and everyone's out here yelling about stuff, and we think it's cool. And I like that perspective actually.

That kind of made me start following a lot of those people from the Gatsby team who I wasn't following on Twitter. As I've said at the beginning of this, I think framework competition is healthy, but it shouldn't be based on animosity. And even though I don't think Gatsby is particularly great or use it that much, I'm not here to talk crap about Gatsby or really talk crap about any framework.

[00:20:09] I will talk crap about people's behavior. If I think framework authors are acting inappropriately, I have no problem calling that out, and I have done that. But I think that we're all in this together. I very much think that's true. Also, just want to give up.

00:20:23 - Ben Holmes

Yeah. Hello, Ben. Hi. Yo, yo. Hi and bye. Enjoy your work.

00:20:28 - Anthony Campolo

Meeting Gatsby is not made for dyslexics. I'm not sure I understand this joke. We've got some more. Some more Hayes for Ben.

00:20:39 - Ben Holmes

Ben.

00:20:39 - Anthony Campolo

Cool. So, yeah. So you're saying you tried out Next. Do you want to talk a little bit about the features and kind of what makes them unique or interesting or worthwhile?

00:20:48 - Ben Holmes

Yeah, well, I did put out a recent video, Whiteboard the Web, about the spiciest thing that I found while working with it. I was very surprised because the first thing that stood out to me is something those in the chat might know about. It's actually not on the website right now. It's only on my Twitter. I didn't find time to upload it before my morning meeting. Oh, okay. Well, this is the website. Go find it. Yeah, I don't care. But that's the URL. Go visit, people.

But yeah, it's got an interesting setup. Yeah, there's a whiteboard right over there. There it is. I also really want to fix this. It's crooked. I'll do that in a second. It's bothering me. But Next. Next? Yes. Let's talk about that.

The interesting part about Next.js is the old ethos was that it was very Jamstack. I guess you could say that everything was recommended to be a static file, where you use get static props, get all of your data at build time, roll that into a big old website, and deploy that bucket of assets to any servers that you want, preferably Vercel, I'm assuming. And if you wanted to fetch any data dynamically, you would do those data fetches on the client.

Thank you all so much for sharing links. Dang. But yeah, they at least advised against using servers and serverless functions in order to host everything. It was all built as static assets, and now Next 13 is pulling a complete 180 where they've basically taken the Remix model and said, all right, everything is now assumed kind of a serverless function. By default, we will cache everything and we will build it as static assets as you'd expect. But depending on how you author your code, we'll switch over to serverless functions when we think it's a good idea. So you don't even have a config file to say, oh, I want this to go to SSR.

[00:22:44] No. As you're authoring your code, if you happen to make a fetch call with a different cache header, or you happen to use a dynamic route and you don't say up front what the routes are, it will just assume this should be a serverless function. I'm going to change that for you. No warnings or notices in the console. Just a little, you know, Lambda logo. And that's your sign that this was deployed to a serverless function. So it's the most hands-off I've ever seen, where you don't even really care where you're deploying it anymore. You just write your code with React server components and trust that Next.js is going to find the best way to host each route: static, serverless, or middleware with edge at some point.

00:23:24 - Anthony Campolo

Wouldn't it be trust? It wouldn't be trusting Next, though. It would be trusting Vercel, is it? Because the important thing here is that once you start talking about all this stuff, there's a server in there. Because what you're saying is basically that there's a server.

00:23:35 - Ben Holmes

Server.

00:23:35 - Anthony Campolo

There's one on hand that knows when to hand it off to a serverless function. So that's not really the framework doing that. That's the deployment platform doing that.

00:23:44 - Ben Holmes

So it's the framework that is building the assets the way that it is. And it's up to the deployment host to correctly handle that build output in the right way. And of course, Vercel, like they've built this end-to-end perfectly, where any serverless output will go beautifully to serverless function with cache handling, etc. And any other host, like Netlify, needs to build the package to catch up.

I don't know how involved the Vercel team is with other hosting providers, so I don't want to throw any unnecessary shade. But it does depend on what the host actually supports in order to use the Next.js features. Up until now, if you wanted to host Next.js anywhere that wasn't Vercel, Netlify, or AWS, what's theirs? It's not Fastify. It's something else. They have, like, a Netlify. Yeah.

00:24:36 - Anthony Campolo

Oh.

00:24:37 - Ben Holmes

Amplify.

00:24:39 - Anthony Campolo

Amplify. There's also Cloudflare Pages. I don't know, Cloudflare.

00:24:42 - Ben Holmes

Cloudflare Pages.

00:24:43 - Anthony Campolo

Next. But you could throw it into a Docker container. You could host a Next app on Fly. There's other ways you can do that. But as someone is asking here, this requires having some sort of edge, doesn't it?

00:24:56 - Ben Holmes

Yeah. So the way it's set up right now, and this is just with me playing with it, is that by default things will be built to static assets. And as soon as you start using any SSR features, it will hot swap to a serverless function. The edge part is only used for very specific applications like middleware, where if you wanted to run a little bit of code before fulfilling a request, a common one is redirects based on authentication.

Like quickly get your auth, see if you're the right person, and if not, send you somewhere else. That flow requires edge, and that depends on your platform to actually support middleware. So if you're using middleware, you're limited. And there is also an experimental flag to deploy even your website to the edge. That went well on our stream, but it was one route, so I don't know how that scales up. But yeah, I don't know. I don't think edge is required for any of this to work.

[00:25:51] But yeah, having a good adapter does.

00:25:53 - Anthony Campolo

Yeah. And I think edge, in general, is never really a requirement. It's always an enhancement. Because the whole thing is that you want your edge functions to be as similar as possible to your serverless functions, because then you could just port them. And whatever thing you had running in your Lambda in, you know, us-east-1 will then be distributed around the world.

So sure, that's what I think is interesting here, is that this is where the deployment platforms can actually come in and add value, which is by figuring out this whole lambda to edge thing. This is something that I've been working on with Redwood for a very long time. It is not possible to simply port your lambda functions to edge functions, because most of the edge runtimes you have running either on Cloudflare or you have running on Fastify, or you have running on, Deno Deploy. So Netlify is on Deploy, or Vercel is on Cloudflare. So yes, Cloudflare and Deno Deploy can become compatible, and they do that with the WCG group.

[00:26:57] Then we could be at a point where the deployment platforms can kind of solve this transition for us. So I think that would be the best win out of this whole situation, is that we all collectively decide how to get to the edge without making individual frameworks and authors figure out how to get to the edge, because we can all standardize around web tech that is being used to build these edge functions. So that I think could be very cool.

But that then requires not just collaboration between the frameworks, it requires collaboration between the frameworks and the deployment platforms. And that's where it gets tricky, because that's where all the business stuff comes. That's where.

00:27:36 - Ben Holmes

The business.

00:27:37 - Anthony Campolo

Is. That's where the competition comes back in. So it's such an interesting thing.

And then we got some more comments here. Someone's not a fan of it. Right.

00:27:51 - Ben Holmes

All right. There's gotta be one message in every chat. Go try it. By the way, people.

00:27:57 - Anthony Campolo

The entire point of the framework is that it gives you a set of best practices built by really smart people. Smart people. Hey, that's us. So it's more about do you expect yourself to be smarter than the framework authors to make your own decisions?

Yeah. I don't know if I would use the term smarter here. I would say I think what framework authors can offer is idiomatic solutions for certain use cases. So that is, I think, the way to look at it. And so it's not necessarily, like, are they smarter than me? It's more so, have they thought through this specific problem to a far greater degree than I can? We got a lot of messages coming in.

00:28:33 - Ben Holmes

Yeah, I know, and I do want to at least speak on that because it's like I almost see it as they think you're smarter rather than less smart, because they are assuming that you have read the docs and know exactly what every function does. So that if you are making a dynamic route and you don't know about get static paths and you just don't include it, it's like, oh, you intentionally didn't get static routes, so I'm going to deploy to a Lambda.

It's like maybe as a beginner, I don't know what that Lambda symbol is, and I don't realize I just shipped a serverless function that's fulfilling a bunch of requests. It might charge me more money. I have no idea that any of this is happening, and it's up to me as a developer to go through the docs and actually know what I'm working with, so that when Next tries to infer what I meant, I actually meant what I meant, you know, because otherwise it's like it's tough. It's tough to know what the user intended.

[00:29:24] And that's kind of cool about how Astro did adapters, where it's like when you go to SSR, we know you're an SSR. So if you start doing things that are not SSR, or you're using get static paths, which isn't really what you're supposed to use, we can give you warnings and say, okay, you wanted to deploy here, but you're doing some stuff that sounds like you want to deploy there. Are you sure you meant to do that? And by adding that extra step, we can actually walk beginners in the right direction.

So that's kind of the dichotomy I'm sitting at, where it's like if you add too much magic, people might magic themselves into oblivion with very high bills. It depends.

00:30:00 - Anthony Campolo

Yeah. No, that's a serious issue. I used a deployment platform once that I no longer promote, because they had a setup where you just kind of magically deploy yourself to a Kubernetes cluster on your own AWS account that was charging you maybe 80 bucks a month. And I was like, I'm just trying to launch an Express server here.

00:30:22 - Ben Holmes

I didn't know.

00:30:23 - Anthony Campolo

This. But we got trash in.

00:30:25 - Ben Holmes

Trash.

00:30:26 - Anthony Campolo

We will have to do a little Jamstack talk for his sake, but he's asking, what's powering this sweet question over. Like, this is the Wix of streaming, as Theo would like to call it. This is StreamYard.

00:30:35 - Ben Holmes

Oh, nice. Yeah, it really is a true ping. CEO.

00:30:41 - Anthony Campolo

We also got some Flight Control combo in here. What Dev is talking about is Brandon Baer's company. FSH Jam's eight, I think, is the episode for that one. Yes. So if you go there, you can listen to a whole conversation that we had about that.

That is a very interesting AWS-based deployment platform that basically builds a nice UI on top of your AWS. And so they have thought about the "we're just going to ship you to a bunch of AWS and it's going to actually charge you money" problems. So they're pretty transparent of, like, hey, here's exactly what you're going to be paying. Here's the cut we're taking. And they're very transparent about that stuff. The other one that I was using was not. So that was very important. But Flight Control is cool. I definitely think people should check that out. We got Mr. Jam himself, Chris, over here.

[00:31:38] And then Tom is saying he tends to avoid frameworks with opinionated inference, as Ben was saying here. And then we got a couple other things here that I missed. So this is an interesting point right here. Lambda is good for stuff, but think of it as the new default seems like a mistake. I got to see a framework make this mistake. I need to watch this mistake play out in real time.

Redwood was built entirely around deploying to AWS Lambdas, and we spent a year digging ourselves out of that hole and making it work on Docker containers and virtual machines. Because you can't deploy an entire monolithic application to a single Lambda until they invent a whole new paradigm-shifting Lambda technology that can manage giant codebases with very short cold starts. Then we might be there. That has not happened. Lambda does not seem to be interested in doing that. So I agree Lambda function should be part of an architecture. They should not be the architecture as of now. It just doesn't work.

[00:32:45] It doesn't scale. It leads to a lot of problems you don't want to deal with.

00:32:49 - Ben Holmes

Mhm. Yeah, I almost read that as like serverless shouldn't be the default. But yeah, Lambda is a technology, probably, too.

00:32:57 - Anthony Campolo

Because when they say serverless, they're talking about Lambda functions like those are synonymous terms.

00:33:03 - Ben Holmes

What's up.

00:33:03 - Anthony Campolo

Nate. Nate here. Nick, Nate, Nate, Nick, or John. I think that's a typo.

00:33:14 - Ben Holmes

Is this a reference to something? I want to get this. Yes. StreamYard. StreamYard?

00:33:24 - Anthony Campolo

Yeah. And so Fuzzy's saying here, you can make it all X-based. So that would just be sticking it into a container and then just launching that container. And that's a good way to go because containers run Lambda functions now. So you can take it.

00:33:38 - Ben Holmes

Oh, sick.

00:33:39 - Anthony Campolo

You can deploy a Lambda in a container, or you can deploy a container in a Lambda. Both are possible.

00:33:46 - Ben Holmes

That makes no sense. Cool. I don't know the first thing about X, but if I can use Lambda, which is the buzzword, I do know. Cool. I'll try it. As long as I'm not the framework author helping you do that, I'm not.

00:34:00 - Anthony Campolo

Yeah, no, it's deployment. Deployment's a whole thing. But we're getting a little bit after the half of the hour. Thanks so much to everyone in chat who's hanging out. It's a really, really cool group of people we got hanging out here. It's a lot of great conversation there. And this is the type of stuff that we can talk about for hours.

So probably gonna move us into the Astro SSR stuff. And Chris is just playing dumb.

00:34:26 - Ben Holmes

Here is my hydrogen. Oh, God. Yeah, we didn't talk about it, but generally I'm super happy for the Remix team. It's very cool to see them align with Shopify because e-commerce feels like the perfect niche. It's like exactly where Remix is built for. It's like that middle way between a bunch of static stuff and a bunch of dynamic stuff. So yeah, I want to see how that shakes out.

And I also like the loader pattern their router uses. So very cool stuff. Big wins.

00:34:54 - Anthony Campolo

Yeah. And then I want to go ahead and just drop this one in the chat real quick for people who are curious. Learn more about this. Yeah, I would definitely like to have people from Hydrogen on to talk about that. And then.

00:35:09 - Ben Holmes

What that.

00:35:10 - Anthony Campolo

Means from the Remix team as well. I think I still have some friends there. And yeah, so Astro SSR. Why would you use SSR with Astro?

00:35:24 - Ben Holmes

Yeah, well, everything we've been talking about today with serving things dynamically, why not do it with Astro as well? And the cool thing about Astro SSR, unlike kind of how others work where they're wrapped in an SPA or a single-page app and every route is actually like a chunk of JavaScript, in Astro's case every route is just basically an HTML file. It's an Express endpoint where you can serve up anything that you want.

So authoring with Astro SSR is really like every page is an endpoint now, and you can either return a bunch of HTML really easily with React embedded, or anything embedded that you want to use. Or you can return data. You can write endpoints with Astro SSR and host it as a server. You can also return status codes, like if you want to redirect somewhere easily. We have a helper for that. So it's kind of like the purist SSR helper that you can find if you just want to spin up a server or set of serverless functions and get them running on a platform somewhere. It's pretty flexible.

00:36:27 - Anthony Campolo

So let's say I have a blog. My blog is an Astro. This is actually true. Would it make sense for me to use SSR for my blog? Or should I just have that all be generated statically?

00:36:39 - Ben Holmes

Yeah, so fun fact, Whiteboard the Web is serverless right now because I wanted to see what that would feel like. Doing something that's kind of a blog of mostly static assets and just putting it on serverless unlocks a lot of nice things, assuming you know how caching works on your respective platform. That's something that I really wanted to make sure I got right.

If you're using Netlify or Vercel, it's very easy. We can actually talk about caching resources to be static. I think that will be a cool little demo, but it unlocks a lot of cool powers. Like if you want to add short links, like an easy, oh, everyone's asking about my newsletter, I need to make a newsletter redirect. Instead of making a redirects file, I can just go in, create a newsletter route, and then right redirect to my TinyLetter, and then I'm done. And now it's like a full endpoint that's cached forever. And if I want to add more redirects, I can do that and not worry about it changing when I change deployment hosts.

[00:37:36] And it was more useful for like full-on routes where every video I have or every blog post that you have maybe is its own route and you want to add little extensions that redirect somewhere else, like slash to get the YouTube version, slash Twitter to get the Twitter version. You can use a server endpoint and add a ton of redirects in order to do it.

So I'm talking about a bunch of stuff that probably deserves code to see it.

00:38:00 - Anthony Campolo

Yeah. And so I'm ready.

00:38:01 - Ben Holmes

Happy to do that.

00:38:02 - Anthony Campolo

Yeah. So we got a project here that I did last week with Nick. This is the deployed version. This is the GitHub right now. But I had to remember.

Oh, so someone's actually at Redwood API and admin plus Astro SSR. This is possible. We actually talked about doing this, but we didn't have time to get it together for this stream. But I'm glad someone actually is interested in this because this is possible. It's something that I could build out in not too much time. So I will put a pin in that for a second, but we need to explain what the Jamstack is for Trash.

00:38:36 - Ben Holmes

We need to explain Jamstack. We do?

00:38:41 - Anthony Campolo

I mean, I'll be very brief, a very brief little thing.

00:38:46 - Anthony Campolo

Yeah, it's just jam.

00:38:48 - Ben Holmes

Jam, baby.

00:38:50 - Anthony Campolo

Jamstack. It used to be JavaScript, APIs, and markup. That was the original definition of it. The definition has kind of been reworked to a certain extent, but honestly, that definition still works for the most part.

The most important thing is that you have a front end and you have a back end. They are not the same. They are not together as if it were a WordPress monolith, where you have a back end and a front end and it's just like serving up your front end server-side rendered style. So it's not Ruby on Rails, it's not Django, it's not Laravel. I think saying what Jamstack is not actually helps people understand what it is sometimes better than trying to explain what it is.

So yeah, it's not Jamstack: WordPress, Laravel, Ruby on Rails, Django. Those are not Jamstack. Okay, hopefully that helps a little bit. So what is Jamstack? A static Astro site that's hitting a CMS, that would be Jamstack. A React front end that is hitting a GraphQL API, that would be Jamstack.

[00:39:51] That would be Redwood. Redwood is fullstack Jamstack because you also build your backend. So this is where it gets really interesting, is that you can have Jamstack most of the time. With Jamstack you outsource your back end to a third party, so it could be a CMS. It could be some sort of hosting provider that allows you to stick data somewhere, and then you access it through an API. But you can actually build that back end yourself. If you want to create your own GraphQL API and have it be consumed by a static front end, that is still Jamstack. That's fullstack Jamstack because you manage your own back end.

So that's how I would describe Jamstack, fullstack Jamstack. We have told people to listen to Blast 80 episodes. We talked about this. But that's how I would describe it. Yeah. How would you describe it?

00:40:37 - Ben Holmes

Right. Well, one thing in the chat is MERN Jamstack. Yes. In my opinion, it's Theo's create T3 app. Jamstack, yes. And they actually talked about it on their stream with Jason Lengstorf. It was very informative.

Is Astro SSR Jamstack? No. I will just say that right now. It's very similar to Django in that you're building your backend endpoints and they return HTML. Except now you're using JavaScript. So people are like, oh, that means it's Jamstack and all these other things. It's not. You're writing a backend that returns front end. So technically you've coupled things together.

So the main thing I've heard about Jamstack that's still around in the definition is that it's decoupled. So you got your backend over here outsourced to a third party, as you said, or something you built, and your front end. And those two teams can work independently without setting stuff up for the full stack. If you're sort of pushing everything together into an all-in-one package and the back end returns the UI, then you've coupled things together a little bit and you've abandoned Jamstack. [00:41:41] But I don't see that as a bad thing in a lot of cases. I think it increases your velocity and it's a good thing. That was Theo's take, I remember, and I guess it's one I agree with, though I haven't built at scale enough to know.

00:41:53 - Anthony Campolo

So I would say full stack Jamstack would be an example of a Jamstack application that has a decoupled front end and back end, but that you are in charge of the A. As Fuzzy says here, you are in charge of the API.

So when Jamstack was first invented, the idea was that you didn't need to build your back end. You use a third party service that is your back end. And that's nice, but there's plenty of good reasons where you want to control your own back end.

00:42:21 - Ben Holmes

I was gonna say I think Fuzzy meant something else with that.

00:42:24 - Anthony Campolo

Okay.

00:42:26 - Ben Holmes

So also this.

00:42:27 - Anthony Campolo

You don't know, it stands for Full Stack.

00:42:30 - Ben Holmes

Yeah, yeah.

00:42:31 - Anthony Campolo

That's why I've made sure to always say "welcome to the full stack Jamstack" for the first, like, 20 episodes. At a certain point, I think I forgot.

00:42:38 - Ben Holmes

That's clumsy. We gotta shorten that.

00:42:42 - Anthony Campolo

This is it right here. Monolith does not equal Jamstack. I think this is the clearest it's been said.

00:42:48 - Ben Holmes

This is false.

00:42:49 - Anthony Campolo

Okay. Well, how?

00:42:53 - Ben Holmes

I'm sorry. That's why it's so nebulous. Because I think that point was raised, and then Jason said, well, if in the monolith your back end and front end are still these different services and one pings the other, it's still fine and it is still a Redwood.

00:43:11 - Anthony Campolo

So that is literally...

00:43:12 - Ben Holmes

Yeah.

00:43:13 - Anthony Campolo

I would say I would not consider that a monolith. I would say that it presents as a monolith to the developer, but that is not literally a monolith. So I think that's the key distinction.

The point is that we built monolithic applications for so long because there were reasons for it. But there were problems with that. And so what we wanted to do was take that monolithic development experience and present it in a way where it actually is decoupled under the hood.

00:43:46 - Ben Holmes

That makes sense. Yeah, I think I'm conflating monorepo and monolith, which is easy to do.

00:43:52 - Anthony Campolo

Oh yeah, no.

00:43:53 - Ben Holmes

Totally different. Yeah. And funny enough, that is my stack, Fuzzy. That is what I use right now, and I love it. It's just a lovely acronym when you put it together, you know?

We should all just use WordPress. Circle back, circle back. Man, it's fine.

00:44:11 - Anthony Campolo

And I definitely agree with this. The real Jamstack was the friends we made along the way. I've made many, many friends.

00:44:16 - Ben Holmes

Is...

00:44:16 - Anthony Campolo

A Jamstack. And this is why I think, the Jamstack is a state of mind, as I like to say. Maybe it's a nebulous term. Maybe it's a term for something we're already doing and we need a term for it. Maybe these are all true. All I can say is I've built my career on the Jamstack and I have no regrets.

00:44:35 - Ben Holmes

Yes, I feel like Jamstack just became the thing. So saying "my website's built on Jamstack."

00:44:41 - Anthony Campolo

I'm going to switch to a screen sharing mode so we can see these messages coming in a little more easily, and then we can actually start coding something for real.

Okay, so let's do that. Let me break this off and do that. So these are the things I shared already in the chat.

00:44:59 - Ben Holmes

Exquisite.

00:45:00 - Anthony Campolo

Our GitHub where I totally nailed this final git commit message, as you can see. And then here we have the actual deployed site with a button. The button does a thing that's hanging out. It's a web app. It's no longer a website.

00:45:13 - Ben Holmes

It's an app, man.

00:45:15 - Anthony Campolo

And these guys are...

00:45:15 - Ben Holmes

Is there an offline mode?

00:45:17 - Anthony Campolo

Blown away. My family friendly stream over here.

00:45:20 - Ben Holmes

Honestly. I noticed you're hitting the arrow keys. Don't keep hitting the arrow key. Pause, pause.

00:45:29 - Anthony Campolo

Okay. And then I have the actual project over here. So you had mentioned that we could find a way to get this in edge mode, or we could do something interesting with this. So what can we do with this project?

00:45:42 - Ben Holmes

We can do all sorts of things. This looks like a blank canvas to me. And we've got like 20, 25 minutes here. Probably we can mess with something. I do this on my stream all the time. I push till the last minute and push up two things.

But we could start by just deploying to Netlify Edge. My assumption is that it'll be really boring and look exactly the same. So let's test that.

00:46:05 - Anthony Campolo

Really boring things that look exactly the same, but are actually way doper.

00:46:09 - Ben Holmes

Are actually on the edge, baby.

00:46:11 - Anthony Campolo

So should I create a Netlify TOML?

00:46:15 - Ben Holmes

...

00:46:15 - Anthony Campolo

Or is this just Astro config? There is no need for a Netlify TOML, you're saying? Correct.

00:46:21 - Ben Holmes

You can actually, up there where it says "functions" in that import on line two, delete the word "functions." And I believe you can write edge functions.

00:46:34 - Anthony Campolo

Edge function functions.

00:46:36 - Ben Holmes

Or maybe it's just "edge." I'm trying to remember what the import name is, but I can also link you up to our docs.

00:46:43 - Anthony Campolo

Yeah, let's check the docs.

00:46:44 - Ben Holmes

Nice. Well done. Good on the...

00:46:47 - Anthony Campolo

Actions. All right, all right.

00:46:49 - Ben Holmes

It is...

00:46:50 - Anthony Campolo

Yeah, functions. So someone here is asking if we could rename it to "Tam Stack." I'm assuming that's because TypeScript. I think, Dev, you and Chris would get along. You'd be good friends.

00:47:01 - Ben Holmes

Yeah, I think the TanStack would come at us with copyright, so I don't know if we can do that.

00:47:06 - Anthony Campolo

Well, there's an entirely separate letter that is exactly one position across in the alphabet. That's as far away as you can get.

00:47:14 - Ben Holmes

That's about as far away as you can get.

00:47:18 - Anthony Campolo

So that's it?

00:47:20 - Ben Holmes

Yeah. You can go ahead and run your Netlify build command, and it should run it up and put it on an edge function. Let's find out.

00:47:31 - Anthony Campolo

Okay. Hold on. Let me first install the Netlify CLI.

00:47:42 - Ben Holmes

Oh, how'd you deploy it last time?

00:47:45 - Anthony Campolo

Last time we just hooked it up and it went. So I'm just gonna commit this.

00:47:50 - Ben Holmes

Oh, yeah. Just commit it, and we'll see in a moment if the build fails or not. And you said this was Solid JS?

00:47:58 - Anthony Campolo

This is Preact. Yeah, yeah.

00:48:01 - Ben Holmes

Good choice.

00:48:01 - Anthony Campolo

So here's the code for people who weren't there for the last stream. We got our index page here, which has just a little layout with some styling. And we're importing two components here.

So we got the Hello component, which is just literally "hello." And then we got the Island button. So this is an island that is a client:load. Remind me again what this client directive does.

00:48:30 - Ben Holmes

Yeah, it's worth mentioning, the other header you have in there, the hello.js, that's just going to server render and not ship any JavaScript at all. It's like React Server Components, but actually works.

00:48:43 - Anthony Campolo

Not ship any JavaScript. That's all I mean.

00:48:45 - Ben Holmes

Yes.

00:48:46 - Anthony Campolo

You said not HTML at all, which is impossible.

00:48:48 - Ben Holmes

Yes, zero HTML by default. No, zero JavaScript by default.

00:48:52 - Anthony Campolo

HTML that.

00:48:53 - Ben Holmes

Zero HTML by default.

00:48:55 - Anthony Campolo

High towers, no code repo.

00:48:57 - Ben Holmes

Bring back the bundle. Yeah, there's some fun ones out here.

00:49:02 - Anthony Campolo

This is one of my favorites. "Start by not writing any code." This is just an example. Imagine doing...

00:49:09 - Ben Holmes

Something.

00:49:09 - Anthony Campolo

It won't.

00:49:11 - Ben Holmes

This is great. "You can add new features to contributing."

00:49:14 - Anthony Campolo

You don't.

00:49:16 - Ben Holmes

I love it. You see, nothing goes wrong. It deploys every time. It runs on your machine. I mean, what else is there to say?

00:49:25 - Anthony Campolo

JavaScript building over in my Netlify account. What is your favorite programming language?

00:49:31 - Ben Holmes

My favorite is CSS and I will die on that hill. These days I am using Tailwind though, so I don't know if that's true anymore.

00:49:41 - Anthony Campolo

Interesting. Actually, let me stop screen sharing for a bit and then hop...

00:49:47 - Ben Holmes

Probably easier if you're going to check a dashboard, just save yourself.

00:49:51 - Anthony Campolo

Yourself.

00:49:53 - Ben Holmes

Ben hates confirmed. I give it a B minus.

00:50:01 - Anthony Campolo

Let me log in right here. So how's your Halloween going, Ben? What are you doing for Halloween?

00:50:07 - Ben Holmes

I actually put together a little costume as Saul Goodman. If there's any Breaking Bad fans in the chat.

Where did I put it? It started rubbing off because some water spilled in my bag, but I put together a little "second world's best lawyer" mug. Little yellow on it, little Sharpie. It was fun to put that together.

Also went thrifting for the first time in New York. Found a pink flannel, fun tie. Put on a suit. Put on a Band-Aid with a fake blood stain. Went all out this year because I didn't dress up last year. It's like, no, we gotta get this right, dude.

00:50:47 - Anthony Campolo

I haven't dressed up in like ten years.

00:50:50 - Ben Holmes

Ten years?

00:50:50 - Anthony Campolo

Just so lazy. I don't really go to Hollywood.

00:50:53 - Ben Holmes

Most people are.

00:50:54 - Anthony Campolo

You know.

00:50:55 - Ben Holmes

I know I did. It was fine. All the bars were way too expensive because it's Halloween Saturday.

00:51:03 - Anthony Campolo

Right? Okay, so this allegedly deployed and did the exact same thing it was doing before.

00:51:11 - Ben Holmes

Did the same thing. It says edge, which is exciting. Yeah, edge functions bundling. Look at...

00:51:16 - Anthony Campolo

That. Look at that.

00:51:17 - Ben Holmes

Wow.

00:51:19 - Anthony Campolo

And then site is live. The site is live over here. So there you go. The exact same site doing the exact same thing, but it may allegedly be faster now. Who knows.

I always like doing one of these when I deploy.

00:51:34 - Ben Holmes

Nice.

00:51:36 - Anthony Campolo

So yeah, they do it a couple times and then find the one that's fastest and screenshot it.

00:51:41 - Ben Holmes

And screenshot it.

00:51:42 - Anthony Campolo

So you wouldn't want to screenshot this one because then you look like a chump. You want to screenshot this one because then you look fast.

00:51:49 - Ben Holmes

Hey, there it is. Yeah, this is no cache, by the way. You'd probably put a cache header in front of this guy to do that.

Quick win that we can talk about is redirects and caching because that is just so easy to do. And it immediately made me switch. So I'll share right away what I did for my whiteboard the website.

00:52:13 - Anthony Campolo

Actually, real quick, there's a question here. Does Netlify edge cache these calls, so there's no hit when the request is the same?

00:52:22 - Ben Holmes

I don't know. I don't think so. They should all be different. So we could actually do a Date.now() in order to make sure things are caching or not, just visually.

But they should be unique requests every time. It's not like Next.js where it just kind of infers, "Let me go ahead and cache it." No, it's assumed that it'll be dynamic.

00:52:45 - Anthony Campolo

Okay, well, we got people asking for the cache example, so let's do it. What should I do here?

00:52:50 - Ben Holmes

Cache, baby. So I shared my whiteboard the web example. If we want to open that up, I can direct you to a couple examples.

00:53:00 - Anthony Campolo

Could you drop the link to that again in the chat?

00:53:02 - Ben Holmes

Yeah, I put it in the private chat because I don't have access to comments.

00:53:06 - Anthony Campolo

Interesting. Yeah, so I always have...

00:53:09 - Ben Holmes

Maybe I needed to log in before I joined. Whoops.

00:53:12 - Anthony Campolo

No, you're all good. Let me hop off again. Private chat. Okay, let's get back to screen sharing.

All righty. So whiteboard-the-web.

00:53:36 - Ben Holmes

Dub dub.

00:53:37 - Anthony Campolo

You're deploying on Vercel.

00:53:39 - Ben Holmes

Yes I am. I wanted to try it. And it's kind of tomato, tomato. When you're deploying small sites, it's like I could deploy to Netlify for fun.

00:53:49 - Anthony Campolo

It's true. Yeah, I like having my project configured so that I can deploy it to both. So then I can very easily do an HTTP stat thing, just hit both of them and be like, all right, here's the screenshot. Yeah, I always find the fastest one to screenshot. That's the...

00:54:05 - Ben Holmes

Nice.

00:54:05 - Anthony Campolo

Thing.

00:54:06 - Ben Holmes

Vercel is best confirmed. No, it's...

00:54:09 - Anthony Campolo

It's okay. So yeah, what should I be looking at right now? Like, where is the caching happening here? Is it in the vercel.json? Is it in the config?

00:54:20 - Ben Holmes

None of it. If you go into source and then...

00:54:24 - Anthony Campolo

It's just in the code.

00:54:25 - Ben Holmes

It's just in the code. So if you go to pages, this is not Jamstack at all, man.

So we go to pages. We go to any of these really. [...edition].astro, that's one of them.

So you can see there's some server handling going on where you tell me a route, and then I go look up in my collection of markdown files something that matches.

You can either just give a number. You can see in that little comment on line 18, you can just do ww.dev/48, which is what I use when people ask questions on Twitter and I need to send a link very fast. I have that for myself.

But because I'm on a server, it's like, I can check 48 and then map it to the actual blog post. So I do that here.

00:55:09 - Anthony Campolo

Let me ask some questions here because I'm not entirely positive what is happening right now. So let's just start here. We're first checking Astro.params.edition does not equal string. What the heck does that mean? Is that just type checking?

00:55:24 - Ben Holmes

Yes, just type checking.

00:55:25 - Anthony Campolo

Okay, so that's just type checking. And then what is Astro.redirect?

00:55:29 - Ben Holmes

Astro.redirect will redirect to that page. So this is saying redirect to the homepage if you don't find a match.

00:55:37 - Anthony Campolo

So that is kind of just like a 404 handling kind of thing.

00:55:41 - Ben Holmes

Yeah. We can just jump into some code now. I really just shared this link to get one little bit of information. No, this is good.

00:55:49 - Anthony Campolo

Start explaining. I'm trying to build a mental model here of what's happening. So just tell me how to start doing this in my project because this is probably a simpler use case anyway.

00:56:00 - Ben Holmes

It should be. Yeah. So if we just wanted to cache this page we're on right now, we can go into the Astro headers. On line four, just hit enter, and we can do Astro with the big A, the Astro global. Astro.headers.

Surprised you don't get autocomplete for this, but keep going.

00:56:31 - Anthony Campolo

That might be because we picked strict TypeScript when we first did it.

00:56:35 - Ben Holmes

You might be on an old language server, but it would be very old if you are.

00:56:40 - Anthony Campolo

Yeah, no.

00:56:41 - Ben Holmes

I don't know. Well, keep going. I'm expecting Erica to pop up immediately and say, "It's because of X." She's the person I wanted to look cool to.

00:56:51 - Anthony Campolo

Cool.

00:56:52 - Ben Holmes

It's tough. It's hard to review those PRs, but they're heroic.

But imagine autocomplete here. You would do... sorry, it's not .headers, it's Astro.response.headers. Because here we're going to add headers to the response that we send to the user. And inside of there you can do .set because it's just a key value store.

00:57:16 - Anthony Campolo

Now we're starting to get some stuff. [00:57:19] - Ben Holmes These are just VSCode offering things. I think all of...

00:57:23 - Anthony Campolo

These code, just toss it out.

00:57:25 - Ben Holmes

Yeah, I noticed in the config there wasn't anything. So I think all of your suggestions are off right now.

00:57:30 - Anthony Campolo

Which is why I don't use autocomplete. This is me having been a TypeScript holdout for a long time. I never got accustomed to just my computer handing me solutions.

00:57:40 - Ben Holmes

You're missing out, man.

00:57:42 - Anthony Campolo

I know, I know.

00:57:45 - Ben Holmes

Like, I don't like Copilot, but I love that.

00:57:47 - Anthony Campolo

Thanks for being here.

00:57:48 - Ben Holmes

Hey.

00:57:49 - Anthony Campolo

So what next?

00:57:49 - Ben Holmes

So now you can do cache-control in quotes, cache-dash-control quote.

00:57:58 - Anthony Campolo

You like...

00:58:00 - Ben Holmes

Like that in there? Okay. You can just do cache-control, all lowercase. Okay. And this is just adding a web native header. This isn't an Astro feature we're doing right now. Okay.

00:58:12 - Anthony Campolo

Bye.

00:58:13 - Ben Holmes

Oh, yeah. What's up? And we're going to add a cache in order to cache it for every request. And if you hop back to my code, we can grab the exact cache header to get. I'd love to make this sort of built in in the future, but you can see there I have...

00:58:27 - Anthony Campolo

We want just this whole thing, basically.

00:58:29 - Ben Holmes

Yeah. So big cache is a variable in my utils. Yeah. So just click into big cache so we can get the big cache.

00:58:39 - Anthony Campolo

So the big cache in here.

00:58:42 - Ben Holmes

Yeah. I think if you command click, it'll work.

00:58:45 - Anthony Campolo

It's coming from reference.

00:58:46 - Ben Holmes

Oh, it probably won't cause aliasing. You see my...

00:58:49 - Anthony Campolo

From your utils over here.

00:58:51 - Ben Holmes

Yeah. So if you go to source slash utils, that's where I put it. Yeah. There it is.

00:58:56 - Anthony Campolo

So should I copy this whole page?

00:58:58 - Ben Holmes

Nah, just grab the big cache export.

00:59:02 - Anthony Campolo

Just this guy right here.

00:59:03 - Ben Holmes

Yeah.

00:59:03 - Anthony Campolo

So let me just do this then.

00:59:05 - Ben Holmes

You can see right there I engineer it based on what the Vercel guide said would be big cache.

00:59:11 - Anthony Campolo

Honestly, I'm gonna do this. Is that okay?

00:59:15 - Ben Holmes

What I was hoping for. Yeah.

00:59:16 - Anthony Campolo

Yeah, I think that's a bit more readable.

00:59:19 - Ben Holmes

Texas cache. Oh, that's a good suggestion. Dang. That's good.

But yeah, it's like, what is this cache? Well, this is how cache headers can work if you want to cache a request basically forever. This is actually something that a lot of build tools will do when it builds your site. It will serve up all the static assets with a big max age so that it is cached forever basically.

00:59:46 - Anthony Campolo

This is basically like saying cache infinity, right?

00:59:48 - Ben Holmes

Yeah. And S is the prefix used for CDNs. So you can see there, like, max age zero means don't cache it in Google Chrome, don't cache it in your computer, but cache it on the CDN with the biggest thing possible. So it's almost like slapping an HTML file somewhere.

01:00:07 - Anthony Campolo

So this is interesting. I remember back in the day, Matt Billman had an argument with Matt WordPress about cache control headers, and he was saying that people just don't do it. This is the part that he was saying most devs skip.

So yeah, I think that this is cool. I would think it would make sense for Astro to have some sort of, like the way Astro has these client directives, would actually ever have cache directives.

01:00:38 - Ben Holmes

Yeah, like utilities, cache directives. We've definitely... Right now we're actually working on a hybrid deployment option where you can just say, I want you to statically cache this, or I'm okay with you not statically caching this. So it would be some flag that you put in the file to say this file goes static, this file goes serverless, this file maybe goes edge.

But the more granular of giving you some preset cache controls that make sense, that's something I'd like to see. We really like having just Astro response headers set. But instead of you figuring out what the max age should be, maybe just having a big cache, like a variable that you can put in there, like, oh, that's a pre-built cache that works for this use case.

01:01:21 - Anthony Campolo

Someone's asking...

01:01:21 - Ben Holmes

Asking.

01:01:22 - Anthony Campolo

Whether the S stood for shared or not. Documentation for this over here. And this also popped in some CSS.

01:01:31 - Ben Holmes

Yeah, it's shared in that it's cached on the server, so it would be shared among everyone who's requesting from that server.

01:01:40 - Anthony Campolo

Then I asked, is there a neat way to bust this cache?

01:01:44 - Ben Holmes

Right. So depending on your deployment host, it should just bust for you anytime that you redeploy your website. At least testing on Netlify and Vercel, setting these max ages, it will bust the cache whenever I push up a new build of my site. So I'm not worried about any of that hanging or people downloading a new version.

I knew it. I knew you'd catch that. I was like, no.

01:02:10 - Anthony Campolo

Totally. I kid the best part.

01:02:14 - Ben Holmes

It's like, what have I done? What have I done?

01:02:18 - Anthony Campolo

I can't take you guys anywhere, I swear. Hey.

01:02:22 - Ben Holmes

You got trash in the chat? What are you gonna expect?

01:02:24 - Anthony Campolo

Yeah. That's trash. I'm surprised. Trash, you were... The fact that you can remain on the internet, it's impressive.

01:02:30 - Ben Holmes

It's amazing. You should go see his fart Twitch clip. It's pretty spicy. It's pretty good.

01:02:37 - Anthony Campolo

Okay. So anyways, is this it?

01:02:39 - Ben Holmes

We've done...

01:02:40 - Anthony Campolo

This. Do we have to do...

01:02:40 - Ben Holmes

That's it. Yeah. So now this will be cached on the edge, and it has to be the same.

01:02:45 - Anthony Campolo

Astro makes things too simple.

01:02:48 - Ben Holmes

I know, there's not enough to demo, right?

01:02:49 - Anthony Campolo

This should be harder. Why aren't you making it harder for me?

01:02:51 - Ben Holmes

So let's get a little spicy. Let's add a date into each of these. So like on this page, we can add a span inside of our HTML or a paragraph tag and just make it date now.

01:03:08 - Anthony Campolo

...

01:03:09 - Ben Holmes

Or a new date. I guess just new.

01:03:13 - Anthony Campolo

Up here, right?

01:03:14 - Ben Holmes

You don't have to. You can do curly braces and new date, but you could do either like that. Yeah. Just do the thing. [01:03:22] - Anthony Campolo Are you serious? That's going to work.

01:03:24 - Ben Holmes

Work. Yeah. This was too easy, man. Open close parentheses, and then maybe like a, and then dot toDateString. That could look good.

Oh, now it's helping. There we go. Yeah. Open close as well. They're both functions.

01:03:44 - Anthony Campolo

Okay. Makes sense.

01:03:45 - Ben Holmes

Yep. One more thing. Duplicate this page, like index.astro. Just copy and paste it.

01:03:56 - Anthony Campolo

Sorry. Copy-paste this whole thing into a new page.

01:03:59 - Ben Holmes

Yes.

01:04:00 - Anthony Campolo

Let's call it new astro. Or that'll be lowercase.

01:04:04 - Ben Holmes

All of it.

01:04:04 - Anthony Campolo

Lowercase? Uppercase?

01:04:07 - Ben Holmes

Lowercase for routes. It's usually convention. And at the top here, delete the cache header, because what I want to see is have one route that is cached and one that is uncached.

Then we can see how this feels.

01:04:21 - Anthony Campolo

Okay. Let me just pull these out. Not really necessary.

01:04:32 - Ben Holmes

Just looking at the dates. So now, I guess you can commit this and we can wait a sec for it to redeploy.

01:04:40 - Anthony Campolo

Let me at least look at it on dev real quick, just to make sure.

01:04:43 - Ben Holmes

Oh, sure. Yeah. We didn't even run it. I'm just assuming I'm nailing it.

01:04:47 - Anthony Campolo

Yeah, I know, right?

01:04:49 - Ben Holmes

We're nailing it. Oh, we should do time string. See, this is why you debug, huh? We should have the time in there, so I think date time string or to time string, one of the two.

Remember? What? Dot to... and just let your editor give us ideas. To... time. Just type the word time. It's not going to help us. Come on. ToISOString. ISO.

01:05:24 - Anthony Campolo

ISO string. All right.

01:05:27 - Ben Holmes

To ISO date. Sure, maybe. What is—

01:05:30 - Anthony Campolo

That.

01:05:32 - Ben Holmes

String? ToISOString. I don't know about date.

01:05:35 - Anthony Campolo

To ISO.

01:05:36 - Ben Holmes

ToISOString. Grab it.

01:05:38 - Anthony Campolo

String.

01:05:39 - Ben Holmes

Apparently to ISO date is also a thing.

01:05:41 - Anthony Campolo

This one, to ISO.

01:05:44 - Ben Holmes

Yeah, that'll do. We just need a big timestamp to match our big cat.

01:05:48 - Anthony Campolo

I don't mess with the Date object very often.

01:05:51 - Ben Holmes

I use it a lot. It's nice because I learned there's a time element in HTML. You could change the span to a time, and it's good for SEO because you can put the date.

01:06:04 - Anthony Campolo

Right now, we have literally nothing. So whatever, we wait. No, hold on, hold on.

01:06:08 - Ben Holmes

Oh. Hang on. You're editing.

01:06:11 - Anthony Campolo

Hold on.

01:06:11 - Ben Holmes

Editing index. Cool. Nice. Okay. And edit new to be the same thing.

01:06:17 - Anthony Campolo

Okay. Yeah, they're the same thing. It's got a cache-control header. One doesn't.

01:06:21 - Ben Holmes

Yes. And if you—

01:06:23 - Anthony Campolo

Actually, let me call this.

01:06:25 - Ben Holmes

I don't know if it'll show it locally.

01:06:27 - Anthony Campolo

That's not right. But, no cache.

01:06:30 - Ben Holmes

No cache. Oh, no. Yeah. No cache.

01:06:33 - Anthony Campolo

Yeah. This is it.

01:06:33 - Ben Holmes

Yeah. Refresh it a bunch of times. Make sure the number goes up. And now go to the index page, because I'm curious if cache is respected in dev servers. I don't think they are.

So we gotta deploy in order to see that caches are working because it's a CDN cache. So if you do that, from experience, Netlify uses it pretty well. Although it's my first time using s-maxage; I just did that for Vercel specifically.

01:07:06 - Anthony Campolo

Also, you get the joke. Cash rules everything around me.

01:07:09 - Ben Holmes

Cash. Oh my god.

01:07:12 - Anthony Campolo

That's a Wu-Tang Clan reference for all y'all.

01:07:14 - Ben Holmes

Pretty good. That's tasteful.

01:07:17 - Anthony Campolo

Yeah.

01:07:17 - Ben Holmes

That's tasteful.

01:07:18 - Anthony Campolo

All right, so this should be deploying right now. Building? Okay.

I was not following the chat at all over the course.

01:07:25 - Ben Holmes

Oh, there's some sparkling discussion happening in chat. Very much worse.

01:07:30 - Anthony Campolo

Code was stoned in control space. Doesn't work.

01:07:32 - Ben Holmes

It really is stone, though. I don't know what's going on.

01:07:35 - Anthony Campolo

Coming at you, coming in? Nope. No. That's funny.

01:07:43 - Ben Holmes

Dave literally is.

01:07:48 - Anthony Campolo

Okay. All right, we got this. So this will not update, or will update.

01:07:53 - Ben Holmes

So it is updating. Yikes. This is—yeah, I noticed that s-maxage is not respected by Netlify. But in Vercel, it is.

01:08:03 - Anthony Campolo

All right. So we got it.

01:08:04 - Ben Holmes

Really.

01:08:04 - Anthony Campolo

Annoying, Vercel. Then it...

01:08:05 - Ben Holmes

Could. It could also be the edge deployment spice that we're adding on top. That's something I haven't tested either. So, two options. Deploying to Vercel.

01:08:16 - Anthony Campolo

I'm already.

01:08:18 - Ben Holmes

Removing.

01:08:18 - Anthony Campolo

Edge. All right. Boom, boom.

01:08:23 - Ben Holmes

Yeah, I think Netlify might need max age. You're going. We don't have the Vercel adapter. Dude, we can't do this right now. We need the adapter.

01:08:32 - Anthony Campolo

Ah, okay, here's what I want to do. I'm going to create a new branch with the Vercel adapter and hook it to that branch. Sure. Yeah, yeah. Yep. All right. So now this will be for sale. Will be Vercel edge.

01:08:49 - Ben Holmes

Just run Astro add Vercel in the terminal.

01:08:52 - Anthony Campolo

Ah.

01:08:53 - Ben Holmes

It'll install and set it all to simple.

01:08:55 - Anthony Campolo

To simple Astro.

01:08:56 - Ben Holmes

Simple.

01:08:57 - Anthony Campolo

Astro.

01:08:58 - Ben Holmes

And you're going. You're thinking you gotta write code.

01:09:01 - Anthony Campolo

Yeah, right. [01:09:01] - Ben Holmes We're not a J. Lengstorf reaction.

01:09:04 - Anthony Campolo

Yeah. No, this is the redwood move right here.

01:09:08 - Ben Holmes

This is the move. This is the Angular move. If we still have those Angular heads in the chat.

01:09:13 - Anthony Campolo

Oh, we got at least a couple. All right. So this is good to go now.

01:09:16 - Ben Holmes

That's it. Yeah. We'll just put on serverless because I know this will work. And if you want to try edge, let's see if Vercel Edge gives us good stuff too.

01:09:26 - Ben Holmes split

Do that. Okay. We gotta set the right branch tracker.

01:09:31 - Ben Holmes

Do you actually use angular?

01:09:33 - Anthony Campolo

Have you? Trash is a legit Angular dev. I actually want to know the opinion of a developer who knows what they're talking about about Angular. I would talk trash, not all these other people who say it sucks and never used it before.

01:09:47 - Ben Holmes

Hey, Angular One went hard. That was a great framework. I used that all through high school, a little bit through college. I learned React like halfway through college for jobs, but Angular was fun. Angular Two was interesting. I used it for mobile dev.

01:10:06 - Ben Holmes split

Okay, here we go. This is what I want.

01:10:09 - Ben Holmes

Very nice.

01:10:13 - Ben Holmes split

Yes, that should hopefully redeploy.

01:10:16 - Ben Holmes

Let's find out.

01:10:18 - Anthony Campolo

Okay. That's good.

01:10:20 - Ben Holmes

That looks good.

01:10:21 - Anthony Campolo

That's good.

01:10:24 - Ben Holmes

Okay.

01:10:27 - Anthony Campolo

Oh, wow.

01:10:27 - Ben Holmes

It's done.

01:10:29 - Anthony Campolo

Okay, so this one.

01:10:30 - Ben Holmes

And there it is.

01:10:31 - Anthony Campolo

See, as I refresh, it does not change.

01:10:34 - Ben Holmes

It does not change, man. Big cache.

01:10:37 - Anthony Campolo

All right, look at that.

01:10:39 - Ben Holmes

But now go to no cash, and we should have everything.

01:10:44 - Anthony Campolo

Oh, that's a good demo, man. That's a very good demo. Thank you for that.

01:10:48 - Ben Holmes

There it is.

01:10:49 - Anthony Campolo

Very happy.

01:10:50 - Ben Holmes

And we will streamline this going forward. But the dynamic idea is: yeah, I know you had to write one whole line of code and learn what cache headers are. That's too much effort. We need to make it way more streamlined.

01:11:06 - Anthony Campolo

All right. Cool. We're a little bit over time here. For people who have final questions or things we want to talk about, please hit us now. Is there going to be some sort of way to opt out of an integration and write my own request handling? Questions.

01:11:20 - Ben Holmes

Great question. You can write your own adapter for sure. It's an open integration API, as we've called it, and the docs have some resources on that. I could probably link those, actually, but they can get in the way. Yeah. I think what you're probably, or what you might be looking for, are the more bare-bones integrations like Node or Deno, and those output very raw functions that you can wire to a custom server. And that's something that Node does right now, actually, where you can choose standalone, where we give you a server or just as assets or as middleware as it is. And you can go write an Express server with Node, do all the stuff that you want, and just add Astro as a little bit of middleware to that server you already have. So that might serve your needs already. But if you want to go full raw and get all the build output and write your own adapter, the API is open to do it. It's just a function that gets called. But yeah, I did also want to answer Trash's question about how do we fix that?

[01:12:20] Again, it depends on your host and how they treat cache headers. And that's kind of the tricky part is we could recommend cache approaches, but they vary depending on what the host allows. I think when we're using edge functions in Netlify with CDN caches, Netlify doesn't support edge functions with cache headers that are like CDN cache headers. So it didn't work. But on Vercel, I read up on their documentation, and it explicitly said, this is how you do it. So I said, all right, that's how I approach it in my Astro project. So it comes down to the host, but cache headers are a web-native thing that you can use in all cases. Yeah. The fix was keep the max-age and go to Vercel. Of course it was. Go to Vercel. Go to the triangles. Triangles help you. And also getting off edge. I think edge might have been part of it.

01:13:14 - Anthony Campolo

Yeah, because.

01:13:15 - Ben Holmes

You can just use max-age to.

01:13:16 - Anthony Campolo

So, Travis is asking here. What if I want Astro on the edge?

01:13:20 - Ben Holmes

Just deploy to edge. It's fine. I just need to check if cache headers are working on those deployment hosts because I never tried it before. I just need to debug and find out.

01:13:30 - Anthony Campolo

And Chris is wondering whether you got your jammy trophy yet.

01:13:35 - Ben Holmes

Oh, my God, I can't show it on stream. That's a spoiler, but I can't.

01:13:39 - Anthony Campolo

We all get one. First of all, that doesn't mean he won. Everyone gets it right. And then we need to film ourselves both losing and winning just in case.

01:13:47 - Ben Holmes

I secretly love my losing animation. So I've been sharing it around because I won't lose, like I just won't. But it was fun. And that's part. I assume that's why they sent out the trophies, because we had to record videos, so everyone had to have the thing in their hand. At least feel like they won. Jamstack is a feeling.

01:14:08 - Anthony Campolo

The feeling. All right. I think that was all the questions. I think these questions were jokey. Not sure how many of those were real questions.

01:14:17 - Ben Holmes

Alex, I don't know who made that trophy for you. It might have been your mom who sent it over just to be nice. [01:14:28] - Anthony Campolo Also nominated. So we got the whole thing. Basically, all of Jamstack is here right now on this stream.

01:14:34 - Ben Holmes

Basically, we've drawn the good crowd for sure. But yeah, a lot of stuff you just deploy and hope that it works. That's with edge. Edge is real bleeding edge, as you might imagine, and everyone's still figuring out the way to do it. I'd wait like a year before hosting anything on edge functions. Astro is the easiest way, maybe the most stable.

01:14:55 - Anthony Campolo

So fuzzy asked, does Azure do your washing up? I think that's what you meant. It's a serious question. I don't know. I have no idea.

01:15:01 - Ben Holmes

I don't know if he did. I don't think so.

01:15:05 - Anthony Campolo

You should get financial advice from Astra. I only take financial advice from God.

01:15:11 - Ben Holmes

Wow. Yes.

01:15:14 - Anthony Campolo

That's it, the only one. He's the only one who can really give that advice. If it's not God, they're like, why bother? But no, if you want to take financial advice, you should not talk to me or Ben.

01:15:25 - Ben Holmes

Talk to God. Dan Abramov.

01:15:28 - Anthony Campolo

Alright, so we got someone here who's deep in Cloudflare world. So I do a regular dev. I run a proper Cloudflare environment. I should be able to have raw render functionality without the quote-unquote integration. We thought about expanding our integrations, but we keep going back and forth. Yeah, I mean, tough. Okay. With something like this, you're going to buy into the framework's conventions, I think. And if you don't want to buy into the framework conventions, then maybe you don't want the framework necessarily. If you think the framework conventions could be better, you should hit up someone like Ben and let him know it could be improved a bit, and maybe work with them on that.

01:16:10 - Ben Holmes

Yep. Yeah, I'm reading up in the chat as well. You were using for cell middleware, maybe because Cloudflare, I'm assuming. And right now our integrations aren't built to do that for very specific hosts. Node and Dyno are the raw ones, and the rest of them are very opinionated. So it sounds like you need a sort of middle-way middleware option, and that's something we don't have. I think offering issues, RFCs, discussions are all helpful there. But I'm curious, if you tried building an integration, what were the walls you ran into, and hooks into the build that you wanted to see? Because I don't know what's missing right now. It seems complete to me, but yeah, I have some experts on deployment that would love to get in touch.

01:16:52 - Anthony Campolo

Yeah. Let me just say right now, the Astro team is one of the most welcoming, collaborative frameworks out there. If you think something could be better, or even if you just think you could give some notes to them, hit them up. They will be happy to chat with you. We got both Ben here on the stream. We got fuzzy in the chat. Really awesome community. It's one of the things that really made me hyped on Astro. The people behind it are great.

01:17:17 - Ben Holmes

Yeah. He's kind of... He wasn't paid anything. He just signed a contract.

01:17:24 - Anthony Campolo

It's this guy.

01:17:25 - Ben Holmes

It's just binding for the next five years. It's pretty rough. He is only recommending Astro and not what? Redwood. It's kind of a problem.

01:17:34 - Anthony Campolo

Mhm. Yeah. Astro supports Vite because they looked at Slinkity and said, wow, this dude somehow just blew our framework away.

01:17:43 - Ben Holmes

Yeah, he just figured it out. I was using Snowpack. That's where I started. The first video was about Snowpack.

01:17:49 - Anthony Campolo

Okay, so when you're on Semantics, demoing Slinkity with Snowpack, I remember asking you, do you think you could do this with Vite?

01:17:59 - Ben Holmes

Oh, I don't know. I don't know what I said.

01:18:04 - Anthony Campolo

You didn't say anything because you weren't even thinking about that at that point. But I just want to say, laying claim to being ahead of the game, I was ahead of the game.

01:18:12 - Ben Holmes

Ahead of the.

01:18:13 - Anthony Campolo

Curve.

01:18:14 - Ben Holmes

For sure. Ahead of Svelte. Ahead of Astro? Actually, no. I think Svelte did at first.

01:18:18 - Anthony Campolo

No, Svelte.

01:18:19 - Ben Holmes

Was first.

01:18:19 - Anthony Campolo

SvelteKit was the.

01:18:20 - Ben Holmes

First.

01:18:20 - Anthony Campolo

To jump from Snowpack to Vite. I was already using Vite because I was just like, this is better than Snowpack. But I didn't build a meta framework to prove the point.

01:18:29 - Ben Holmes

Yeah, now we gotta move to Turbopack. So it's been a tough road. Turbopack, I know, I know. Svelte has been turbulent where it's like, oh, now they work at Vercel, so now Svelte gotta be on Turbopack in like years. By the way, there's a lot of hype around Turbopack. The next thing, wait like two years, people. I couldn't get it to build or use React Server Components. It doesn't do much right now.

01:18:51 - Anthony Campolo

Okay, well, since Chris had very early this can of worms: Is Astro Web5 compatible? No, but it is Web3 compatible.

01:18:59 - Ben Holmes

What does that mean?

01:19:01 - Anthony Campolo

So Web5 is Jack Dorsey's new thing. It's not going to take off. Okay, if you want to know how to literally attach Astro to a 2 a.m. smart contract, there is a video right here showing how to do it.

01:19:19 - Ben Holmes

So nice.

01:19:20 - Anthony Campolo

Astro is Web3 compatible because I made it so.

01:19:25 - Ben Holmes

It's Jamstack, baby. Bolt any back end you want. Okay, even if the number is bigger. All right, we can rave down.

01:19:32 - Anthony Campolo

We can. We could do this for another hour.

01:19:34 - Ben Holmes

Forever.

01:19:35 - Anthony Campolo

Thank you so much for being here, Ben. This is such a fun stream. I had a blast. I always enjoy streaming with you and making content with you. It's always a great time. So we already talked about Ben Homes.Dev, that's where you are on both Twitter and Twitch, I believe.

01:19:52 - Ben Holmes

Mhm.

01:19:53 - Anthony Campolo

Yeah. And then we got.

01:19:54 - Ben Holmes

To.

01:19:54 - Anthony Campolo

Build for the Astros, and yeah. Anything else you want to leave our viewers with before we close out here?

01:20:02 - Ben Holmes

I never have outros. Dang it. I could say keep on jamming, but I don't know if that's in vogue anymore.

01:20:10 - Anthony Campolo

Well, usually the outro.

01:20:11 - Ben Holmes

Is whiteboarding people.

01:20:13 - Anthony Campolo

Your Twitter and Twitch, but I'm ahead of the game on you for that. So yeah, keep.

01:20:17 - Ben Holmes

Whiteboarding, keep us in those caches, keep us in those moves.

01:20:21 - Anthony Campolo

Wtw dev.

01:20:22 - Ben Holmes

Right? Wtw dev for all of the learning resources for anything I didn't cover. That's it.

01:20:31 - Anthony Campolo

All right. Thank you so much, everyone, for being here. This will close that and we will see you next Monday, same time, for another episode of AJC in the Webdev.

01:20:42 - Ben Holmes

In the web. Oh my God, you need a stinger so you don't have to do it yourself. It also has to sound like a rock band. I don't know if you've had rock bands in a past life, but I'm sure someone would.

01:20:53 - Anthony Campolo

Me? Never. I've never been in a rock band. Certainly not. Not even one. No, I've been in many rock bands.

01:21:02 - Ben Holmes

Nice.

01:21:03 - Anthony Campolo

All right. Bye, everyone.

01:21:05 - Ben Holmes

See y'all.