Astro stole my favorite parts of Next (and I'm hyped)
Zusammenfassung
TLDRAstro 5 has been released, bringing significant enhancements like Server Islands and the Astro Content Layer. Server Islands allow websites to blend static and dynamic content seamlessly, improving performance by isolating dynamic caches. The Astro Content Layer introduces a flexible, unified API for accessing diverse content sources, including databases, CMS, and API data. Simplified pre-rendering combines static and dynamic routes intelligently, and new features like responsive image layouts and enhanced SVG support refine the developer experience. Upgrading is straightforward with tools provided, making Astro 5 a powerful platform for building content-driven websites.
Mitbringsel
- 🌌 Astro 5 introduces Server Islands and the Astro Content Layer for content management.
- 🚀 The release simplifies static and dynamic content integration.
- ✨ Server Islands enhance performance by separating static and personalized dynamic content.
- 💡 Astro Content Layer provides seamless access to diverse content sources.
- ⏱️ Significant performance enhancements in build speeds for content-heavy sites.
- 💾 Granular caching options for dynamic content in Server Islands.
- 🌍 Improved responsive image handling and SVG component support.
- 🔄 Simplified pre-rendering for static and dynamic route combination.
- 🔒 Encrypted props and security for better deployment flexibility.
- 🚧 Easy migration tools provided for upgrading to Astro 5.
Zeitleiste
- 00:00:00 - 00:05:00
Introduction to Astro 5 and praise for its features like server islands and content layer, reminding viewers of ecosystem advancements.
- 00:05:00 - 00:10:00
Explanation of the new content layer, its benefits in migrating and reusing old content, and the simplicity it brings compared to Gatsby's GraphQL approach.
- 00:10:00 - 00:15:00
Detailed explanation of Astro's server islands concept, emphasizing its edge over traditional dynamic routing for components.
- 00:15:00 - 00:20:00
Comparison with Next.js's partial pre-rendering and Astro's unique implementation of server islands for better deployment flexibility and user experience.
- 00:20:00 - 00:25:00
Emphasis on Astro's hybrid mode, combining dynamic and static generation, eliminating previous config complexities.
- 00:25:00 - 00:32:30
Updates on Vite 6, optimized image handling, responsive layouts, and SVG component import support, ending with a demo of upgrading to Astro 5.
Mind Map
Video-Fragen und Antworten
What is the major highlight of Astro 5?
The major highlight is the introduction of Server Islands, which allows selective dynamic content loading while keeping most of the site static.
Can Astro 5 handle content from multiple sources?
Yes, through the Astro Content Layer, it integrates content seamlessly from diverse sources like Markdown files, databases, APIs, and more.
How does Astro 5 improve performance?
Astro 5 includes performance optimizations, such as 5x faster builds for markdown-heavy sites and 2x faster MDX builds.
What are Server Islands?
Server Islands allow highly dynamic and personalized content to be rendered separately from static content, optimizing page performance.
Does Astro 5 support advanced image handling?
Yes, the release includes responsive images, cropping capabilities, and an experimental SVG component for improved media handling.
How does Astro 5 simplify pre-rendering?
Astro 5 merges the hybrid and static pre-rendering options into a default static mode that can dynamically adjust for SSR on a per-route basis.
What steps are needed to upgrade an existing Astro project to version 5?
Astro 5 includes simplified upgrade tools, although developers might need to check configurations like .meta.glob handling and make adjustments.
What encryption and security features does Astro 5 have?
Server Islands in Astro 5 automatically encrypt props for secure deployment, supporting automatic compression platforms.
What frameworks and tools does Astro 5 support for dynamic components?
Astro 5 supports a wide range of JavaScript frameworks like React, Vue, and Svelte for building dynamic components within Server Islands.
Why is Astro 5 suitable for content-driven sites?
Astro 5 offers advanced tools for static and dynamic content management, optimized page speeds, and SEO-friendly features, making it ideal for blogs, marketing, and e-commerce sites.
Weitere Video-Zusammenfassungen anzeigen
Mobile UI and UX Design Tutorial - Section 1: Introduction To The Course
Sacred Summer Solstice 🌄 Litha history, spirituality, mythology | Wheel of the Year Wisdom
Creating Real-World Interactive Wind Farm Projects for Stakeholder Engagement | Unreal Fest 2024
"OKULTISME" (Pdt Marietta) #videopembelajaran #kampus #renungankristen
The Syrian Consequence: Israel's Opportunity || Peter Zeihan
Apa itu Cyber Law?
- 00:00:00Astro 5 just dropped and while it's not
- 00:00:01the biggest update they've done it has
- 00:00:03some really awesome important New pieces
- 00:00:06and a few things that I don't think any
- 00:00:07Frameworks really done before obviously
- 00:00:10I'm the nextjs guy you probably know me
- 00:00:12for that but Astro is the only other
- 00:00:14framework I'm currently shipping in
- 00:00:15production I use it for things like my
- 00:00:17blog random docs we use it all over
- 00:00:19create T3 app that doesn't mean Astro is
- 00:00:21a solution that you should use instead
- 00:00:23of next for everything but these are
- 00:00:24both solutions to a lot of problems and
- 00:00:27they both learn from each other and the
- 00:00:28whole ecosystem gets to move forward so
- 00:00:30whether you're an astro Dev a next Dev a
- 00:00:32nu Dev a v Dev or you're still on cre
- 00:00:34react out for some reason there's a lot
- 00:00:36of good stuff to learn here so make sure
- 00:00:38you stick around but first quick
- 00:00:40commercial break today's sponsor is post
- 00:00:41hog and if your product has no users you
- 00:00:43can probably safely skip this section
- 00:00:45but for everyone else you really should
- 00:00:47consider post hog they might be paying
- 00:00:49me for this time but they're not paying
- 00:00:51me for my opinion and my opinion is
- 00:00:52almost everyone should be using post hog
- 00:00:55I've been using them for well over two
- 00:00:56years now way before I ever reached out
- 00:00:58to them to sponsor which by the way they
- 00:01:00didn't hit me up I'm the only person
- 00:01:02I've ever sponsored and they're doing it
- 00:01:03cuz I asked them to because I know you
- 00:01:06guys will like what they built they're
- 00:01:07an all-in-one Suite of product tools
- 00:01:09they have everything you need from
- 00:01:10feature Flags to analytics to session
- 00:01:12replays to surveys to so much more I
- 00:01:15have been surprised how many of these
- 00:01:17tools I've ended up using but if you're
- 00:01:18skeptical of throwing everything into
- 00:01:20one black box don't be it's not a black
- 00:01:22box whole thing's open source so you can
- 00:01:24do whatever you want to do if you want
- 00:01:26to host to yourself in the future you're
- 00:01:28not stuck on their platform but honestly
- 00:01:30ly The more I've learned about them The
- 00:01:31more I've seen their goofy wonderful
- 00:01:33brand and The more I've relied on them
- 00:01:35for my own products yes all of my
- 00:01:37products use poog the easier it is to
- 00:01:39recommend I think you'll be surprised
- 00:01:41and if you're curious yourself you
- 00:01:43should just go give the free tier a shot
- 00:01:44it's hilariously generous over 90% of
- 00:01:47companies don't end up needing to pay at
- 00:01:49all so yeah give them a shot thank you
- 00:01:52to post hog for sponsoring today's video
- 00:01:54check them out at soy. linkpos anyways
- 00:01:57Astro 5 is here and I am very very hyped
- 00:01:59for this release introducing Astro 5.0
- 00:02:02with the Astro content layer to load
- 00:02:04content from any source as well as
- 00:02:05server Islands to combine cached static
- 00:02:08content with Dynamic personalized
- 00:02:09content read on to learn more about
- 00:02:11these powerful new features and more by
- 00:02:13the way disclosure I have been so close
- 00:02:15with the Astro team for so long that I
- 00:02:17am officially an adviser which means I
- 00:02:19do have some Astro stock so there is
- 00:02:22bias here I think of it differently I
- 00:02:25think that I like Astro so much and they
- 00:02:27respect me so much that we have this
- 00:02:29relationship I get stock but obviously
- 00:02:32I'm going to be more biased towards the
- 00:02:34thing I have stock in than one I don't
- 00:02:35read my bias however you choose I like
- 00:02:37Astro enough to use my time to advise
- 00:02:39them anyways first and foremost what is
- 00:02:42Astro hopefully you know by now that
- 00:02:44Astro is the ultimate static framework
- 00:02:46that takes advantage of new tools the
- 00:02:48way I've personally thought of Astro is
- 00:02:50it brings the cool learnings and
- 00:02:52Powerful tools that we've gotten use to
- 00:02:54in like the react World over to the
- 00:02:56static generation of pages world I would
- 00:02:59get frustrated using something like
- 00:03:01react for a Blog but I would get more
- 00:03:03frustrated trying to do it the right way
- 00:03:04with static stuff Astro lets me generate
- 00:03:07HTML using whatever tools I'm used to
- 00:03:09using with a really good Dev experience
- 00:03:12and there's a reason it is quickly one
- 00:03:14in the blogging World a bunch of the
- 00:03:15e-commerce World in these more static
- 00:03:18focused experiences in their words Astro
- 00:03:20is the web framework for building
- 00:03:22content-driven websites including blogs
- 00:03:24marketing and e-commerce if you need a
- 00:03:25website that loads fast with great SEO
- 00:03:27Astro is probably the right choice for
- 00:03:29you this release has some really cool
- 00:03:30highlights including the content layer
- 00:03:32stuff the server Island stuff simplified
- 00:03:34pre-rendering types of environment
- 00:03:35variables v 6 and experimental features
- 00:03:37I am genuinely really excited for a lot
- 00:03:39of these server island is going to be
- 00:03:40the most mind-blowing so please make
- 00:03:42sure you stick around for that part but
- 00:03:44all of this is very exciting in the
- 00:03:45content layer part is something I've
- 00:03:47actually pushed a lot in my advisory
- 00:03:49with them because it's one of the
- 00:03:50coolest things we lost with Gatsby that
- 00:03:52is really important for these new
- 00:03:53Frameworks to be successful looks like
- 00:03:56they also have an upgrade command now
- 00:03:57which is cool I'm going to run this at
- 00:03:59the end of the video on my Astro site to
- 00:04:02see if it works or not so make sure you
- 00:04:05stick to the end for that first we need
- 00:04:07to look at the content layer stuff
- 00:04:09though Astro is the best framework for
- 00:04:10Content driven sites and with Astro 5
- 00:04:12we're making it even better the Astro
- 00:04:14content layer is a new flexible and
- 00:04:16pluggable way to manage content
- 00:04:17providing a unified types saave API to
- 00:04:19Define load and access your content in
- 00:04:21your Astro project no matter where it
- 00:04:23came from the use case for something
- 00:04:25like this is you have an old data source
- 00:04:27or a data source that isn't really built
- 00:04:29for typescript be it's something like an
- 00:04:32old WordPress blog a notion database
- 00:04:34some weird Google Sheets API and you
- 00:04:37want to get that into a new static site
- 00:04:39with better Dev tools Gatsby kind of
- 00:04:41went all in on this but they did it a
- 00:04:43very strange way they did it with
- 00:04:46graphql where you would have a
- 00:04:48typescript function that ran on your
- 00:04:50build or in servers that would fetch
- 00:04:52data from something like WordPress shape
- 00:04:55it as a graphql schema you would then on
- 00:04:58the client side hit hit that graphql
- 00:05:00schema to get the data you wanted
- 00:05:02dealing with all the nullability and
- 00:05:04that exists in graphql to get all
- 00:05:07that data into the react code to then
- 00:05:09generate a static site there were just
- 00:05:11so many back and forth and so many
- 00:05:13conversions from wordpress's API to
- 00:05:16typescript on the server to graphql back
- 00:05:19to typescript on the client but it's
- 00:05:21actually running on the build it's it
- 00:05:22was a mess but the idea of a unified
- 00:05:25layer that lets you access data in a
- 00:05:27typesafe way regardless of the source
- 00:05:29that idea is not kind of good it's
- 00:05:32really good and it's essential if we
- 00:05:33want to move these old WordPress sites
- 00:05:36into the modern era without losing all
- 00:05:38of our old content and now it is just
- 00:05:40part of Astro the content layer is huge
- 00:05:43and I'm really excited that it finally
- 00:05:45shipped Gatsby's already literally dead
- 00:05:47but this is this is the thing that
- 00:05:49brings the best parts of it and if you
- 00:05:51look at the code you'll hopefully
- 00:05:52understand why we have this package the
- 00:05:54notion astrol loader loader Globs with
- 00:05:58the pattern for all markdown files and
- 00:05:59it has this base Source data blog we
- 00:06:01also have the database which is a
- 00:06:03collection using the notion loader then
- 00:06:06we have countries which is another
- 00:06:07collection that is loaded through api.
- 00:06:10example.com countries and then we Jon it
- 00:06:13so now we have these three collections
- 00:06:14that exist within our asro app that we
- 00:06:16can access however we need to as we
- 00:06:19build our app huge so cool that if we
- 00:06:22like had our marketing site and we
- 00:06:24wanted to Port our old WordPress blog to
- 00:06:25it you just add the WordPress astrol
- 00:06:27loader add const Legacy blog equals to
- 00:06:30find collection and now you have access
- 00:06:31to that in your pages previously the way
- 00:06:34it worked was just dumping a bunch of
- 00:06:35stuff into markdown files in your repo
- 00:06:37so if you wanted a CMS to have some
- 00:06:39static sections of your site powered by
- 00:06:41a rest API or to have optimized images
- 00:06:44coming from an asset management system
- 00:06:45it would get messy quick and the loaders
- 00:06:48solves that problem you can use the
- 00:06:49built-in loaders to load content from
- 00:06:51anywhere on disk Define your own loaders
- 00:06:53that fetch content from any API in just
- 00:06:55a few lines of code and you can use any
- 00:06:56of the existing Community built loaders
- 00:06:59like store block Cloud ner High graph
- 00:07:02let's see if the important one is here
- 00:07:04tool for migrating WordPress to Astro
- 00:07:06look at that you got the pocket base
- 00:07:08loader sheet loader this is for Google
- 00:07:10Sheets good luck getting an API key from
- 00:07:13them but again this makes a ton of sense
- 00:07:16it's Pro I cannot imagine another tool
- 00:07:18where it would be easier to turn
- 00:07:20something like a Google sheet or an old
- 00:07:23WordPress site into a new static HTML
- 00:07:25experience without compromising on your
- 00:07:26Dev
- 00:07:28experience see so you see here we have
- 00:07:30the loaders for all our static stuff our
- 00:07:32markdown our Json whatever else CMS goes
- 00:07:34through a loader API goes through a
- 00:07:35loader you know have the one unified
- 00:07:37store you can access everything from
- 00:07:38this is huge they also made some huge
- 00:07:41performance improvements here the
- 00:07:42biggest argument against Astro in
- 00:07:44comparison to other static generation
- 00:07:46tools is that since it does everything
- 00:07:48in JS it's not as fast as some of those
- 00:07:50Alternatives but it's getting really
- 00:07:51fast now 5x faster builds for markdown
- 00:07:53pages on content heavy sites and up to
- 00:07:55two times faster for MDX nice not that
- 00:07:57the builds were slow but when you had a
- 00:07:59huge site they weren't as fast as I
- 00:08:01would have liked it's
- 00:08:03fixed but here is the biggest part I've
- 00:08:06talked about it a bit before but I'm not
- 00:08:08going to miss the opportunity to go in
- 00:08:10depth because server islands is so cool
- 00:08:13server islands are an evolution of the
- 00:08:14islands architecture concept that Astro
- 00:08:16helped bring to the mainstream I'll do a
- 00:08:19real quick overview of islands if you
- 00:08:21have a website with like a header and an
- 00:08:24image Carousel which are both
- 00:08:25interactive but everything else is
- 00:08:27static and you're using react your react
- 00:08:30bundle now has to come in and load all
- 00:08:33of these pieces in JavaScript in order
- 00:08:35for this to work islands are the idea
- 00:08:37that everything is static and doesn't
- 00:08:39require JavaScript unless it's an
- 00:08:40interactive piece and then each of those
- 00:08:42interactive pieces live on their own
- 00:08:44Island where they don't directly
- 00:08:46interface with other things maybe
- 00:08:47there's a greater store that they're all
- 00:08:48hitting in like Global or whatever but
- 00:08:50the idea is that these pieces can be
- 00:08:53isolated islands that don't need the
- 00:08:56whole site to be one JavaScript
- 00:08:58framework to work and these islands
- 00:09:00don't have to be in Astro in fact they
- 00:09:02can't be because Astro doesn't do client
- 00:09:04anything you bring in the JS framework
- 00:09:06of your choice and they support pretty
- 00:09:09much all of them it supports everything
- 00:09:11from react to view to spelt to even
- 00:09:14angular last I saw I know solid works
- 00:09:16really well in fact solid start used to
- 00:09:17be based on Astro it's really powerful
- 00:09:21for a thing that's mostly static with a
- 00:09:23few Dynamic Parts you know like a blog
- 00:09:26or an e-commerce site the new nextjs
- 00:09:28patterns in a a lot of the winds that
- 00:09:31exist here but nowhere near the same
- 00:09:33power of the the mindset and it also is
- 00:09:37a bit more complex because of the way
- 00:09:38everything interweaves in server
- 00:09:39components where here it's very almost
- 00:09:42like boringly linear top to bottom where
- 00:09:45from this element down it is now a
- 00:09:46dynamic component everything above it is
- 00:09:48just part of the Astro world but what's
- 00:09:50cool is when you mount a react component
- 00:09:52for your header or for your image
- 00:09:53Carousel you can tell Astro run this on
- 00:09:56the server and just put it in a static
- 00:09:58HTML or run it the server but also send
- 00:10:00the JS to the client or don't run it on
- 00:10:02the server only run it on the client you
- 00:10:04get a lot of flexibility in how Astro
- 00:10:07treats the island but you do have to
- 00:10:10architect with these islands which
- 00:10:11prevents things like multiple components
- 00:10:13in the same tree that are being shared
- 00:10:16between things you just have to do that
- 00:10:17all in the react or other framework
- 00:10:19layer yourself Astro doesn't give you
- 00:10:20that composability it lets you do it
- 00:10:22yourself however you want benefits and
- 00:10:24negatives soone in chat just asked could
- 00:10:27you use Astro to make a site that uses
- 00:10:28every major your framework you could
- 00:10:30good luck and also as I was saying like
- 00:10:33if you want to compose these you can't
- 00:10:36like put an angular component inside of
- 00:10:38a react component using Astro once you
- 00:10:40mount the react component from there
- 00:10:42down it's all just react so you have to
- 00:10:44be considerate of that when you do it
- 00:10:45but you can pass it props from Astro to
- 00:10:47react so balances benefits negatives
- 00:10:51it's a cool thing when you need it but
- 00:10:53it also lets you rethink things that are
- 00:10:55mostly static a harsh reality was that a
- 00:10:57lot of people were using react because
- 00:10:59they this image Carousel even though the
- 00:11:00rest of the site didn't need it they
- 00:11:02would have the whole thing in react now
- 00:11:04Island helps prevent those things if a
- 00:11:06site should be static but one part
- 00:11:08shouldn't be this is the best
- 00:11:09architecture to solve that problem but
- 00:11:11we're not here to talk about islands in
- 00:11:13the traditional client side sense that
- 00:11:15we just went through that was almost
- 00:11:17almost misleading to be so focused on
- 00:11:19that because what we're here to talk
- 00:11:20about today is server Islands which is a
- 00:11:23very different way of thinking about
- 00:11:25stuff I'm going to start this section by
- 00:11:28talking about next because nextjs
- 00:11:30introduced a feature called partial
- 00:11:31pre-rendering that is very similar in
- 00:11:34its goals if I have a website that is
- 00:11:36mostly static let's say it's a
- 00:11:39e-commerce site most of the things on
- 00:11:41that page are going to be the same for
- 00:11:42everyone but some will be different the
- 00:11:44carts going to be different the
- 00:11:47recommendations are going to be
- 00:11:48different the shipping information is
- 00:11:50going to be different so why do I have
- 00:11:52to wait for the server to generate the
- 00:11:54whole page if a lot of the page is
- 00:11:56static partial pre-rendering is a
- 00:11:59feature feature in next where you can
- 00:12:00generate and cache the part that's the
- 00:12:02same for everyone and then stream that
- 00:12:05down immediately when the user goes to
- 00:12:06the page and then have the rest fast
- 00:12:08follow up after when it's ready so it's
- 00:12:11all part of one stream one request the
- 00:12:13user makes the static part comes through
- 00:12:15really fast and the rest gets streamed
- 00:12:17in when it's ready the benefit here is
- 00:12:19that it's all one request and you don't
- 00:12:21have to worry about the static Parts
- 00:12:24being blocked by the dynamic parts and
- 00:12:25that's the goal here to not block the
- 00:12:28static part on the part that is unique
- 00:12:30to a given user so this is cool but it
- 00:12:33requires some crazy in for hacks because
- 00:12:35you need to set your server up so that
- 00:12:38it can intercept the request send down
- 00:12:40the static part and while holding that
- 00:12:42same connection slowly stream in the
- 00:12:45rest of the stuff when it's ready that
- 00:12:46is an infer feature as much as it is a
- 00:12:48framework feature and getting PPR
- 00:12:50working on things that aren't versell or
- 00:12:52netlify is not a fun experience Astro
- 00:12:55saw the benefits of PPR but they didn't
- 00:12:57want to force you to have this complex
- 00:13:00architecture where the server responds
- 00:13:02with two different sources one is the
- 00:13:04static part and one's the dynamic part
- 00:13:06all as part of one complex streamed
- 00:13:08request server islands are almost an
- 00:13:11inversion of this way of solving the
- 00:13:13problem with the goal of solving the
- 00:13:14same problem instead of having a server
- 00:13:17that sends down the CDN part and then
- 00:13:19follows up with the stream part now the
- 00:13:22CDN gives you the static part completes
- 00:13:25the request it loads a little bit of JS
- 00:13:27that little bit of JS re requests to
- 00:13:29your Astro server hey I need a little
- 00:13:31bit more information can I have it
- 00:13:33please and then it sends the rest down
- 00:13:34to get swapped into those individual
- 00:13:37Parts the benefit here is you can deploy
- 00:13:39this the way that we've always deployed
- 00:13:41static stuff by throwing it on S3 and
- 00:13:43maybe giving it a CDN with cloudfront or
- 00:13:45cloudflare without having to do the
- 00:13:47complexity of the request mangling and
- 00:13:50we still get pretty close to the same
- 00:13:52performance we saw with next partial PR
- 00:13:53rendering if not better in many cases
- 00:13:55it's a really cool solution that allows
- 00:13:57you to get that benefit without going
- 00:13:59all in on very tailor made specific
- 00:14:02infrastructure now you can throw the
- 00:14:04Astro part on any node server in the
- 00:14:07static Parts on any CDN and it just
- 00:14:10works that's awesome having a framework
- 00:14:13primitive that lets you say okay
- 00:14:15everything above here is a static site
- 00:14:17that goes into CDN and when you want to
- 00:14:19load these parts these have to come from
- 00:14:21a server I like their framing here for
- 00:14:22Server Islands on any given page you
- 00:14:24might have content that is completely
- 00:14:26static and never changes some content
- 00:14:28that's dynamic backed by a database that
- 00:14:30changes infrequently but more often than
- 00:14:32you do deployments as well as some
- 00:14:33personalized content which is tailored
- 00:14:35to individual users all three of these
- 00:14:37have entirely different Optimal
- 00:14:39Solutions the static Parts should be on
- 00:14:41a CDN the dynamic Parts should be on a
- 00:14:43CDN with an invalidation or a static
- 00:14:46revalidation pattern and the
- 00:14:48personalized content should be fully
- 00:14:49Dynamic on request the issue before is
- 00:14:52that as you went down this chain you
- 00:14:55would usually give up the benefits of
- 00:14:56being higher up the reality it is we
- 00:15:00want our things to be as close to the
- 00:15:01top as possible we want our stuff to be
- 00:15:03static because the higher up here you
- 00:15:05are the faster things are if you're
- 00:15:06completely static it's super fast if
- 00:15:08you're mostly static but revalidate it's
- 00:15:11pretty fast but has more compute and
- 00:15:13sometimes things are stale and if it's
- 00:15:15fully Dynamic you have to wait for the
- 00:15:16server to generate on every single
- 00:15:18request sadly if you have just one
- 00:15:21personalized part like the cart in your
- 00:15:24e-commerce site with pretty much every
- 00:15:26architecture that's existed in the
- 00:15:27history of the web you have now forced
- 00:15:29your entire site to be dynamic so even
- 00:15:32if the rest of the content is static
- 00:15:35just one Dynamic piece means the whole
- 00:15:37page now has to be loaded in a dynamic
- 00:15:39way which means every request the user
- 00:15:41makes going forward is now significantly
- 00:15:43slower but what if the static Parts
- 00:15:45could stay static and we bring in these
- 00:15:47different Dynamic patterns for the
- 00:15:48elements it make sense for not the
- 00:15:50routes or the pages it make sense for
- 00:15:53dynamic shouldn't be a route level
- 00:15:54concern it should be a component level
- 00:15:56concern and that's what's really cool
- 00:15:58here
- 00:15:59as they say previously you had to choose
- 00:16:01one caching strategy for all of your
- 00:16:03content types and if the page is a
- 00:16:05logged in experience that usually would
- 00:16:07mean no caching at all now with server
- 00:16:09Islands you get the best of both worlds
- 00:16:11the things that are the same for
- 00:16:12everyone can be fully static the things
- 00:16:14that are unique for everyone can be
- 00:16:16fully unique and dynamic the goal here
- 00:16:18and you're going to see this pattern
- 00:16:19more and more as new Frameworks are
- 00:16:22adjusting to these patterns and the cool
- 00:16:23stuff that's going on in the react next
- 00:16:25World our goal is to make as much of our
- 00:16:28site as static as possible because CDN
- 00:16:31will always be faster than running a
- 00:16:33server and it's really cool to see
- 00:16:34Frameworks like Astro acknowledging that
- 00:16:37there are things that have to be dynamic
- 00:16:38and instead of pretending it's not a
- 00:16:40problem or forcing you to do it on the
- 00:16:42client side we can just load those parts
- 00:16:44in when they're ready server islands are
- 00:16:46used for your most dynamic content
- 00:16:47personalized content like a user Avatar
- 00:16:49their shopping cart and product reviews
- 00:16:52while these components are deferred
- 00:16:53you're free to more aggressively cach
- 00:16:55the page itself that means that if a
- 00:16:56user's logged in or not they will still
- 00:16:58see most of the critical parts of the
- 00:17:00page instantly as they are cached on
- 00:17:02edge cdns you can also set custom
- 00:17:03fallback content to show briefly before
- 00:17:05the dynamic islands are loaded think of
- 00:17:07this like the fall back with a suspense
- 00:17:08and react each island is loaded
- 00:17:11independently to optimize the visitor
- 00:17:12experience this means a slower Island
- 00:17:15like one connected to a legacy backend
- 00:17:16won't delay the rest of the personalized
- 00:17:18content from being seen and interacted
- 00:17:20with also a big thing the biggest
- 00:17:22problem with the all Dynamic thing is if
- 00:17:24you have one element that takes half a
- 00:17:27second one that takes a third of a
- 00:17:28second but one that takes 3 seconds the
- 00:17:30whole page takes those 3 seconds if you
- 00:17:33use any sites that are really slow like
- 00:17:35uh angelist it's one I use a lot that's
- 00:17:38disgustingly slow the reason is it's
- 00:17:40generating all of the things it has to
- 00:17:43for the page it doesn't show you
- 00:17:44something when the fast parts are done
- 00:17:46it shows you nothing until all of them
- 00:17:47are done it's kind of like the chain is
- 00:17:49or a chain is as strong as it weakest
- 00:17:51link a page is as slow as it slowest
- 00:17:53element now things come in when they're
- 00:17:55ready instead of when everything else is
- 00:17:57done but that also means you have to be
- 00:17:59careful because you might end up in
- 00:18:00loading spinner hell if you don't plan
- 00:18:01accordingly around this they've been
- 00:18:03shipping server islands for a bit and
- 00:18:04they got really useful feedback that
- 00:18:06they've applied such as the ability to
- 00:18:07set headers inside of an island which
- 00:18:09allows you to customize the cash
- 00:18:10lifetime of an individual Island that's
- 00:18:13actually really cool to say like the
- 00:18:15reviews on an e-commerce site that only
- 00:18:18needs to be revalidated every day but
- 00:18:20maybe you want the cart to be never
- 00:18:22cashed ever you want that to be like
- 00:18:24invalidated whenever you request it
- 00:18:26being able to do that on an individual
- 00:18:28Island level is really really powerful
- 00:18:30I've seen a little bit of this through
- 00:18:32believe it or not netlify they have a
- 00:18:34cool header called netlify VAR that lets
- 00:18:37you split the places that you're getting
- 00:18:39cash data from based on conditions in
- 00:18:42things like your cookies the request the
- 00:18:44time of day those types of things where
- 00:18:46you're basically telling the page which
- 00:18:50CDN to get stuff from and which static
- 00:18:53asset to pull based on something more
- 00:18:55Dynamic and what Aster's enabled here
- 00:18:58with is level headers is a more granular
- 00:19:01version of that and I'd be surprised if
- 00:19:03like on netlify they weren't using a lot
- 00:19:04of those custom netlify headers to make
- 00:19:06this possible in fact I would bet that a
- 00:19:08combination of things like the net very
- 00:19:10headers and Astro could make something
- 00:19:12like stupid
- 00:19:14performant oh you can also use server
- 00:19:16Islands on platforms that do automatic
- 00:19:17page compression that's cool I'm not
- 00:19:19surprised this broke things in the past
- 00:19:20but I'm hyped that they found a fix for
- 00:19:22it because that is the thought of your
- 00:19:24CDN or your web host doing gzip and
- 00:19:27broley stuff for you automatically
- 00:19:29causing this the diffs to not fit right
- 00:19:31that doesn't surprise me but I'm happy
- 00:19:33they found a solution to it they also
- 00:19:34automatically encrypt server Island
- 00:19:36props using a key generated by the
- 00:19:37server oh that's good next had this
- 00:19:39problem with server actions I'm happy
- 00:19:41they found a solution to Astro as well
- 00:19:42but again it's like they're taking and
- 00:19:44this is what I like about tools like
- 00:19:46Astro there's a lot of tools that exist
- 00:19:48in spite of the existing Alternatives
- 00:19:51like I'm going to get in trouble for
- 00:19:53talking about it but ladybird doesn't
- 00:19:54exist because they see things that are
- 00:19:56cool in the existing browsers and they
- 00:19:57want to do cool stuff on top or they
- 00:20:00have a specific thing they want to fix
- 00:20:02it exists because they don't like the
- 00:20:04companies making the other browsers and
- 00:20:06they just want to do it from scratch
- 00:20:07Astro wants to make the web better and
- 00:20:09make building for the web better so when
- 00:20:11other tools come from other companies
- 00:20:14like nextjs they don't look at it and
- 00:20:17say well no one ever will want that
- 00:20:19we're going to keep doing our thing they
- 00:20:21look and say oh there are really useful
- 00:20:23parts and within those parts there are
- 00:20:26really useful solutions to problems they
- 00:20:28encounter and they're taking those
- 00:20:30lessons and those learnings and those
- 00:20:32value ads and bringing them to devs that
- 00:20:34aren't using next for any of many
- 00:20:36totally valid reasons it's awesome to
- 00:20:38see tools that aren't the most popular
- 00:20:41tool not pretend that the popular tool
- 00:20:43is always bad but actually learn the
- 00:20:45lessons that they're learning and
- 00:20:47applying them to their own context it's
- 00:20:48really cool to see it's one of my
- 00:20:49favorite things about Astro and the
- 00:20:51Astro team one of my good friends on the
- 00:20:53Astro team Maple who's hanging out in
- 00:20:54chat right now was a remix guy like
- 00:20:56they're real deep in the remix community
- 00:20:59so they brought a lot of those lessons
- 00:21:00to Astro as many of the others on the
- 00:21:02team have with Astro 5 we are rethinking
- 00:21:04what it means for a site to be static
- 00:21:06server Islands provide a foundational
- 00:21:08primitive for how you build static
- 00:21:10projects in Astro in the future with
- 00:21:12Dynamic bits only when you need them to
- 00:21:14learn more about server Islands you can
- 00:21:15check out the server Island guide I also
- 00:21:17did a more in-depth video on them
- 00:21:18hopefully you've gotten what you need to
- 00:21:19here links in the description if you
- 00:21:21want to check out this guide though
- 00:21:22really cool stuff and remember we're
- 00:21:25going to update my site to Astro 5 at
- 00:21:26the end so stick to then if you want to
- 00:21:28see how hardest upgrade they also
- 00:21:30simplified pre-rendering since Astro's
- 00:21:321.0 release Astro supported multiple
- 00:21:34output modes for websites static when
- 00:21:36you want to just generate HTML files as
- 00:21:38well as server when you want the pages
- 00:21:39to be dynamic and run at runtime instead
- 00:21:42funny enough previously you had to opt
- 00:21:45your whole app into static where it
- 00:21:47would generate HTML or dynamic but I
- 00:21:49would often have routes I wanted to be
- 00:21:50static and routes I wanted to be dynamic
- 00:21:52so I I complained a lot and they fixed
- 00:21:54it really fast but like yeah fun weird
- 00:21:57chaotic time I was real frustrated and
- 00:21:59this happens a lot where there are two
- 00:22:01cool things a tool does and I can't do
- 00:22:03both at the same time it annoys me to no
- 00:22:05end and they took that problem seriously
- 00:22:07and they've went out of their way to
- 00:22:08address it since after many requests in
- 00:22:10Aster 2 they made it more granular by
- 00:22:12creating a third output mode hybrid
- 00:22:14which lets you have some things be
- 00:22:15static and dynamic which is again from
- 00:22:17me complaining so much and I'm sure
- 00:22:19others too it was the obvious thing they
- 00:22:21need to do but I was I was loud about
- 00:22:22that I even had an interview with Fred
- 00:22:24from Astro where I just roasted him for
- 00:22:26this and he realized oh yeah you're
- 00:22:27right we should fix that as Astro grew
- 00:22:29and gained more powerful features like
- 00:22:30actions on server Islands which cannot
- 00:22:32be used in a purely static output mode
- 00:22:34we realized that the Matrix of what
- 00:22:36settings do I need to use this feature
- 00:22:38became large and tiresome to explain and
- 00:22:40document we also found that people ended
- 00:22:42up server rendering more than they
- 00:22:43needed to because it was easier than to
- 00:22:45use the fine grain controls which
- 00:22:46resulted in their sites being slower
- 00:22:48than they had to be with Astra 5 we're
- 00:22:50happy to say we've simplified all of
- 00:22:51this the hybrid and static options have
- 00:22:52been merged into the default static
- 00:22:54option
- 00:22:56yes yes this is always what I wanted
- 00:22:59thank you it's funny I would argue this
- 00:23:01is them beating nextjs to the punch with
- 00:23:04Dynamic IO where the the goal is to have
- 00:23:07the static Parts always be static and
- 00:23:09things you do in your code tell the
- 00:23:12framework when to start being Dynamic so
- 00:23:15assume static until you hit some
- 00:23:17boundary that says hey this part is
- 00:23:18dynamic then do that Dynamic leave
- 00:23:20everything else a static we are there
- 00:23:22and Astra now huge this allows you to
- 00:23:24render individual routes at runtime on
- 00:23:26the server just by adding an adapter no
- 00:23:28more configuration is needed fear not if
- 00:23:31you still want good old statically
- 00:23:32generated HTML you still get them Astro
- 00:23:34is still static by default but if you
- 00:23:36set pre-render false on a given page AST
- 00:23:38now dynamically switches its output mode
- 00:23:40which allows you to use features that
- 00:23:42require SSR without figuring out which
- 00:23:44config mode that you need awesome and if
- 00:23:47you combine that with server Islands you
- 00:23:48can just make everything static and have
- 00:23:51certain parts that are treated Dynamic
- 00:23:53huge awesome A++ interesting Astro and V
- 00:23:57more T3 inspired stuff if you're not
- 00:23:59familiar there's a package that Julius
- 00:24:02made for T3 in create T3 app that's now
- 00:24:05gone way further T3 environment which
- 00:24:08lets you use Zod to validate your
- 00:24:10environment variables so you can access
- 00:24:12them in a typ safe and runtime safe way
- 00:24:15and it gives you errors during build if
- 00:24:17you're missing environment variables
- 00:24:18which makes setting things up and
- 00:24:19accessing them from different code bases
- 00:24:21in different developers way easier it
- 00:24:24seems like they've built this into Astro
- 00:24:26which is awesome I don't think T3 andv
- 00:24:29should have to exist but no Frameworks
- 00:24:31take these problems seriously so it does
- 00:24:34and I've seen this package used way
- 00:24:36outside of the react next ecosystem I've
- 00:24:38seen it in a bunch of solid code bases
- 00:24:40so it's cool to see Astro taking this
- 00:24:42opportunity to make Astro better in a
- 00:24:45lot of ways you could say Astro is
- 00:24:47copying stuff we did in T3 like from the
- 00:24:49CLI to the plug-in architecture to the
- 00:24:52environment stuff I love that I
- 00:24:55genuinely really really like that they
- 00:24:57see the DX winds that Exist Elsewhere
- 00:25:00and they bring them into the framework
- 00:25:01itself so you don't have to know about
- 00:25:03all these things to have a good
- 00:25:04experience I love this I would never
- 00:25:07accuse them of copying or stealing I see
- 00:25:10this as good ideas being proliferated oh
- 00:25:13that's actually really nice you can
- 00:25:14specify if a variable should be client
- 00:25:15or server we have that too with T3 andv
- 00:25:18but at a framework level that's a really
- 00:25:20nice thing to have you can also
- 00:25:21designate certain variables as Secrets
- 00:25:23like API keys that you would never want
- 00:25:25to have exposed ever so you be real
- 00:25:27strict with like a thing that says that
- 00:25:29as well as specifying if a variable is
- 00:25:31required or just optional which lets you
- 00:25:33catch mistakes before the server is
- 00:25:34booted as well as defining a type of a
- 00:25:37variable like it has to be a string a
- 00:25:38number a URL a URL that matches a
- 00:25:40certain pattern all those types of
- 00:25:42things huge and now you can just import
- 00:25:45strap bbii key from Astro EnV server
- 00:25:48huge A++ I want to see every framework
- 00:25:50copying this Astro 5 is one of the first
- 00:25:53Frameworks to ship with v 6 awesome if
- 00:25:55you already seen my V6 video probably
- 00:25:57worth checking out because the changes
- 00:25:58are very relevant here they've been
- 00:26:00working on the beta versions of V for a
- 00:26:02while so it's not like they just rushed
- 00:26:04to this they've been playing with the
- 00:26:05new v 6 and environment API stuff for a
- 00:26:07bit now it's just ready to go the
- 00:26:09highlight of V6 is the environment API
- 00:26:11which as I said talk about a bunch in
- 00:26:13the video tldr so makes it easier to
- 00:26:14determine how the code runs at different
- 00:26:16places different environments be it Edge
- 00:26:18node pre-render with build client side
- 00:26:21all the above much more flexibility
- 00:26:23there they're excited because they think
- 00:26:25they can get better compatibility with
- 00:26:26things like Cloud flare and other Edge
- 00:26:27run times as well as running those
- 00:26:29locally awesome I'm into it o responsive
- 00:26:32images and SVG let's see what they have
- 00:26:34here for us image cropping support that
- 00:26:37is interesting I haven't seen any
- 00:26:39framework do this where when you set a
- 00:26:42fit with a width and height it crops out
- 00:26:45the things that don't fit so you don't
- 00:26:46have to send the whole image just to
- 00:26:48render a bit of it so let's say this
- 00:26:49image was a th000 by a th000 and we told
- 00:26:51it to do 200 x 200 it's just going to
- 00:26:53render part of the image but we still
- 00:26:55have to send the whole image Now using
- 00:26:57the sharp plugin on the server they will
- 00:26:59regenerate the image so it only uses the
- 00:27:02parts that are being shown in the UI
- 00:27:04that's awesome that goes way further
- 00:27:06than the next image component does to be
- 00:27:08fair I find the use case of
- 00:27:10intentionally cropping a large asset via
- 00:27:13the way you style it on the client to be
- 00:27:15relatively rare but this is really cool
- 00:27:19next image does not do that no next
- 00:27:20image just optimizes the image based on
- 00:27:23the dimensions in the platform it will
- 00:27:25resize the image but it won't crop the
- 00:27:27crop is the difference here they also
- 00:27:30added a responsive layout getting
- 00:27:31responsive images using these optimized
- 00:27:33image components is obnoxious when they
- 00:27:35resize themselves based on the space you
- 00:27:37never really know how big it's going to
- 00:27:38end up being so you don't know what
- 00:27:39sizes to render it at apparently they
- 00:27:41have the ability to predefine responsive
- 00:27:43image layouts they'll automatically
- 00:27:45generate the proper Source set and sizes
- 00:27:46values to make your images look good and
- 00:27:48perform well on all devices so if you
- 00:27:50say layout responsive when it sees which
- 00:27:53devices this can render on it will do
- 00:27:54scaled versions of the image based on
- 00:27:56that awesome
- 00:27:58experimental SVG component did you ever
- 00:28:01wish it was easier to use svgs in
- 00:28:03Astro I've been to Hell in back I've
- 00:28:07been so far to Hellen back for this yeah
- 00:28:10I'm happy that this made it in funny
- 00:28:12enough SVG support was one of like the
- 00:28:14earliest cool things in create react app
- 00:28:16as well as in webpack and because
- 00:28:18webpack didn't have a core feature for
- 00:28:20it we all did it in our own weird
- 00:28:22increasingly hacky ways I'm happy we've
- 00:28:24learned from our mistakes and now we
- 00:28:26have it in Astro V5 cuz if they had done
- 00:28:28this even in one or two they might have
- 00:28:30done it wrong CU we were all doing it
- 00:28:32wrong at the time looks like you can
- 00:28:34just import an SVG and use it like a
- 00:28:36component and it just works now awesome
- 00:28:38A+
- 00:28:41overdue obviously there's bug fixes in
- 00:28:43more but what's most important is how
- 00:28:46well can I upgrade this in my code base
- 00:28:50here is t3.8
- 00:28:58I am very curious what happens when I
- 00:29:00update
- 00:29:07itol I'm I'm curious what version I'm
- 00:29:10running right now because I up until
- 00:29:12like last year I think I was on the pre
- 00:29:161.0 of Astro and I did the update to
- 00:29:18three and it just kind of worked when's
- 00:29:20the the history on this I think I
- 00:29:22uninstalled the plugin that tells me I
- 00:29:24uninstalled git lens so I can easily see
- 00:29:27I kind on GitHub though apparently I
- 00:29:29didn't upgrade in order to fix something
- 00:29:30that was broken in Safari last year but
- 00:29:33before then it had been 2 years so I'm
- 00:29:35not like actively updating the version
- 00:29:37of Astro I'm using so let's see how well
- 00:29:39it does two major jumps every things up
- 00:29:42to date have fun
- 00:29:44building bets on if this works first try
- 00:29:47browser list is outdated that's fine
- 00:29:49I'll fix that in a sec it looks like it
- 00:29:51just worked do view transitions still
- 00:29:53work it looks like they do oh that's so
- 00:29:56good that's that's so good I need to
- 00:29:59post on my blog more it's been a minute
- 00:30:01as. glob is deprecated it will be
- 00:30:03removed in a future major version use
- 00:30:05import. meta duck glob instead let's see
- 00:30:07if I just swap that if it's
- 00:30:11fine now the errors are starting oh it
- 00:30:14comes through as a record now also
- 00:30:17prettier is failing of course it is did
- 00:30:20it not update the prettier plugin why
- 00:30:22wouldn't it update that as part of the
- 00:30:23update process also like like I know
- 00:30:27Astro guys you don't want to like bet on
- 00:30:29prettier you should it is such a bad
- 00:30:32experience to not have formatting now
- 00:30:35that it's just it should be deeply
- 00:30:38considered in your templates especially
- 00:30:40with Tailwind like if you're using
- 00:30:41tailwind and you're not using the
- 00:30:43prettier plugin for Tailwind you're
- 00:30:45using Tailwind wrong and it's not just
- 00:30:47like suboptimal DX but your users are
- 00:30:48getting a worse experience because
- 00:30:50things can't be gzipped as well if the
- 00:30:52classes aren't in the right order nope
- 00:30:53still getting a prettier error it's cuz
- 00:30:56of the Tailwind plugin again like like
- 00:30:58these are the things that it it seems
- 00:31:01scary to update those plugins cuz
- 00:31:02they're not Astros plugins I think it's
- 00:31:05important let's see still
- 00:31:11erroring I have to change the prti your
- 00:31:14plugin Astro to use a dynamic import why
- 00:31:17is this my
- 00:31:19problem cool can I get prettier
- 00:31:23working I did it I did it by moving off
- 00:31:26of a JS prettier config which I had to
- 00:31:28have because Astro didn't support the
- 00:31:31standard config at the time and now it
- 00:31:32does but nothing indicated that the CLI
- 00:31:35should have told me fixed I did it
- 00:31:37Reddit updated to
- 00:31:40latest Astro look at that whole thing
- 00:31:43built in 16 seconds 24 total to for the
- 00:31:46deploy and everything and my site is now
- 00:31:49running Astro 5.0 not that you would
- 00:31:52notice as the user because the site is a
- 00:31:55static HTML site there is really nothing
- 00:31:57astroe being loaded Beyond a tiny bit of
- 00:32:00JS in order to make page Transitions and
- 00:32:02view transitions work here we
- 00:32:05are pretty cool I am very happy with
- 00:32:08this release even if I had to fight
- 00:32:09prettier I'm sure they'll smooth that
- 00:32:10out after seeing this so uh check the
- 00:32:12pinned comment I'm going to leave an
- 00:32:14update once I know if they fixed that or
- 00:32:16not not that it's their problem but
- 00:32:18Astro loves to solve things that aren't
- 00:32:20their problems so fingers crossed that's
- 00:32:22all I got for now let me know what you
- 00:32:23think and how hyped you are for Server
- 00:32:25Islands I know this is a really cool
- 00:32:26release until next next time peace NS
- Astro 5
- Server Islands
- Static Content
- Dynamic Content
- Performance Optimization
- Astro Content Layer
- SEO
- Responsive Images
- Pre-rendering
- Framework Update