Astro – Island Technology in the Name of Optimization

Hello everyone. Welcome and thank you for joining today. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to a powerful tool in modern web development called ASTRA. We'll explore how it optimizes content delivery while providing the flexibility of modern JavaScript frameworks. Whether you're building interactive applications or static, content-driven sites, ASTRA might be the solution you've been looking for.

So let's get right into it. We have all come across different types of web experiences. On one hand, we have highly interactive applications and on the other hand, sites that are mostly static and just serve content. The question is, how do you find the right balance between overloading the browser with JavaScript and keeping things fast? Let's talk about what choices we have in the current ecosystem.

Right now, we have a few well-known options for building web applications. You've got full-featured frameworks like Next.js or Remix that are great for highly interactive applications but they can sometimes feel like overkill for static sites. Then there is Gatsby, which had its moment but learning it can be a bit much. And let's be honest, it feels kind of abandoned these days. And then we've got classic static site generators like Jackal, which work perfectly until you need to add any interactive elements. So what if we need both speed and flexibility? That's the place where ASTRA steps in because it allows you to create blazing fast static websites without needing any JavaScript by default. But what makes it really stand out is that you can still sprinkle in interactivity with selective hydration, meaning you only load JavaScript when it's absolutely needed. This approach is perfect for sites that are mostly static but have a few interactive features. It gives you the best of both worlds, performance and flexibility.

And as we can see, ASTRA isn't exactly a newcomer in the world of web development. In fact, it's already been trusted by some of the biggest names in the industry. For example, companies like Microsoft and Porsche have used ASTRA to build their websites, which speaks volumes about its reliability and performance. So what makes ASTRA unique? First of all, it's built with content-driven pages in mind, perfect for blogs, portfolios or corporate websites that don't need tons of JavaScript to work. You can still use your favorite UI libraries like React, Vue or SWAT, but ASTRA takes care of delivering pure HTML by default. It also embraces multi-page application architecture, meaning each interaction results in a full page reload, which is often faster and simpler for mostly static content. It's all about reducing JavaScript load while giving you the flexibility to add dynamic elements when needed. And one of the best things about ASTRA is how flexible it is when it comes to integrating libraries. Whenever you're a fan of React, Solids, maybe Vue, or you're just low-working with Tailwind, ASTRA has got you covered, because with just a few commands you can easily add those libraries to your project without needing to reconfigure everything. That gives you the freedom to use the tools you love without sacrificing the simplicity and speed that ASTRA brings to the table. ASTRA keeps things simple with file-based routing.

This means the structure of your project's sources pages directory directly reflects the URLs of your site. So for example, if you create an about-me.astra file in the pages folder, it automatically becomes accessible at mysite.com about-me. But it doesn't stop there. ASTRA also supports dynamic routes, which are useful for creating pages on the fly. For instance, a file named slug.astra in the blog directory could generate a unique URL for each blog post based on its slug. You can also use fallback paths with a structure like ...path.astra to catch multiple variations of a route, which is great for handling complex content hierarchies. And what's best, you can build pages with ASTRA components, HTML, Markdown, or, for example, MDX. This approach keeps your workflow clean and efficient, allowing you to focus on what truly matters, your content.

Now, let's talk about ASTRA components. By default, ASTRA components are executed entirely on the server's site, which means they don't send any JavaScript to the client unless you specify otherwise. This is a gamechanger for performance. For example, you can import an ASTRA component like a banner and simply use it in your template. You can also mix in React components or any other UI libraries you like, giving you the flexibility to use the best tools for the job.

What's cool is that you can access server-side variables directly in your components, allowing for dynamic content generation without extra overhead. You can also employ special ASTRA directives for even more control, like conditionally applying classes based on props, which makes it incredibly straightforward to create rich, immersive user experiences without bloating your site with unnecessary JavaScript.

Now while ASTRA is all about keeping things light, there may be times where you need to add a bit of interactivity to your pages. That's where the classic script tag comes into play. For instance, if you want to add a fun confetti effect when a button is clicked, you can do easily by importing a module right in your component. Just grab the buttons from DOM and attach even listeners that trigger the confetti effect. This approach lets you enhance user interaction without compromising the overall performance of your site.

Let's shift gears and talk about content collections. This feature is incredibly useful for organizing documents and ensuring everything is validated correctly. With content collections, you can define the type and schema for your content, which helps maintain consistency across your site. And here's how it works. You can define a content collection, which is actually really simple. First, import the defineCollection function and use it to describe your collection. You will need to provide a schema that will be applied to all Markdown files within the collection. And finally, you need to export it in the collections object. That's it. Done!

It's designed to handle these scenarios seamlessly, allowing you to integrate dynamic elements where needed, while still maintaining the overall performance and simplicity of the framework. Astro allows you to define specific areas, known as islands, on your page that can become interactive. For instance, if you have a mostly static blog post, you can add a dynamic component like an interactive comment section or a live chat widget. And the best part? You can control when these components load. For example, you can set a component to load as soon as the page loads, or only when it becomes visible in the viewport. This approach minimizes the JavaScript footprint, loading interactivity only when necessary.

Astro Islands approach works by delivering the static parts of the page from a CDN for fast loading. When a component needs interactivity, the browser fetches the necessary JavaScript from the same source. The key here is that users can see the content immediately, without waiting for hydration to complete. The downside of this approach occurs when you need to display dynamic data. A run trick happens because the hydrated components request data from the server, for example in JSON format, and then displays it to the user. This pattern introduces performance penalty, as JavaScript is solely being used to fetch data, which is unnecessary and adds extra overhead. And that's the part where Server Islands come in. By using the server deferred directive, you can tell Astro to skip the initial rendering of specific components. Instead of rendering them right away, Astro intelligently defers the rendering to a later point in time, optimizing performance and reducing the unnecessary overhead of fetching dynamic data with JavaScript.

What does it mean to your site? It allows you to cache the static page behind a CDN, ensuring that your main content loads almost instantaneously, completely with a placeholder while the dynamic elements are being prepared. Once the dynamic HTML is ready, it replaces the server island on the page with the actual rendered content. This approach gives your users a fast, seamless experience right from the start, while still allowing you to deliver fresh, interactive updates effortlessly. So, here, we use client load to make the image carousel component interactive immediately after the page loads. This is ideal for components that need to be ready for user interaction right away. With client idle, we are telling the component to wait until the browser is idle or until 500 milliseconds have passed before making it interactive. This helps prioritize more critical resources while still preparing interactivity shortly after. With client visible, the image carousel component only becomes interactive when the user actually scrolls it into view. This is great performance optimization, loading JavaScript only when needed. With client media, the component becomes interactive only if the device's screen width is 1280 pixels or less. This ensures that interactivity is triggered based on responsive design needs. With client only, the component is rendered exclusively on the client side because, for example, it may use some kind of browser APIs. And last but not least, with server defer, we can say that this component should be rendered exclusively on the server side and then sent to the client. Of course, we can provide a fallback, which will be included in the initial content delivered from the CDN. Let's explore an exciting development in web design, the View Transitions API.

Let's explore an exciting development in web design, the View Transitions API. Until recently, creating rich animations during navigation multi-page applications was a challenge, often limited to single-page applications like those built with Remix or Next.js. The introduction of View Transitions API changes everything. This innovative feature allows developers to create smooth, visually appealing animations during page transitions in MPA, greatly enhancing user experience.

Astra fully supports the View Transitions API, and what's best, it makes it accessible across all browsers. However, there is a catch in its implementation. To use View Transitions, you need to import the View Transitions component and basically put it into the head of your Astra page. You can also define transitions on specific elements within your pages, and this will create smooth animations during page changes, enhancing the overall user experience.

Now, here is an important point. When View Transitions are enabled, navigation actually occurs on the server on the client side. This is how Astra ensures compatibility across all browsers. However, it aims to maintain the same behavior as a multi-page application, which means that our client components are remounted on each navigation. Can we opt out from this behavior? We can, and it's really simple. We need to add the TransitionPersis attribute to our component and that's it. This means that the component will maintain its state, as you can see in the video. At some point when View Transitions reach a baseline implementation across browsers, Astra plans to remove this single-page application workaround. For now though, using the TransitionPersis attribute is the only way to achieve this behavior effectively.

All right, let's now tackle an important question. Which framework should you choose? Astra? Next.js? Remix? In today's digital landscape, performance is everything. Users expect websites to load quickly, respond instantly, and deliver smooth interactions. This is where the size of a web application can become critical.

Astra stands out as a fantastic choice when it comes to optimizing for size. Its architecture is designed to minimize the amount of JavaScript sent to the client by default. This focus on lightweight HTML means that users will observe faster loading times and a more responsive user experience, which is essential in retaining visitors.

Also, let's consider the actual cost of JavaScript. When a browser loads a web page, it has to download, parse, and execute JavaScript code. Each of these steps takes time and resources. For users on low-end devices or those with slower internet connections like 3G or even 2G, this can lead to frustrating delays. The truth is that not everyone has access to the latest iPhones or lightning-fast 5G networks. In many parts of the world, users still rely on older devices and slower internet connections. For these users, happy JavaScript can mean a sluggish experience, which may discourage them from returning to your site.

Furthermore, the impact of JavaScript isn't just about speed. It can also affect battery life on mobile devices. Excessive JavaScript can drain batteries faster, making it even more critical to consider performance when targeting a diverse audience. Also, research has shown that loading speed significantly influences user behavior. For instance, a delay of just one second in page loading can lead to a decrease in conversion rates by around 5%. In addition, nearly 70% of consumers admit that the speed of a web page directly affects their willingness to make a purchase. And personally, I'm one of those consumers. When I encounter a shop that loads too slowly, I often find myself looking for an alternative. It's frustrating, and I know I'm not alone in this sentiment.

But with Astra, you can mitigate those issues. By focusing on efficient content delivery and reducing unnecessary JavaScript, you create a faster, more user-friendly experience that meets the expectations of today's diverse web users. In a world where performance can make or break a site, Astra empowers you to deliver high-quality experiences that keep users engaged. And the truth is that the internet is predominantly static. In many cases, complex client-site interactivity is really unnecessary. Simplifying our web applications can lead to faster load times and a better user experience. We can focus only on delivering essential content without overwhelming users with excessive features.

Now that we have explored Astra's strengths, let's discuss when it's the right choice for your projects. Astra is particularly well-suited for a variety of applications, especially those that prioritize content delivery and performance. So if you are building an online store, fast load times are critical, and Astra allows you to create a smooth shopping experience without JavaScript load. For creative professionals showcasing their work, Astra provides a platform to display stunning visuals while maintaining fast performance. Bloggers also benefit from Astra's ability to deliver content quickly and efficiently. Readers appreciate fast-loading articles, which keeps them engaged and encourages them to explore more of your content.

When launching a marketing campaign, having a lightning-fast landing page can make all the difference. Astra's optimizations help drive conversions by ensuring that visitors don't bounce due to slow loading times. For components wanting to present a polished online presence, Astra helps create professional sites that deliver information quickly and effectively, reflecting positively on your brand. And, while frameworks like Naked.js are powerful and versatile, they might not be the necessary framework for every project, sometimes a specialized tool like Astra is the better option, especially when speed and simplicity are paramount. Both frameworks have their strengths, but they cater to different needs depending on the type of project you are working on.

Naked.js is designed for building complex applications with robust server-side rendering capabilities. However, this level of power often comes with complexity, especially when it comes to configuration and deployment. On the other hand, Astra shines when it comes to speed and simplicity. While Naked.js requires intricate configurations and often ties you to a specific cloud provider like, for example, Vercel, Astra's approach allows for a more straightforward implementation. Astra's server islands provide a unique solution that allows for server-rendered components to be embedded within static pages, making it flexible across various hosting environments without relying on cloud-specific features. This means you can easily deploy your site anywhere, maintaining performance without the complexities that Naked.js might introduce.

And we have reached the end of our presentation, and I would like to thank each of you for being here today. Although Astra has much more to offer, I kept the content brief to stay on track. I encourage you to explore Astra's website and dive into the documentation for more details. If you have any questions, insights, or experiences to share about Astra web development, I would love to hear from you. Don't hesitate to reach out if you'd like to learn more. Thank you once again for your time and attention.