What’s New in Astro v1?

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON LENGSTORF: Hello, everyone. And welcome to another episode of Learn With Jason. Today, on the show, we're bringing back Fred. How you doing, Fred?

FRED SCHOTT: Great, thanks for having me on.

JASON LENGSTORF: I'm thrilled to have you back. It's a pleasure to talk to you about the way the web is moving, which I think we're going to spend a decent amount of time on today. Let's talk a little bit about you. You want to give a background the folks who aren't familiar with you work?

FRED SCHOTT: I've been working on Astro for so long. Before this, I was working on a project called Skypack and Snowpack. It was early days of Veet. Before all of that, there was Pico [audio cutting out] working on cool stuff like this. Before that, I was at Chrome, at Google. I've been working on open source and the web for a long time now and really excited with where it's headed.

JASON LENGSTORF: Very cool. That's superexciting. So, how� how do we want to start this? Like, it feels to me like we are in a� what I would consider to be a� kind of a watershed moment for the web and let me� let me contextualize that. This isn't one thing. So, what I've been watching is since 2015, we've sort of watched React eat the whole market. It's a default for anything that starts. For good reason, it's a great framework or library, however you want to categorize it.
And, we sort of saw competition, like, turn into niche things like, you would have, oh, you have, you know, this niche framework over this, this niche framework over here. Oh, if you're going to go production, you got to go React. It feels like we've seen legitimate contenders come up for the first time ever. People are, I think, they're hitting the limits of effects and, like, React Hooks API is wonderful until you hit those edge cases and then it gets really confusing. People are running into those as they hit bigger and bigger use cases.
We've seen solid JS, with Ryan, is posing, hey, what if this is simpler. Svelte is putting interesting stuff out, like, hey, what if this was just simpler? We're seeing these disappearing frameworks, like Astro, we're seeing Eleventy make a play. This is not what developers use for their blog, you can use it for anything. We're starting to see this really interesting shift where, maybe for the first time in a really long time, there's a challenge for React as the King of the Hill for production frameworks.
We're also seeing this general shift in the way we think about JavaScript on the web because I think in the earlyearly days, along the time jQuery went big, you couldn't write it without normalization. Then when we got to the Angulars and Reacts and explosion of big frameworks, those were doing the same thing. Like, a bunch of the work in React is around the idea of virtual DOM. All these things that allow us to smooth over the inconsistencies of browsers, but that's not as true anymore. Browsers are really starting to come together. We've got some pretty predictable APIs. Do we really need all that JavaScript? Is all that JavaScript necessary? Which has led to some interesting things.
Maybe we should go back to not shipping JavaScript by default? Maybe that's the recognize idea. We see this with Eleventy, with Astro. We've seen this push with React to go to server components where maybe we don't need to ship the JavaScript. Svelte is disappearing.
There's this other thing that's really interesting, which is this idea of, maybe we should just go back to multipage apps. All of that is kind of context for what I want to talk about today which is, where do we see the web going from here? I feel like all of those things mean that we might be able to watch a big shift in the way people build for the web. I'm very exciting for it. I love competition in this space. I love seeing these frameworks giving each other ideas and building off of each other's strengths. It means that I, as a developer, get a better end experience and my users. I've monologued for three solid minutes. [Laughter].

FRED SCHOTT: It's honestly what I love about this show. Let's talk about Astro by talking about the entire web, the state of our industry, our technology. There's a lot of� yeah, a fun part of this project is it touches all of that. It doesn't exist in a vacuum. It's all stuff that I think about a lot so it's fun to have the chance to come on here and talk about it with you.

JASON LENGSTORF: Maybe let's start with a quick overview. What is an SPA and what is an MPA, for setting the base context here?

FRED SCHOTT: Let me go into that because there's something that you touched on, which I think is really important in this story, which is if you think about Next.js, it was React, Next.js, people are using Create React app. It was slow. There was a tool that came along, which I think we now call an SPA or meta framework, or SPAlike. We can offer an incredible developer experience by just use React everywhere and Svelte would say, use Svelte everywhere. We're building this applike thing, that's super dynamic and you're on your Mac Book so it's moving really fast. This great developer experience that I think, over time, kind of� all you have is the hammer, everything's a nail. It got so good and so much better that it became the silver bullet. Build your blog with a big framework. Build a simple static site. Hello World, learn web developments. It is far beyond what makes sense for those users and that's where Astro, this MPA, with Eleventy, Zack is an also proponent of this model. We're excited to be sharing this space and push that new model. It makes sense for a lot of users who aren't wellserved.
Give us some developer experience that's more designed for them and their use case.

JASON LENGSTORF: And I think, you know, for me, what I found was, you know, the� back in about 20152016, I was working on a few applications. I had this R&D contract and it was similar to the way Zoom works online. You would have live video and the instructor would be controlling slide show and videos would be on screen, lots of stuff like that. And as I was doing this, I was like, there's no way I can build this on the web. 2015 browsers were not going to let this function. You needed some way to cover over the inconsistencies in Web Socket, ways to handle this data transition change. You wanted to make all these pieces work and so you start reaching toward JavaScript, this componentbased stuff, because you could just control� I didn't have to make the browser doing anything. I just had to get a div on the page. For this particular application, that was fine. But that kind of became the default. Like, if you inspect Source on a whole lot of websites these days, what you get is a HTML screen. Singlepage apps are really, really powerful when they are apps, when there's literally no way this thing will function if it's not powered by JavaScript.
Remix is challenging that and saying, even these, you can run. But there's still a place, I think, for supercomplex, superhighchanging, doesn't need to be URLaddressable. Singlepage apps still have a place. Meta learning was saying that's probably going to stick around for a very long time.

FRED SCHOTT: There's certain things you're building that totally work for that. The fun thing about Astro is we don't say, we're the best tool for every type of site. If you're building something that's really applike, you can probably find a better tool out there. We are there for when it's not applike.

JASON LENGSTORF: Exactly. And the thing that is interesting is, this resurgence of multipage apps, MPAs� that's when you click a link, the page actually refreshes. You go to a different page in the browser.

FRED SCHOTT: The server [Indiscernible] and it's dynamic, almost handoff between a server and a browser.

JASON LENGSTORF: So when you get into multipage apps, for a huge amount of use cases, you know, marketing sites, blogs, simple apps, mapping, stuff where you want people have a [audio cutting out] we've got all these things that have been built into the platform. We've got preload and prefetch and lazy loading on images and really good caching and CDNs, Netlify, they do such a good job of making sure content is right next to you so it downloads really fast.
And all of those things kind of mean, like, the benefits of SPAs aren't as pronounced now when you look at something like� really, I would say 80% of the internet just doesn't need that really heavy, like, all JavaScript all the time approach. And it leads to things like easy� it's easier to maintain and it's easier to reason about because you're not building the site twice. You don't have the server version and the hydration version. How do I edit both the exported JSON that's going to be used by the site and also the generated HTML. We can build those tools. I know we're seeing tools come out that allow you to do HTML rewriting on the fly for Next.js, but that's a lot of machine for something that would be really straightforward if you're using plain, old HTML.
So, how� so, like, MPAs, we're talking about them in certain corners, you hear them talked about as a brandnew idea. This is the original internet. So, why do you think now is the time that we can bring them back in a serious way?

FRED SCHOTT: The term, MPA, I think is fairly modern. It's a response term, like, defining yourself as the opposite of something else is always� you never want to do that. SPAs is the default. This used to be the way we built websites. You would have to stream down HTML that would be really lightweight. What we think of as good performance, that was the only way so it didn't break. It's a traditional model that's� if you talk to any PHP developer, someone on Rails, it's the model. If you have a server, you're streaming HTML down and JavaScript, they hydrate, but owning what happens when you hit that page. HTML is owned by the frame work that is serverbound. There's a isomorphic. Allencompassing way, that's� an app built for the server should not be the same thing you ship to the browser and some get stuck.

JASON LENGSTORF: Yeah. And what you're talking about there is something that I think we've heard of as, like, islands architecture or partial hydration, which I believe� I might be wrong here, but I believe this was pioneered by Astro. Did you have prior work you were building off of?

FRED SCHOTT: We were standing on the shoulders of giants. Jason Miller has the de facto blog post on it from back in 2019. And I think he even grabbed the term, first coined� I'm going to blank on their name. It was the Etsy frontend developer at the time. Working with her on that post, that was the main source of truth that we referenced. We did not come up with this idea but we built it as a primitive which lets us bring that model of HTMLgenerated or hydrated, but still keeping the JavaScript experience so you're not having to learn a new language. As a developer experience of a more modern framework, but the model of an older one. We've paired these two things together.

JASON LENGSTORF: Katie Miller is who we are referencing. Let me drop her Twitter handle here. Katie is wonderful, if you ever get a chance to hang out with her, you definitely should.
Yeah, so this is� let's talk a little bit about what the partial hydration means. So, in a traditional React app, if I'm going to serversiderender this� let's talk about Next, if you're building with React, you've probably encountered it. I'm building a Next.js app and the way I'm going to build it is I have a page. It is going to read data from an API and spit it back out on screen. I'm going to get static props and those static props, that function is going to make a fetch call, load and data and then return it as props, which I can then access in my components. So, if you were doing this in a plain, old, React app, you would load the page, it would mount and send out that call to get those props. That isn't static. Every time the page loads, you are having to make that request. It can have rate issues, a huge data transfer cost. Let's move that to the server. Now, when you render the site, that fetch call gets made and when it gets returned, we inject it into the HTML as JSON. If you understand how that works, it's great. Right. You have all your data embedded right in the page. If you don't understand how it works, you can do dangerous overfetching. There was actually, like, everybody thought it was funny but it's one of the foot guns of this style. A government website was exposing social security numbers and returned the whole API response and then was using the component to pluck out the name and email or whatever it was that was needed. But it ended up printing in the JSON object, all of this sensitive data and if you're not paying attention with your Get Static Props, you can accidentally send a bunch of data that exposes information. You can send a bunch of stuff that wasn't supposed to be there.
So, that then has to go to the browser, as your JSON object, you've got this rendered HTML. It reads the whole page, finds the components, turns those back into React components, grabs that JSON data, injects it as props. That's a lot of work, which is great when you are building something really dynamic. Because you immediately get back the interactivity. Lots of things are happening. But for a header, for a blog post, like, it doesn't make sense, right? Now you're shipping that data twice because the content of the blog is in the HTML and also you're doing this hydration action and it doesn't have a benefit and the classic argument of MPA and SPA, which is in between page navigation, let's be� okay, y'all use Twitter. You look at blog posts. How do you use that site? You go to that site and you're clicking around? No, you're going to read the article and close it and go back to Twitter. And so, all these benefits of SPAs just kind of cease to exist when it's this contentsourcing model. I would like to read one page of content, please, and then I'm going to go back to whatever it was I was doing and service this thing. There's not a whole lot of benefit in doing this extra work, right?
So, with partial hydration, how would that same blog post work?

FRED SCHOTT: Yeah. And the stakes� I mean, blogs� it's one of those things, if you don't need it, if you can take the performances cost, you're building a dashboard, totally fine. It is time wasted where it is a proven that those users were bouncing off. If you're a business, that's serious. Amazon is one of the fastest sites. They don't use React. The big players can afford to build a team out that can build something for performance and usability of the developer experience. But for a lot of us, the kind of tools we use aren't really designed for that speed. That's where we see partial hydration coming in. No framework has really brought it in to the framework.

JASON LENGSTORF: Is it Marco.dev, they're building in components, but what they're shipping to the browser, they serverside render but don't bother with that hydration step. You just get what was rendered from the component, that's huge. That's a really nice way to function. And so, what I like� what I like about this is if you think about it for use cases where [audio cutting out] what we're sending down in static. Even with something that feels dynamic, like an ecommerce store, the descriptions, a lot of what's happening in there isn't going to change that much. What I need JavaScript for is my "buy now" button. Am I in stock or out of stock? Those are little pieces that are, like, you know, as the name would imply, islands of interactivity as opposed to one, big interactive app. So what Astro and Marco and Eleventy, and Ben Holmes is on your team now, you want that interactivity but you shouldn't have to make the tradeoff of allin or allout. You shouldn't have to ship HTML or SPAs. This was the original intention of React, you would mount a tiny React app into one div, or one component on the page. It was the sprinkle of interactivity, which, obviously, people want all interactivity all the time and you start getting into state management, where you've got a header that's login aware, you go, okay, we're doing a lot of, like, state transfer and hopping between components, maybe it's better to go fullSPAs. Everything is stateful, just go SPA. [Laughter].

FRED SCHOTT: That's where Astro really shines is that you, as a developer, can write your entire site with React. This is an island, this is an interactive component. You get to write the whole site with React and whatever markup you want, it's going to default to static. By default, your site has zero JavaScript. It's a static HTML site. At a componentbycomponent level, you say, give me this shopping cart. You retell Astro what needs to be interacted and it'll create those islands.

JASON LENGSTORF: Nice. Nice. That is very, very cool. So� I feel like we could only discuss this and not ever actually write any code but I really want to see how this works. Before I switch over, though, let's do a quick� Astro hit 1.0 this week. That's huge.

FRED SCHOTT: Today. An hour ago.

JASON LENGSTORF: We've done an episode on Astro before. What are the big, like, banner changes that we've seen in� in Astro, in v1?

FRED SCHOTT: It's a problem with the v1, you play around with it through the whole v0 so it's hard to tie any feature back to a certain time. The big ones, since we announced we were getting ready for the v1, I'd say that MDX support, how you author you content has changed. We decided to go with the standard at the time. MDX is great. It lets you mix those things. We're superhappy with that. Builtin image optimization. Next.js is something that Tony worked hard at. We leveraged in our new home pages we built. As a user of that, I'm really, really thrilled with that.
Going back further is the way we've built our ecosystem, by trying to support every framework, React, Vue, Svelte, we have an Astroadd command to add any of those as an integration. So you're extending Astro. You can create a�.jsx component with React.

JASON LENGSTORF: That's great. I'm not going to lie, that was a stumbling block for you. I had to look it up every time. I was like, wait, this just worked. Oh, no, I have to include this thing. Having those DX improvements�

FRED SCHOTT: We'll set the stakes here, right up front. I think it was a v0.0. I got to be like, hey, it's early. Who knows, we'll fix it later and now the stakes are high. I can't hide behind that anymore, Jason. If you're going to look at some code, I'm standing in front of you now, all bugs.

JASON LENGSTORF: I'm just a founder, standing in front of a livestream chat, asking you to judge my code!
[Laughter]. No, I think this is wonderful. With that, I think I could probably ask more questions, but I want to look at actual code so I'm going to flip us over and put us in pair programming mode. I need to go up a level here. There we go. So, I am� oh, before we start. I have� this episode, like all episodes, is being livecaptioned. We have Vanessa, from White Coat Captioning, that is on the site. You can do so by hitting learnwithjason.dev. We are talking, today, to Fred, who is on...wait, where is it? This one...did I do it right on the first try? I did, haha ha! Go in and give Fred a follow and we are going to be working on Astro.build� nope. There it is. All right. So, here is the Astro website. And, yeah, with that, I'm going to hand it over to you. What's the first thing I should do?

FRED SCHOTT: Oh, god. So, there's a couple things. What we're going to want to do, you're in your terminal. Astro.new, it's a domain. You want to use Astro in the browser. It's a great way to get started, pick a template, powered by StackBlitz. Seeing folks doing a new website shoutout. That's great.
I see the link. The create Astro CLI, if you're going to start a new repo, a new project, that's where to start. Let's run through that. Npm create Astro.

JASON LENGSTORF: Installing. All right. So, we are going to create this at� let's call it "Astro v1."

FRED SCHOTT: I would definitely recommend just the basics. If you're someone who lots to start an empty project, empty project is truly empty.

JASON LENGSTORF: Install dependencies.

FRED SCHOTT: Shoutout to Ben on our team. Did a ton of work on the CLI.

JASON LENGSTORF: Would I like to initialize a new Git repository? I would. Would I like to use TypeScript?

FRED SCHOTT: If you prefer not to use TypeScript, we're still setting up TypeScript. Astro is really interesting. It supports TypeScript inside of its templating language, just by default. If you like JavaScript, TypeScript is a super set so you can never write TypeScript and you'll be superhappy. I'll leave it up to you. If you like TypeScript, Astro's really designed for that.

JASON LENGSTORF: I'm just going to go with the recommended setting and you get to teach me TypeScript as we go now. [Laughter].

FRED SCHOTT: I'm a Microsoft plan here to teach you TypeScript.

JASON LENGSTORF: This is a great way to get people connected to a community. Love that. All right. Now, I can CD into my Astro project, "npm run dev." You know what I'm going to do? I'm going to do one of these, because it [audio cutting out]. Because then� Astro.

FRED SCHOTT: What did I just say about bugs? I'm scared. Is this Netlify?

JASON LENGSTORF: All we're doing is running your commands. It lets me also run if we want to do serverless functions or environment variables, it injects that from the Netlify. It's a nice, little hack for anybody who uses Netlify. Every framework is detected. You can run "Netlify dev," and it'll start.
Here we go.

FRED SCHOTT: This is it.

JASON LENGSTORF: Look at this, this is one of my favorite things, if I hit Ctrl+z, it does this. My code editor, which is going to go� oops, I'll make that a little bit shorter. And then when I come here, I can hit "fg" for "foreground" and it's back. I think Shawn Grove taught me that.

FRED SCHOTT: Whaaattt! I did not know that.

JASON LENGSTORF: I learn something new every day on the show, which is good because it's the title of the show. [Laughter]. Let's go. Let's go. What do we do next?

FRED SCHOTT: All always forget, you're a rightside editor.

JASON LENGSTORF: Chaos, right?

FRED SCHOTT: Total chaos. [Laughter]. If you're coming from Next.js, we take a ton of inspiration from them so you'll see this feeling familiar. Pages is the only magic folder and we use filebased writing. If you fooAstro in there. Index is your home page. �.Astro, what is that? We talk about the fact that we support all of your favorite frameworks but we do ship a really� we try to be as basic as possible� serverrenderfocused. We get to strip away a lot of the complexity of your reactivity and exporting props using the special tag, like, we just get to get rid of a lot of the complexity by building a framework that was designed for the server and that's the�.Astro component syntax. So, you can see it now. It's basically divided into two sections, front matter, which is your script, it's going to run on the server. And your template, which is HTML, which magic sprinkled that feels like JSX. You can copy HTML and it's 100% compliant in that way.

JASON LENGSTORF: There are a few things that happen in here that make me happy. One is, I'm a really big fan of put this CSS right into the component, singlefile components. It just make sense. I think Dan said the best file organization plan is to just put everything in one file until it's unwieldy to do so. I don't think he was trolling. It really resonates with me as a way of organizing code because at first, I want to build something that works. I don't want to think about folder structures and whether or not this is in the right place and is this a utility or a component? I don't know. I don't care. Put it in the thing. We'll clean up later. I think that also helps with the getting away from the idea of premature optimization in code where we're like, I should extract this and you're publishing it with code. [Laughter].

FRED SCHOTT: It's the story of we wanted this to be allinone, is kind of a buzzword. You can use our builtin style, builtin scripting and you optin to whatever complexity you want. Bring in your framework, bring in Tailwind. We'll bring you all the things you need. It does scoping by default. [Away from mic].

JASON LENGSTORF: Oohh, that's huge. I don't have to set up CSS modules. I write my code and it's going to scope for me.

FRED SCHOTT: With H1, you never want to do it globally. We're scoping it just to this component. It's a really cool, little trick that we get to pull off.

JASON LENGSTORF: Excellent. Okay. So, we saw, this is our page and so what we're looking at is, like, here. So if I go in here and I want to� should I just like, like, blow away everything in here?

FRED SCHOTT: Do you have something you want to build in mind?

JASON LENGSTORF: Let's build something that...I don't have any data onhand, that would be writable. So, let's do� let's do�

FRED SCHOTT: Something that uses Markdown.

JASON LENGSTORF: Sure, yeah, we can do that. I have� my blog is written in Markdown. We can grab a couple of posts and throw it in.
[Multiple people speaking at once]. Okay. So, we got a blog. And in here, we want to do some stuff. We've got this layout. Here's our layout and it looks like we� here's the layout component. So, we get props. Props is familiar, I'm used to that. We've got what our actual props are. So, we're getting a title. And then we just get to use that, so this is nice. And so I don't need to do anything magic here�

FRED SCHOTT: [Away from mic] global is what we do. We really like this idea of everything being a single script. In every front matter, it's going to run from top to bottom on the server. Astro props is how you get your props. There are Astro.prop magic things. It's really straightforward. You don't need to worry about a syntax.

JASON LENGSTORF: Nice. Nice, nice, nice. So, I've got� we've got all that. Are these ones global? Yes, because they're wrapped in global. Perfect. Cool.

FRED SCHOTT: [Indiscernible] no more Pok�mon APIs, I beg you. My new API choice is the Owen Wilson "wow." That's all you have to search. I literally snuck this into our home page, it is literally hidden as an Easter egg. [Laughter]. Scroll down, there's audio on the home page. You can see the audio and video it gives you. [Laughter].

JASON LENGSTORF: That's great. I don't think I'm sharing my desktop audio, I don't think it's coming through. I should fix that, y'all. Why am I not doing that?

FRED SCHOTT: Sorry, totally tangent.

JASON LENGSTORF: We can use this. Let's absolutely use this.

FRED SCHOTT: We have fetch built in. This is a fun thing to show off.

JASON LENGSTORF: So, there are a couple things that, if you've never used them before, this is a slot where any layout goes. Layout, layout, and this goes into whatever slot is placed; correct?

FRED SCHOTT: Defining where your content goes, if it's wrapping anything. Pass it through and it should be passed right through.

JASON LENGSTORF: This is a card, we've blown these away. You can see, this is pretty familiar from a� if we close up the style, we can see� this is a component. We've all written these before, they're great.

FRED SCHOTT: This is the HTML with JSXlike syntax. You can see on line 12. This is familiar from anyone coming from JSX or Svelte. It's a front matter, server prop. If you're building a static site, it's all running it built� again, if you load up your network tab, no JavaScripting sent. There might be HMR dev server things. You built this to production, zero by default. You're well on your way there.

JASON LENGSTORF: Yeah, yeah. Okay. This is great. We're not going to use this one, so we can drop this one out. And I'm going to...what do I want to do first? I'm going to� I'm going to start by just...let's build something right at the toplevel. So, I want to get a "wow," so we'll await fetch...and then we can check if "wow," if not okay, we'll error...and then, if it does work...we'll just do� let's see, "const."

FRED SCHOTT: We're going to need your audio to pipe through. It's the essential for a good "wow."

JASON LENGSTORF: Let me see if I can add this very quickly. I'm going to add an audio input capture. We're going to use the...Mac Book Pro, so�

FRED SCHOTT: This is the equivalent of livecoding for streamers, messing with your audio setup during a livestream. [Laughter].

JASON LENGSTORF: All right. So, I got to get rid of this one. This is the wrong one, we don't want that. Mac Book Pro, that's the wrong thing. So we're going to remove� let's see if I can do� "display capture." [Audio cutting out] we're going for Mac Book Pro, and we're going to set this as�

FRED SCHOTT: Wow. So many wows in your chat. [Laughter]. Wow.

JASON LENGSTORF: So I think I'm missing something critical here, which is, I don't have anything look Loopback installed and so unless this works�

FRED SCHOTT: It's quite all right. I think everyone can press the button on the site at the same time.

JASON LENGSTORF: Let me see, maybe I can� yeah, I can't get the audio off the Mac Book capture, for reasons I don't understand so we're going to� we're just going to� I'll figure this out. We'll fix it in a future� future stream.

FRED SCHOTT: We'll recreate it. When you hear it, you just have to say it.

JASON LENGSTORF: Give me your best Owen Wilson.

FRED SCHOTT: Woowwww.

JASON LENGSTORF: Wooowww.

FRED SCHOTT: I like yours. Have you practiced that before?

JASON LENGSTORF: I was listening to Owen Wilson.

FRED SCHOTT: I practiced mine and yours is better. [Laughter].

JASON LENGSTORF: We can get a "wow" that we can use. The way we can start is I'm going to pre� I'm going to follow my instincts here, that I can just dump this.

FRED SCHOTT: Yeah. You tell me when you want to jump in, but this looks perfect.

JASON LENGSTORF: Unexpected token. I screwed something up, which means maybe there is an error?

FRED SCHOTT: Response.JSON, your fetch is returned saying it isn't actually JSON.

JASON LENGSTORF: Uhhuh. Which means I probably need to read the docs.

FRED SCHOTT: You're probably getting the home page HTML.

JASON LENGSTORF: I bet I didn't� yeah, that's what it was. I thought I was doing the�

FRED SCHOTT: That error always messes with me, it's, like, a native error that comes from�

JASON LENGSTORF: How did I not inform you� there we go.

FRED SCHOTT: Now you got too many URLs. There we go.

JASON LENGSTORF: That should work. We'll try that again and come back out here and, there we go. Now, wow, we can get all of these. We've got a poster. Let's do this, we'll just pull the poster up for now, because that's what we can actually use. We're not going to be doing all that. So I'm going to "image, source" and that will be� I'm just going to grab the first one out, actually...

FRED SCHOTT: I think chat is counting the "wows." There's a "wow" counter.

JASON LENGSTORF: Wow. [Laughter]. I think we just synchronized that one. [Laughter]. And the [Indiscernible] will be� I think there should be a description here. Total "wows" in movie. [Laughter].

FRED SCHOTT: Stop that. I didn't know that. That's amazing. Current "wow." [Laughter].

JASON LENGSTORF: If I want to hybrid, do I do it like this? Owen Wilson as, we'll stick "wow.character in wow.movie." Okay. So that should give us� let me close that. That should give us a� cool. All right. So, then you need to do a little bit of styling. We can do a width, 100%, and that kind of solves that problem. I'm going to make it even smaller. Let's call it 250 pixels. Now we can actually see and if we reload the page, we get a different movie every time. Wow. I didn't realize he was in the Haunting.

FRED SCHOTT: He's got a lot of weird, little roles but he always sneaks in "wow" and "you're crazier than a road lizard." Google it. You don't have to do it now, it's a video. Someone has mashed up the fact that, this is in every script�

JASON LENGSTORF: More than one movie?

FRED SCHOTT: Some directors are like, Owen, improv. He just does that phrase. Wow.

JASON LENGSTORF: Wow. [Laughter]. All right. I'm going to pull this up. I'm going to drop this in chat.

FRED SCHOTT: You do not need to play this right now. It's wild that he is that predictable.

JASON LENGSTORF: Okay. So, we've got this. This is what's happening� [Laughter]. What were we doing?
[Laughter]. I rabbitholed so hard here. [Laughter].

FRED SCHOTT: [Away from mic].

JASON LENGSTORF: Wow.

FRED SCHOTT: There's a couple different directions we go here. We could add a frontend framework, React or Svelte. We can optimize the images more.

JASON LENGSTORF: Let's do that, actually, because this is clearly way too big. Let's optimize this a little bit. If I want to optimize an image, what do I do?

FRED SCHOTT: Taking a step back, there are a lot of really cool features of Astro that are stored in integration. Not everyone wants Markdown. MDX. Not everyone using React, Svelte Vue. There is Astro.build/integrations is a catalog of all these things, you can browse, find your favorites. Tailwind, Party Town. Yeah. They're all here. And, Astro Add is your window into that. We could do Astroadd/image.

JASON LENGSTORF: Sorry, which one is it? Official?

FRED SCHOTT: You have to go to Official. We had image there.

JASON LENGSTORF: I do "image."

FRED SCHOTT: I'm 90% show that Astro Add is what you need to do.

JASON LENGSTORF: I'm going to do NPX because I don't have Astro installed globally. Astro will make the following changes to your config file. This is good. This is consent and I appreciate it. I like it when Code Gen helps me.

FRED SCHOTT: It's nice because it's also teaching you. You haven't even opened your config file. We're not changing it without showing you. We're teaching you how that file works, as well. I will say, every project has an Astro command. We try to push people to say "npm Astro Add." If you run without any command after Astro, you'll see the Help output.

JASON LENGSTORF: Yeah, nice, that's a good call. We have a lot of things we can do. Very cool. All right. So, I'm going to then foreground this...okay. So, we've got our setup� oh, we need to restart, anyways, because I changed the config. I'm going to [Away from mic] my dev again and we're off to the races. Okay. So, now I have the component installed, but I haven't actually used it yet. We're still� we're still on the plain, old HTML image tag, which is doing the job but I would have to manually update this to be optimized for my site, which I don't want to do.

FRED SCHOTT: Do import on image components. Squiggly bracket, image, from @Astrojs. I memorized docs, like a weirdo. It's stored from there.

JASON LENGSTORF: Is that the whole thing or do I need more?

FRED SCHOTT: I think that's all you need. Let's check it out.

JASON LENGSTORF: They cannot both be undefined.

FRED SCHOTT: Instead of the CSS width you defined, you're going to want to do it here. That lets us optimize based on that.

JASON LENGSTORF: Aspect ratio must be included. Is there an option for...let me maybe [audio cutting out].

FRED SCHOTT: Check the API response, I wonder if it gives you a width and a height. I wonder if you can calculate it yourself?

JASON LENGSTORF: That's a good point. Let's go back here and actually look at it. Gives me a poster.

FRED SCHOTT: That's not�

JASON LENGSTORF: Poster does not have a width and height. So, let's just grab this one... we'll figure out what width and height is. 1280X1920. 1920 divided by 1280, 1.5?

FRED SCHOTT: Some of them might be more squished than others. It is coming from a remote source, we don't know the right width and height and we're trying to prevent you from creating a layout that's going to shake around and make a bunch of layout shift as it goes. [Laughter]. Quick refresh. I think that's not 1.5.

JASON LENGSTORF: It's not 1.5.

FRED SCHOTT: You can say 250x1.5, that's something I do a bunch. Or that. Aspect ratio, just the 1.5 and it'll calculate it for you.

JASON LENGSTORF: Oh, I got you.

FRED SCHOTT: That might be width to height.

JASON LENGSTORF: Width to height so that's 167?

FRED SCHOTT: There you go. Wow. Wow.

JASON LENGSTORF: Close enough. I'm happy with that.

FRED SCHOTT: Perfect. Again, that's there to protect you from building a bad layout that will shift as the image loads. When it's a local image, you get all that for free, from the file system.

JASON LENGSTORF: Great. Great, great. Um...

FRED SCHOTT: Wow.

JASON LENGSTORF: Wow. Wow. [Laughter]. So, now, we've used the image component� and I'm just going to [Away from mic] what happened here. I always like poking around under the hood. What we get is, instead of our� I'm just going to maybe stop touching things. Ooh, you know what I'm going to do this instead? Because you can't do this with a lot of JavaScript frameworks, is I'm going to view Source. So, here's our image and we've got a class, so we got scope classes, we've got our width and our height, we've got a source, is this using IPX or something?

FRED SCHOTT: Again, what we're doing is optimizing that image for you. So, it's basically proxying through a special dev time. At build, it builds it to a new URL for a static site. We are processing that image on the fly during development for you.

JASON LENGSTORF: And then puts in these hints for lazy loading and async. I want this one to be�

FRED SCHOTT: Wow.

JASON LENGSTORF: [Away from mic], I think.

FRED SCHOTT: Yep. Yeah, this is a good, like, very intentional thing to call out, just about� for anyone who cares about why the features are the way they are. We were trying to build defaults that are performancefirst and you optin to the more eager stuff. I wonder why�

JASON LENGSTORF: Broken.

FRED SCHOTT: Yeah, I don't know.

JASON LENGSTORF: I don't need to hyperoptimize this right now.

FRED SCHOTT: Now it's all broken. You might have been arraylimited.

JASON LENGSTORF: It's 404'ing on all of these.

FRED SCHOTT: My thought is you're getting ratelimited from the Owen Wilson API.

JASON LENGSTORF: It's getting these responses.

FRED SCHOTT: Oh, you're right. It's just the image. What did we do?

JASON LENGSTORF: I don't know.

FRED SCHOTT: Crazy as a road lizard. Probably� this is where I would Command+z my way out of things.

JASON LENGSTORF: I feel like that's a� it's missing.

FRED SCHOTT: That's because you have the dev tools up. I think it's missing a source map there.

JASON LENGSTORF: Maybe I just broke it by� I'm going to get back here. Get back here.

FRED SCHOTT: Yeah.

JASON LENGSTORF: And if I go to here, does it work? Yeah, it seems to be�

FRED SCHOTT: Image component. Interesting.

JASON LENGSTORF: Doesn't like something I've done.

FRED SCHOTT: You know what, I can't hide behind beta bugs, but there's always going to be something.

JASON LENGSTORF: This image endpoint is 404'ing. That was cool when it worked. My image tag isn't working, either, which is concerning. Oh, you know what this is? We� we did get ratelimited because now it's not working�

FRED SCHOTT: Ratelimited on the asset, not the API.

JASON LENGSTORF: I think we might have gotten ratelimited on the asset. Yeah, it doesn't like us on this asset. The Owen Wilson API is sick of our crap. Has nothing to do with Astro. We're using something else. That's fine. We'll just leave that, asis, and we will swap out into a different API.
But what I want to do in the meantime is, I want to do two more things. I want to get a feel for how this MDX stuff works. I'd like to write a little bit of Markdown and maybe what we can do after that� so, here's what I'd like to do. Let's make a little ode to "wow." And the way that I want to do that is I want to write a little blurb that'll sit to the right here and then I also want to do a button that we can build in React, that will let us just trigger as many wows as we want. I think the way we will do that is by using the� the response, here, and we'll just hook the audio up so whenever somebody hits it, it'll just play.

FRED SCHOTT: I love it. Wow. MDX� using Markdown to author your content, you can use a CMS, you can use an API. Markdown is special in that it lives in your file system. You can either create a page with Markdown, put a Markdown file in that directory and it becomes its own page and a layout to wrap that content or import it into an Astro component. Literally, this MDX is actually going to be essentially a component language just like React, that's going to be put on the page.

JASON LENGSTORF: Yeah, let's do this, I'm going to create one of these and then what I would like to do is, let's get a� that's going to be Markdown and then we want to do...a button, here, that is React. So, starting here, I want this to be a component so my instinct is I go in here and can I just make it Markdown? Can I just say, ode.md?

FRED SCHOTT: M D is built in Astro. MDX is integration, optin into the componentmixing.

JASON LENGSTORF: Let's do it with the component. I'm going to suspend, NPM run, Astro Add. Just like that?

FRED SCHOTT: Just like that.

JASON LENGSTORF: I want to import MDX, yes. Going to save the MDX dependency. Great. And then, we will pull that back up. All right. Got to restart it anyways. So, we're going to do one of these...we know that's not broken.

FRED SCHOTT: It looks like the images are coming back, once Cloudflare things you've come back. You were on Owen Wilson timeout.

JASON LENGSTORF: I was on Owen Wilson Timeout.
So, I have, now, in here, the MDX is set up so I want to create ode.mdx. All good?

FRED SCHOTT: All good.

JASON LENGSTORF: Up here, I would be able to add some things I needed in the Markdown but what I'm going to do is return back� let's go with a div[audio cutting out] you know what? I don't need any of that. I can say, there's no greater contribution to the cinematic� the cinematic arts�

FRED SCHOTT: We need a background, just, like, triumphant, your Churchill giving your World War speech.

JASON LENGSTORF: Can I do a Churchill. There's no greater� that's Nixon, what am I doing?
[Laughter].

FRED SCHOTT: I don't know if I would have picked up on it if you haven't said something. An old, white guy ruling the country.

JASON LENGSTORF: Owen Wilson's "wow." We are all blessed to be born in an era where we can experience this [Indiscernible]. Okay. So, we got that. Get some� get some wordwrapping going and then the other piece I want to do� let's actually move that component into here, because then we can try a couple other pieces because what we'll be able to do is� is bring this in and then pass the audio in as a prop so that we can kind of see how it all interacts.
So...if I do this, then I just� what I just�

FRED SCHOTT: This is where MDX is probably the newest part that I'm least familiar with so we might have to pull up the docs for this. I'm not going to have it all memorized the same way. Our� again, you're getting pretty good TypeScript types even though you're not writing any TypeScript here.

JASON LENGSTORF: This just works on the squeal. The character before name. That's my HTML comment. Let me go here.

FRED SCHOTT: Comment. So, it is JSX MDX is JSXbased.

JASON LENGSTORF: We've got this cool thing going on and if I Inspect�

FRED SCHOTT: Give it a little bold on the "wow." The quoted "wow."

JASON LENGSTORF: No greater contribution than Owen Wilson's "wow." And we will just link right to this API.

FRED SCHOTT: Yeah, no, HTML.

JASON LENGSTORF: And look at that! Bada bing, bada boom. I'll do a section, we'll make a display grid. We'll do a grid template columns and we will go with 250 pixels and auto or 1fr, I guess and we'll set a gap of 2. That gets us close enough. So, we've got this, little piece, here. It doesn't like my "wow" button, oh, because I need to wrap this in a div or something. I'm going to do this out here. This will be our...I have an idea. [Laughter]. Fix my� fix my typo. Okay. So, now we've got this kind of layout that we can work with. [Laughter].

FRED SCHOTT: The problem� I can't say "wow," now. I've trapped myself in any response to that. Wow. I'll say a human, nonOwen Wilson "wow." [Laughter].

JASON LENGSTORF: I'm going to do an npm, Astro Add. Sorry, I totally broke you. [Laughter].

FRED SCHOTT: It's all right. I'm back. React, svelte, you mentioned this early on in the intro, every component started as render this and grew up to "build your whole site with it." We're in the React v1 story.

JASON LENGSTORF: So, here is our setup. We are ready to go. We've got this ode.mdx. I'm going to make "wowbutton.tsx."

FRED SCHOTT: So far, so good.

JASON LENGSTORF: Hello? I've never seen this one.

FRED SCHOTT: Yeah, that's odd.

JASON LENGSTORF: Interesting. So, what I'll do is, we're going to export function "wow" button and that's going to return to start� just a button.

FRED SCHOTT: Fred someone in chat mentioned, we support these, what about plain HTML? If you paste HTML and call it�.Astro, that's a valid component. I can't remember if we shipped�.html as a supported thing. It's built in by default by using that�.Astro file extension.

JASON LENGSTORF: Let's see, does anybody know what�

FRED SCHOTT: You know what? Go back over that. You're using TSX and my guess is�

JASON LENGSTORF: Doesn't like my button type? Open.

FRED SCHOTT: Yeah.

JASON LENGSTORF: Button type. Button type. You're going to be a button.

FRED SCHOTT: I've never seen that. Is that an extension you have?

JASON LENGSTORF: I have no idea. Now it doesn't like things. No intrinsic elements exist.

FRED SCHOTT: That is kind of odd. I think you don't have something installed.

JASON LENGSTORF: Let me npminstall@dev, and then we'll foreground and you should be quiet now. You are quiet now. Ahhah! Okay. So, now we've got our "wow" button and if we come into our ode, I should be able to import "wow" button from "wow" button.

FRED SCHOTT: I'm very, very� that is your default means that Astro syntax must be doing something right. But because we're in MDX, it is below the front matter. That is the difference between jumping between the two. You don't need the front matter for a component like this.

JASON LENGSTORF: No front matter for our component. We're going to drop this in. It is serving. We should have a button. Bam! Beautiful! Wow! So, now we've got our "wow" button and I want to bring in a prop, which means what I have to do, like a type of props and that's going to be� we'll do...audio link, audio URL? Yeah.

FRED SCHOTT: Were you just playing around when you said you've never used TypeScript?

JASON LENGSTORF: I've used minimal, minimal TypeScript. I'll do audio URL, and that's going to be�

FRED SCHOTT: Type the object then. Exactly.

JASON LENGSTORF: All right. All right. All right. I kind of know how this works. [Laughter]. So then we've got our piece here and what I want to do is, probably something gross, which is handle click� what we should do, just so everybody's aware, we should use an HTML element, but I'm shoehorning a React in here. We're going to do an event, prevent default...and you are going to require me to do something that� how do you type these? This is�

FRED SCHOTT: You can turn into a�.JSX and all these problems go away. If you don't want to use TypeScript, you don't have to. If you do, it's there for you.

JASON LENGSTORF: Synthetic event? We've got a synthetic event and then I can do� we're going to take our...can I do this from memory? Audio=newaudio and then we want the audio.source to be our audio URL and then we want the audio.play. I think. Does that need to, like�

FRED SCHOTT: Looks good to me.

JASON LENGSTORF: It might need [audio cutting out].

FRED SCHOTT: What's the worst that could happen? People [audio cutting out] but�

JASON LENGSTORF: Really?

FRED SCHOTT: TypeScript infers�

JASON LENGSTORF: You know what? That's a great idea. That makes me happier than trying to do this stuff. This is great. Beautiful. See, this is good. This is good. I think y'all aren't going to be able to hear this. But I'm going to refresh the page...and, it didn't make any noise. Failed to load resource.

FRED SCHOTT: It's the image file.

JASON LENGSTORF: It's not doing anything, which leads me to believe I screwed something up. I might need to wait for this to load. You're right, I didn't need the event in the first place. The audio source is the audio URL. I think I need to add event listener and it's going to be "load," right. And then we can have it play...I think the�

FRED SCHOTT: Chat's figured it out before either of us did. This is Astro trying to help us out. Every component is static HTML.

JASON LENGSTORF: Fred, you're the CEO, do something. [Laughter].

FRED SCHOTT: I'll just check chat, maybe they have an idea. [Laughter]. People screaming, nooooo! It's my literally one job to know this and catch it quickly. [Laughter].

JASON LENGSTORF: So I need to do one of these?

FRED SCHOTT: Astro, by default, zero JavaScript so that means you need to optin when there's JavaScript you need.

JASON LENGSTORF: We didn't actually pass the URL, which is the whole problem. So, what I need to do is set an audio URL, which needs to be our audio URL, which I need to then get in here, which means I do it like this...that.

FRED SCHOTT: Looks good.

JASON LENGSTORF: And then audio URL equals Astro.props as props...is that right? Am I making stuff up?

FRED SCHOTT: Um, I don't know. Let's check the docs. This is, again, much newer. [Laughter]. I don't think it goes in the front matter. MDX doesn't use front matter the way Astro does. I think that there's a different system in MDX. This is kind of the tradeoff we made. We're going to do whatever MDX says.

JASON LENGSTORF: Installation, manual install, config, add MDX pages. We're not doing that. We're doing components. Here?

FRED SCHOTT: Ummmmmm.

JASON LENGSTORF: Exported properties.

FRED SCHOTT: If you search the page for "props," that might be the right thing. No, that's inside of Astro.

JASON LENGSTORF: That's right. And then because we got the� it's in the front matter so let's try it and see what it does.

FRED SCHOTT: But again, you're in MDX, so there is no front matter.

JASON LENGSTORF: Oh, that's right.

FRED SCHOTT: If Ben is watching and can post what it is� oh, it's a global variable.

JASON LENGSTORF: What is this? I guess I need that here. Props.audio.URL?

FRED SCHOTT: Ben is saying it's just a global in MDX. I don't know if TypeScript supports it. Let's keep that out for now.

JASON LENGSTORF: Get out of here.

FRED SCHOTT: Top line, as well. Let's get that out of here. Let's see if that works.

JASON LENGSTORF: URL is not defined.

FRED SCHOTT: Yep. Yep. That's an MDX thing.

JASON LENGSTORF: Props is not defined.

FRED SCHOTT: Hmmmm.

JASON LENGSTORF: Props?

FRED SCHOTT: Try props.audio.url, there on 7. Then get rid of that one. Yeah, there you go.

JASON LENGSTORF: Maybe.

FRED SCHOTT: Maybe not. Let's see...

JASON LENGSTORF: Wow button, props is not defined. You know what? We're going to turn it off and turn it on again. That's how we're going to solve this problem.

FRED SCHOTT: There we go. Nice. Let's see if that� oh, is it trying to hit it?

JASON LENGSTORF: Yeah, it's not responding. Something's missing.

FRED SCHOTT: We can move "wow" button out of MDX. MDX is pretty new and I wonder if this is just an edge case we're hitting.

JASON LENGSTORF: Did you say a hat on a hat?

FRED SCHOTT: I don't think I used that correctly. That's a great expression. Like Owen Wilson saying, "wow" and "crazier than a road lizard." It's a hat on a hat. This should be working. I don't know if this is new code or something we haven't tried before.

JASON LENGSTORF: Let's go up to Components.

FRED SCHOTT: I'm sure there's a bug fix already being worked on. I pulled the rip cord too soon. It was fine, according to chat. Although, no, we were still seeing that weird hanging.

JASON LENGSTORF: Son of a!

FRED SCHOTT: But it shouldn't have been hanging, the hanging issue. There it is.

JASON LENGSTORF: Really? Dang, y'all. This is not my proudest moment. Let's try this a piece at a time here. We also got to figure out why this is hung.

FRED SCHOTT: I think that bug was causing it to hang, which is something to dig into. That's my guess.

JASON LENGSTORF: Now it's unhappy. Failed to load module SSR, doesn't like ode. I'm going back here, because this one needed MDX. And it doesn't like that. But it works when you do it that way. There it is. Okay. So, here's our Ode to Wow. And it doesn't� it's not getting my URL�

FRED SCHOTT: Is audio URL null? It might just be wowed� on the line, on the prop, I think it's undefined. Is it wow.audio?

JASON LENGSTORF: Oh, you're right. You're right. The prop is audio, not audio URL. This should solve this. This will make it work...

FRED SCHOTT: You got to tell us what you're hearing?

JASON LENGSTORF: It's playing, but there's no audio which leads me to believe we didn't hydrate it, but we did. Let's consolelog our way to victory here. I'm going to consolelog the audio�

FRED SCHOTT: See if that load event is loading. That's my bestguess is this actually might be�

JASON LENGSTORF: So we've got three different events, all of which should load something. We got our audio URL, that is correct. I click, it handles that. And then our event never fires. So...

FRED SCHOTT: Try to go back to just play. I don't think you need the event listener. I think that was the JS getting in the way.

JASON LENGSTORF: Yep, that was it. It works.

FRED SCHOTT: How is it? What kind of "wow" is it?

JASON LENGSTORF: Wow. It's a hopeful "wow."

FRED SCHOTT: Much like this codebase, hopeful. So much opportunity. [Laughter].

JASON LENGSTORF: Oh, man. This is great. So, I mean, this is cool, though. We were able to, pretty quickly, mix a whole bunch of stuff. I would say the majority of the shenanigans are me not understanding how coding works. A few things to shoutout that I love, the CLI experience is dope. It's configured properly is Chief's Kiss, wonderfully done. All of frameworks, take notes. The other piece I really like here is [audio cutting about] zero config set up where I don't have to do magic. I also don't want [audio cutting out]. I get how to write React. I understand enough about TypeScript to write props. I understand enough about HTML. It all tracks for me, where I don't feel like I'm superoutside of my comfort zone. And that is� I feel like that's kind of the secret to a framework that is making it feel like it's powerful, it gives me things that I didn't have before but it's familiar enough that I can do the work.
We've got maybe five minutes left here. Do you want to try to do something here or dig into audio questions, anybody? Anybody have questions about how this works? Any Astro� Astro Q&A for Fred or...we can do a lot of things. What do you want to talk about?

FRED SCHOTT: If you want to leave time for Q&A, I mean, that obviously makes sense. The other thing is getting it previewed and deployed. There's probably a good hosting company we can use for this one. Maybe you know one?

JASON LENGSTORF: I suspect. What's my� this is a brandnew, fresh set up so I will "get commit" and say "feature code after episode." And then let's GitHub repo and I want to push an existing, local repository, that's this one here. And we're going to call this one Learn With Jason, Astro v1. And we'll make it public. Do you want to add a remote? We'll call it "origin." And I would like to push my commits, thank you very much. Okay. So now that we've done that, I'm going to Netlify init. We'll call this Astro v1 and my build command autopopulates to Astro and Netlify.TAML, I shouldn't need that. For whatever reason, my Learn With Jason org will not keep its auth, so I'm going to now open this and connect it manually. I can run Netlify Open, that opens up the app dashboard. I can go to my site settings and build and deploy and I'm just going to link it to a repository. I'll go to GitHub and I don't need the Netlify for today.
So, I come back, Learn With Jason, search for Astro. Here's my v1. And all of these things are good, so I'm going to deploy.

FRED SCHOTT: While that runs, we can also check out the Preview command which lets you preview the build. You can run it locally, first, to build it.

JASON LENGSTORF: Npm run?

FRED SCHOTT: This is essentially what's happening, right now, in Netlify. It's doing the build, there's a couple console logs and preview to display it. So, there you go. This is the optimized, minimized JavaScript. This is what you'd see in production.

JASON LENGSTORF: Whoops! I accidentally turned on� did you know that Command+ Shift+ U opens up Voice Command? Any SPAstyle site, you'll see a div or all that generated output, all that generated script, which is harder to read. This is HTML. Everything that was generated by Astro is on line 21 here. Here's our style, some script, how much are we looking at? It's not�

FRED SCHOTT: It's kind of the funny thing of React, of all the frameworks, you're bringing one component, you're paying a 30 kilobyte cost because it's React. All of React, just for that one component, you start to� when you start to use Astro, you see the value of a [Indiscernible] or Svelte, which are smaller by default.

JASON LENGSTORF: Here is our running site, so y'all can check it out.

FRED SCHOTT: I still haven't actually heard� I've only heard you imitate "oh, wow." Oh, you know what, I will call out, because this is generated at build time, the randomness isn't happening at the server. Every time you build, you're going to get a new "wow."

JASON LENGSTORF: That's right. If we want it to be random, we would need to then go in and add the clientside hydration. That's okay. We don't� we don't need it, right.

FRED SCHOTT: Or, the other thing you haven't checked in yet, Astro has a way to optin. We like the simplicity of a static build. If you need it, render differently, that's a few lines.

JASON LENGSTORF: Here's the Astro. We shared those. Here's the docs. Where would somebody go if they want to do the� the, like, dynamic part?

FRED SCHOTT: There's a page on serverside renderings. If you go to Deploy, if you scroll up on the sidebar, you'll see a beautiful Netlify deployment guide there for you to check out. It has instructions on how to get SSR deployed to Netlify, because that's really where the host ends up being the special thing. Astro Netlify is a thing. It will let you basically deploy [Indiscernible] actual function that's going to run in the server.

JASON LENGSTORF: That's great. You install a Netlify adapter, so Astro Add Netlify. That will install all these pieces and� then you can run on the Edge. Oohhh, that is cool! Okay. Yeah, that is really exciting because what the Edge functions do is that means your SSR is going to execute at the CDN edge, so really close to your users and you're going to get access to geolocation and access to cookies. You can get that in serverless functions, but it's really nice to do it in the Edge.
Very, very cool stuff there. I see Nicky in the chat, lots of very cool things we can do with this.
Unfortunately, we're out of time. I'm going to take us back to the page. This has been livecaptioned, it was provided by Vanessa at White Coat Captioning today. It is possible by Netlify, NX. You can follow on Twitch. We have one on Thursday. Make sure you go and check the page out. Fred, any final words for everybody?

FRED SCHOTT: It's been a lot of fun. Thanks for giving this opportunity to show off Astro. I'd say the new website, Astro.build, has been totally redesigned. It's a big launch day for us. We're thrilled to see people playing around with it.

JASON LENGSTORF: I've only got one word for how I feel about this Astro launch and that is, wow. We'll see you next time.