What is Astro?

Astro is a web framework built for content-focused sites — blogs, docs, marketing pages, portfolios. This very site, Obiz Solutions, is built with it. Its biggest difference from SPA frameworks (React, Vue, Next.js) is that it ships zero JavaScript by default — pages render to static HTML at build time and load instantly.

Islands Architecture

Astro’s core idea is the Islands Architecture: the page is static HTML/CSS, and only the parts that truly need interactivity (a widget, a form…) get “hydrated” into JS components — small interactive islands in a sea of static HTML. This lets you use React/Vue/Svelte where you need them, without shipping a huge JS bundle to pages that don’t need any.

File-based routing

Every file under src/pages/ becomes a route automatically:

src/pages/index.astro       →  /
src/pages/blog/index.astro  →  /blog/
src/pages/blog/[slug].astro →  /blog/:slug/

`.astro` components

Astro has its own component syntax (.astro): a “frontmatter” block that runs at build time (fetch data, run logic — like server-side code), followed by an HTML template:

---
const posts = await getCollection("blog");
---
<ul>
  {posts.map((post) => <li>{post.data.title}</li>)}
</ul>

Content Collections

This is how Astro manages type-safe Markdown/MDX content via schemas (Zod) — it’s exactly how this site organizes blog, projects, and docs (see src/content/config.ts). Each entry is a Markdown file whose frontmatter is validated automatically at build time, catching missing fields or wrong types early.

When to reach for Astro

The site is mostly content: blog, docs, marketing, portfolio
You want maximum page-load speed with minimal JS
You still want React/Vue components in a few interactive spots

It’s less of a fit for highly interactive apps (dashboards, admin tools) — Next.js/Remix or a plain SPA usually serve those better.