Astro Framework

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.

We load the javascript only if the element appears, if not we load nothing.

Pros and Cons 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.

Some disadvantages:

• There is not a lot of debate on the subject.
• A lot of frameworks claim to support the pattern, which makes it difficult to choose between them.

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.

Server-side rendering

SSR is an abbreviation for Server-Side Rendering, which is a rendering approach that turns our application into HTML on the server.

Unlike typical SPAs that utilize CSR (client side rendering) to display their content, SSR provides a faster "time-to-content" and is better for SEO.

There are a lot of frameworks that are already implementing the principe of SSR, like Next.js, and Gatsby. Astro has a different approach to the implementation, according to their documentation it’s created to operate on a server.

Astro code example:

---

const dateCreation = 2010;

---

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>Astro Playground</title>

    <style>

      header {

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        margin-top: 15vh;

        font-family: Arial;

      }

      .note {

        margin: 0;

        padding: 1rem;

        border-radius: 8px;

        background: #E4E5E6;

        border: 1px solid #BBB;

      }

    </style>

  </head>

  <body>

    <header>

      <img width="60" height="80" src="<https://assets.website-files.com/6029242da9cc79f23dc41aeb/602d5b26c08ffe20eaf4a740_Adservio-Icon-Big.svg>" alt="Astro logo">

      <h1>Adservio</h1>

      <p class="note">

        <strong>FOUNDED IN:</strong><br/>

        {dateCreation}

      </p>

    </header>

  </body>

</html>

‍

Page Rendered:

Conclusion

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

The fact of not using javascript will have a major impact on the performance, it will be for sure excellent, not only that, but also maintaining a codebase can be simple enough for everyone.