Astro Framework: Revolutionizing Web Development with Island Architecture and Zero-Javascript Approach

Astro is a tool known for making things easier by building a multi page application and shipping with no Javascript by default. Meaning, only the HTML file will be sent to the browser, with zero JS needed to get loaded on the browser and slow you down.

Introduction to Astro

Instead of heavy interactive apps, Astro is designed to target content-based websites. Astro is a really great option for that, as much as we want to publish some content.

It's a kind of server-first, it privileges server-side rendering over client-side rendering as much as possible.

Astro was created for creating webpages with lots of content. This covers the majority of e-commerce sites, blogs, publishing sites, documentation sites, and blogs.

We need to know something crucial before beginning our review. The distinction between a web application and a website;

• WebSites (as opposed to web applications) lack dynamic content updates and are hence static. Visitors cannot engage with them or send messages back to the site.
• WebApps: Web apps are websites with interactive features and capabilities. A web application is computer software that is accessed through a web browser and frequently linked to a database to offer a customized interactive experience for the user.

Having said this, you should be aware that Astro might not be the ideal option for your project if you're trying to build a web application.

For your web application-focused project, exploring over Next.js framework as an option would be more appropriate in your situation.

Astro team made sure we can utilize any favorite UI component language that we already are familiar with. Frameworks such as Svelte, React, Vue, Lit, Solid, etc. are compatible for creating new UI components in Astro projects.

All web developers should be able to use Astro, this is what the team behind Astro had in ming. Regardless your previous web development expertise or skill level, Astro is built with an easy to use approach.

Partial Hydration, what is it?

The concept of partial hydration allows developers to determine what aspects are loaded and when, in order to provide fast interactivity. This is done by being able to put some client-side JS only where it is needed using something referred as "island architecture".

Partial hydration definitely is a wise and practical strategy. Our webpage initially is sent as pure HTML from the server to the client. JavaScript is not shipped by default.

However, we know that JavaScript is what makes our page interactive. This is where hydration comes into play as the procedure of loading JavaScript.

Hydration is cool, it’s in place only when we need it, for example, if we have a page that starts with content that doesn’t need interaction, javascript is not needed.

So we load nothing, but if scroll down to the footer when we have a form-contact that need interaction with the user, here the hydration comes in place to hydrate our page with the javascript needed for the form.

How is Partial Hydration implemented in Astro?

The guiding principle of Astro is to build Islands of Interactivity that the browser can hydrate on its own. Astro Island is the solution.

We can optimize how the page loads javascript by treating each component (Island) independently.

We divide the page into multiple components, each element has its own case. Image carousels need javascript, text or image doesn’t need it, a comment section needs javascript, and so on.

In Astro we are able to tell the component how to be rendered, it's up to us to choose, we can for exemple decide that the component's JavaScript code should be rendered in the initial load of the page, or maybe hydrate the component with JavaScript after finishing the first load, also we can be more precise ad say That the component should be hydrated only if it's visible to the user, that's some of the cases that we can choose fo rendering.

Pros of Island Architecture

The Islands design incorporates principles from several rendering approaches, including server-side rendering, static site generation, and partial hydration.

The following are some of the major advantages of integrating islands:

• The Pattern provides all of the benefits of component-based architecture, such as reusability and maintainability.
• Improves performance by decreasing the quantity of JavaScript code sent to the client. The code delivered only contains the script needed for interactive components, which is significantly less than the script required to build the virtual DOM for the full page and rehydrate all of the page's elements.
• Websites are SEO-friendly because all static content is rendered on the server.
• Using standard static HTML links to reach other pages helps to increase the website's accessibility.

Astro is MPA or SPA?

Astro is unique in that it is both a static site generator and strives to keep JavaScript out of the final build as much as possible. It also prefers multi-page apps over single-page apps (SPAs).

A website may be built in a variety of ways. The Single Page Applications (SPAs) concept promoted by Angular and React, has mostly overtaken MPAs, but Multi-Page Applications (MPAs) are making a comeback due to the amount of Javascript we transport to the browser using SPAs.

Fast startup is crucial for many websites, for many sites and apps with little interactivity, a client-rendered framework like Angular is overkill.

This generation of MPAs is distinct from earlier generations. Astro has a component-based approach employing the island's architecture.

Conclusion

A lot of specialists in the field believe that Astro may probably completely change how websites are built.

The fact that astro build websites without a client-side JavaScript by default will have a major impact on the performance because it removes all the unused JavaScript code.