Shipping Zero JavaScript with Astro
Tags: astro, javascript, beginners
Published: 2022-11-16 13:37:34

Astro is an **all-in-one web framework** designed for building **content-focused** websites. With this approach in mind, it delivers an incredible developer experience to build server-first, intuitive to use, flexible and fully-featured websites. Anyone who knows a little bit of HTML and CSS all the way up to seasoned developers can leverage Astro's _opt-in complexity_ framework to build for the web.

### Astro's biggest perks

Let's see what are the basics that Astro brings to the table, **Astro is...**

-   ...**easy to use** and by design less complex than any other UI framework or language (any valid HTML is a valid Astro component, see [Why Astro - Easy to Use](https://docs.astro.build/en/concepts/why-astro/#easy-to-use)),
-   ...**fast by default** shipping ZERO Javascript out of the box, it takes an MPA approach loading on average 90% less JavaScript (see [MPAs vs SPAs](https://docs.astro.build/en/concepts/mpa-vs-spa/)),
-   ...**incredibly featured, flexible and UI-agnostic** supporting several frameworks (supporting React, Preact, Svelte, Vue and more), an easier JSX, scoped CSS, file-based routing, data-fetching, and a lot more (see [Integrations](https://astro.build/integrations/)).

We've built a sample project called [Astro for Docs](https://astrofordocs.vercel.app/) (see source code: [GH: Astro for Docs](https://github.com/ekqt/astrofordocs)) to showcase how straight-forward and flexible it is to use Astro for Beginners.

### What's in the menu for today?

After playing around with this project, it turns out you CAN REALLY build a content-focused website with ZERO JavaScript using Astro. Based on what we've learned, here's what we'd like to show you:

1. Writing in "Astro" as a language to write [Astro Components](https://docs.astro.build/en/core-concepts/astro-components/)
2. Use Markdown files as pages with Astro's [MDX](https://docs.astro.build/en/guides/integrations-guide/mdx/) and [TailwindCSS](https://docs.astro.build/en/guides/integrations-guide/tailwind/) integrations.
3. Design [nested layouts](https://docs.astro.build/en/core-concepts/layouts/) for better developer experience.
4. Leverage Astro's [Runtime APIs](https://docs.astro.build/en/reference/api-reference/) to build components.

**Read the entire research at Webscope's blog**: [Shipping Zero JavaScript with Astro](https://www.webscope.io/blog/shipping-zero-javascript-with-astro)

We ran `npm create astro@latest` with TypeScript and a blank, empty project and here are our main takeaways:

-   Astro does deliver a great DX regardless of your level of experience, as building Astro components only really requires HTML and CSS.
-   Astro is UI-agnostic, meaning you can **BYOF** it and bring your own framework. They have official support for React, Preact, Solid, Svelte, Vue, and Lit. You can even mix and match different frameworks.
-   Astro shines with statically generated content. Even if there is no [SSR or ISR like Next.js](https://nextjs.org/docs/basic-features/data-fetching/overview), Astro is considering per-page support for SSR in their [2022 Q4 roadmap](https://github.com/withastro/rfcs/discussions/302).
-   Astro can ship ZERO JS (you'd be surprised how many things can be achieved with only HTML and CSS). Regardless if you need to introduce [Astro Islands](https://docs.astro.build/en/concepts/islands/) and UI frameworks, it loads [40% faster with 90% less JavaScript](https://twitter.com/t3dotgg/status/1437195415439360003) in comparison to modern frameworks.

Feel free to explore this example using the resources below:

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/ekqt/astrofordocs?file=src/pages/index.mdx&title=Astro)

Originally published: [Shipping Zero JavaScript with Astro](https://www.webscope.io/blog/shipping-zero-javascript-with-astro)