Navigating Islands in Astro

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

Astro islands are a powerful primitive that allow you to take your statically rendered content, and gradually add interactive components as you go. Discover what client directives can do, when to use them, and how to communicate state between your islands effectively.

This talk has been presented at React Advanced 2025, check out the latest edition of this React Conference.

astro

Reuben Tier

Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

Emanuele Stoppa

Active contributor to the Biome project

The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.

next.js serverless astro

Opt in Design – The New Era of React Frameworks

React Advanced 2023

23 min

Opt in Design – The New Era of React Frameworks

Watch video: Opt in Design – The New Era of React Frameworks

Ben Holmes

Ben is a full-stack developer, open source maintainer, and whiteboardist making the web a little better.

This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.

frameworks builders and founders astro preact

All Things Astro

React Day Berlin 2023

28 min

All Things Astro

Watch video: All Things Astro

Elian Van Cutsem

Mentorship available

Astro Ambassador

Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.

astro

Astro & Fresh - Understanding the Islands Architecture

React Advanced 2022

21 min

Astro & Fresh - Understanding the Islands Architecture

Arpit Bharti

Rage Trade

The islands architecture is a new way to build websites with low or no JavaScript, using libraries like Astro and Fresh. Server-side rendering improves SEO and loading times, but can still result in large JavaScript payloads. Hydration allows for islands of interactivity, loading only necessary JavaScript. Astro is a framework for implementing the islands architecture, supporting multiple libraries like React and SolidJS. It enables progressive migration between frameworks and integration of different libraries in the same project.

web development frameworks architecture deep dive astro

The Next Wave of Web Frameworks is BYOJS

JSNation 2022

23 min

The Next Wave of Web Frameworks is BYOJS

Brandon Roberts

Developer Experience Engineer @ Appwrite

The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.

frameworks web apps astro

What's New in Astro

JSNation 2024

29 min

What's New in Astro

Fred K. Schott

Co-creator of Astro

Astro is a web framework that aims to optimize site performance without sacrificing functionality. It introduces features such as content collections and view transitions to enhance the user experience. Astro focuses on pushing the web forward by providing browser compatibility and app-like experiences. It also explores a powerful content layer and island architecture for personalized content. Astro is recommended for content-driven websites and offers a polyfill for Safari and integration with Storyblok CMS.

frameworks astro

Workshops on related topic

Crash course into Astro and Storyblok

React Day Berlin 2023

119 min

Crash course into Astro and Storyblok

WorkshopFree

Arisa Fukuzaki

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications.
In this workshop, we will quickly take a dive into the Headless World and Architecture.
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory.
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless

headless cms astro

Crash Course Into Astro, Kontent.ai and Portable Text

React Summit 2023

91 min

Crash Course Into Astro, Kontent.ai and Portable Text

WorkshopFree

Ondrej Polesny

During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.

headless cms astro portable text react

Astro: All Hands On

React Day Berlin 2024

126 min

Astro: All Hands On

Workshop

Elian Van Cutsem

Mentorship available

The web is capable of way more than we might think. During this workshop, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

astro