3 min read
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),
- ...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).
We've built a sample project called Astro for Docs (see source code: GH: Astro for Docs) to showcase how straight-forward and flexible it is to use Astro for Beginners.
What's in the menu for today?
- Writing in "Astro" as a language to write Astro Components
- Use Markdown files as pages with Astro's MDX and TailwindCSS integrations.
- Design nested layouts for better developer experience.
- Leverage Astro's Runtime APIs to build components.
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, Astro is considering per-page support for SSR in their 2022 Q4 roadmap.
Feel free to explore this example using the resources below: