Astro stole my favorite parts of Next (and I'm hyped)

00:32:30
https://www.youtube.com/watch?v=3xqa0SsRbdM

摘要

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.

心得

  • 🌌 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.

时间轴

  • 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.

显示更多

思维导图

视频问答

  • 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.

查看更多视频摘要

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