🏝️ The Server Islands hype is real!

Join the early preview for my course! learnastro.dev
($20 off with the code SERVER_ISLANDS)
Server Islands are a new paradigm in Astro, letting you stream in MARKUP! from the server. This enables CDN caching of your static content while also allowing for customizable data rendered server-side. Let’s take a look!
🔗 Key Links 🔗
- Announcement: astro.build/bl...
- Blog post: astro.build/bl...
- RFC: github.com/wit...
Example 1
- server-defer.v...
Example 2
- server-islands...
- Github: github.com/wit...
---------------------------------------
📹 Related Videos 📹
- Astro Rendering Options: • Choosing between SSR, ...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic...
- Blog: chrispenningto...
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoff...

[@ComradeIntensE]

Awesome explanation Chris ! I learned so much from you, thank you 🍻🍺

[@CodinginPublic]

Glad you enjoyed it!

[@chrispeele3746]

Great content as always! I think by “customizable” you mean “dynamic”? Serves dynamic content to the user. Customizable implies the user customizing that element with various options or whatnot. Again, great video!

[@Goyo_MGC]

Would love to see more in depth examples with nested island. What would be your approach on let's say a Server island that would need interactivity ? Would you convert it all to client or would you integrate a client island into the server island ? I like the concept of having multiple rendering pattern but it always scratch the surface and does not go to production level problems that might occur. All the best mate

[@simonswiss]

Awesome video Chris! Love how these server islands are so similar to client islands in concept - and as easy to use with Astro's wonderfully simple APIs 🔥

[@masterfraud]

I’ve been watching your videos for some time now, I really like your explanation and I plan soon to try out astro for my projects, top tier content

[@dageddy]

Wonderful new Astro feature and great introductory video!

[@MatTeague]

I hope this comes to the course. Would love a more in-depth example

[@facundoleonel487]

Awesome this feature changes a lot of things. I have a question, have you ever deployed to cpanel in an astro project?

[@cb73]

So… basically htmx? I’m not seeing how that is streamed in.

[@bobbyb6412]

still a bit confused how this is done if it's all just html? how is html slotted into a html site without using javascript? or is there like a mini javascript framework added ala htmx?

[@dageddy]

There is a small JavaScript together with the main static page that fetches the island content.

[@bobbyb6412]

@@dageddy ah okay, so it's a bit like htmx, was just confused there for a second

[@CodinginPublic]

I could have been clearer. There’s a small INLINE script, that does all the work but there’s no extra fetch for a JS bundle.

[@bobbyb6412]

@@CodinginPublic what tripped me up about server islands, is that it seems a lot like HTMX except that you can only dynamically render the islands on a request/reload. seems like there is no way to only re-request a server island once the page is loaded (to check if the number of available rooms has changed in the mean time for example) correct? noob here

[@user-tx4wj7qk4t]

As typical with web developers they say things that aren't true and then confuse everybody. Like how you typically hear that js only uses one thread. No it also uses the systems threads, having a main loop doesn't mean you can't use anything else otherwise async wouldn't be possible. So yes there's still js, the part that manipulated the Dom client side is the only difference but that doesn't sound as cool

[@qazyhn94]

basically react server components?

[@user-tx4wj7qk4t]

So basically instead of a jamstack fetch that gets you JSON back which is then used by the client side JS to manipulate the DOM with, you do a fetch that has the server generate HTML or grab it from a cache which means you end up with 0 client side js besides fetches for about the same speed if not possibly faster (due to caching)?

[@CodinginPublic]

Yep! And you can statically render the pages using SGG if it fits your use case and get that core content cached on a distributed CDN for really fast FCP.

[@user-tx4wj7qk4t]

@@CodinginPublic so are htmx and vite redundant?

[@aldierygonzalez7249]

@@user-tx4wj7qk4t No from what it seems this only targets initial render. If you were using htmx to do this streaming then you could go ahead and refactor it out 🎉! Otherwise if you were doing something like having a number next to the cart with the amount of items, that would need further interaction as the user uses the site like refetches for that one component.

[@ElLevidente]

It's crazy how we already solved these problems more than 20 years ago with PHP and now the JS community acts like it's inventing these as new concepts

[@chauchau0825]

if anyone points out this obvious fact, they will be offended 😊

[@Taddy_Mason]

Job security maybe?

[@CodinginPublic]

Ha well, a few thoughts. I know Astro in particular has leaned into the “back to PHP” memes at least and not everyone has written PHP, so it’s new to a lot of us that have just started in web dev. Nice to have the best of interactivity with JS and some of the tested web patterns. Thanks for your perspective.

[@anyadatzaklatszjutub]

php had client level interactivity 20 years ago? that's new to me can someone link me a source if true? my understanding is that the island architecture in this form is relatively new i've heard Ryan Carnito talk about ... yahoo? or amazon? having some early internal frameworks that was basically islands, they just never used it in production, for reasons

[@asimalqasmi7316]

Is it the same as parial rendering in Nextjs?

[@CodinginPublic]

Similar. Different infrastructure. Same basically result.

[@okkashaally2115]

What's the difference with NextJS?

[@CodinginPublic]

Different infrastructure but same basic result.

[@dynamohack]

use php and forget any of it

[@CodinginPublic]

Ha someone else mentioned that PHP has had this for 2 decades. Nice to get it in JS land. Only two decades late. Ha

[@petmik5022]

same principle XHR uses years Vaadin framework in Java, no js coding, web and server side components comunicate togehter, so Astro is good solution same way like Vaadin, but Vaadin os good for web apps, Astro I will use for more static sites, looks great

[@CodinginPublic]

Never heard of Vaadin. Cool. Thanks!