Astro — Ship less JavaScript with this Static Site Bundler

ByPayal Mittal

January 7th . 5 min read

Why do you think we have hundreds of JavaScript frameworks and even more libraries in the developer’s community?

To ease the development process, of course!

But whenever we download a new library, it only increases the bundle size, which in turn decreases application performance and speed. And when it comes to large-scale and complex sites, this becomes the greatest of issues as this bundle size reaches unacceptably high levels.

This entirely fails the purpose of using any modern library or tool in the first place, and this is where we see Astro come for front-line rescue.

Let’s see how -

About Astro!

Astro is a static website bundler that delivers lightning fast-speed and a modern developer experience.

While it’s evident that the developer’s community is more tilted towards JavaScript than any other language, Astro comes with no such pre-defined standards. It’s free from all presumptions and works with any or no framework at all!

Though the developer’s community adopted itself to these challenges and came up with new solutions like server-side rendering, lazy-loading, pre-rendering, hybrid-rendering, etc., they still have to deal with a lot of difficulties with these methods as well.

That’s when Astro helps you out as it does not ship JavaScript at all or ships it in smaller amounts only where needed. You see, no JavaScript, no performance lacking or speed issues!

How Astro works?

“Astro, by default, generates every website with zero client-side JavaScript.”

It works like a static-site generator. So if you have ever used one, Astro would not be difficult to understand.

Astro aims to make every website ‘fast by default’ and makes it very difficult for you to build a slow site.

Use any frontend framework you like, and Astro converts the entire site to fully static and lightweight HTML at build time, stripping away all the JavaScript from the rendered page. This fully static HTML page is easy to render and loads at lightning fast speed, improving performance and SEO.

This is one aspect, but what about when using some JavaScript becomes inevitable? That’s another case that highlights the blog’s headline, i.e. ship less JavaScript.

Here comes partial hydration into the picture-

- Partial Hydration

When we talk about partial hydration, this is the concept behind the superfast-speed and high performance of Astro. It is also referred to by terms like ‘progressive hydration’ or ‘progressive enhancement’.

There are some scenarios where you need to run JavaScript at the client-side. Some of these instances include-

An image carousel
In shopping carts for ‘Buy now’ button
Auto-complete search bars

These are only a few examples; there can be more such cases where you have to run some JavaScript at the client-side.

Astro allows you to ship JavaScript whenever needed. What’s more, you can opt explicitly for those components which you want to run in the browser. Astro lets you hydrate only the required individual component without interrupting the rest of the static site. This is what partial hydration looks like!

So whenever you need to run a UI component in the browser, Astro enables you to load only that particular component (with dependencies) and while you're running it, the rest of your site remains as static HTML and runs as such.

Other JavaScript frameworks like Gatsby and Next.js fail to support this feature, as they consider your entire website as a single JavaScript application.

- Island Architecture

Astro follows the idea of Island structure, which is all about building entire websites using partial hydration. The term ‘ Island pattern ‘ was first introduced by Katie Sylor Miller.

While the conventional process is to build a website into client-side rendered JavaScript bundles which are then shipped to the user, the Island architecture brings a better and more effective approach to the table- To render static HTML pages on the server and add slots/placeholders around highly dynamic areas for interactivity. These slots contain server-rendered HTML output from the corresponding widgets, which can be hydrated and reused on the client-side into smaller widgets.

The server rendering in the Island model is not centered on improving SEO or UX but focuses upon how pages are rendered to the browser.

This in turn facilitates faster loading and rendering of lightweight components individually without being barred by other heavier components. Also, as this model isolates each page into separate units, any performance issue in one unit won’t cause any direct impact upon other units.

This approach leads to better navigation, improved accessibility, and SEO optimization.

Key Features of Astro -

We have already discussed the core highlighting feature of Astro, i.e. Partial Hydration. Let’s go down into other important features-

- Bring your own framework (BYOF)

With Astro, you can bring your favorite framework and start building applications without any further ado. It also means that you don’t need any prior knowledge of new syntax to get along with Astro.

You don’t need any configuration to enable the popular frameworks like React, Vue, Preact, and Svelte as Astro possesses built-in support for them. In case, you want to work with any other framework, you can add Astro support to it a via third-party renderer.

A renderer here is a plugin (npm package) that adds Astro support for new frameworks and includes all framework dependencies in the package, so you don’t have to install them by yourself.

Other features are-

Feature-rich complete package: Astro supports all your favorite npm packages and tools like TypeScript, Tailwind CSS, CSS modules, Markdown, MDX, Sass, etc.
SEO improvement: Features like pagination, automatic sitemaps, RSS feeds, and collections offer a major improvement in terms of SEO.
100% static, No JS : By rendering your pages to fully static HTML, Astro by-default removes all the remnants of JavaScript from the final build.
: Whenever you need some JS, Astro can automatically hydrate the required components when visible on the page. In case, the component is not visible, you won’t have to load it.

However, as we see that Astro is still in the beta phase, we will be able to see more obvious features in its official release. Till then, you can start using it to build your next website.

Quickstart

Let’s get started with Astro-

- Prerequisites

Node.js — 14.15.0, v16.0.0, or higher.
Text editor — VS Code with official Astro extension.
Terminal — Astro is mainly accessed via the terminal’s CLI.

- Installation

# Make a new project directory, and navigate directly into it
mkdir my-astro-project &amp;&amp; cd $_
# prepare for liftoff...
npm init astro
# install dependencies
npm install
# start developing!
npm run dev

- Project structure

Inside your Astro project structure, you will see the following files and folders-

├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
│       └── index.astro
├── public/
└── package.json

Refer to the official page for more details.

Bottom Line

While often a poor-performing website is considered a failure of the developer, it turns out that many times the fault lies in the choice of framework and tools.

In the times when JavaScript frontend speed is of crucial importance, having a tool at your disposal that speeds up things to the next level is a true blessing. Also, choosing the right tool for your application development is the next big thing.

Now that the programming community is evolving and bringing more and more frameworks that claim to deliver a better user experience, we should move from the older choices and give the new ones a chance as well, given how well they suit the project requirements.

Thanks for reading till the end, folks!