Edit Article

Title

Author

Content

## Въведение в Astro

Astro е модерен web framework, създаден за изграждане на бързи, content-focused уебсайтове. Той предлага уникална архитектура, която комбинира най-доброто от статичните сайтове и сървърно рендериране.

![Astro Framework](https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=400&fit=crop)

## Защо Astro?

Astro се отличава с няколко ключови предимства:

1. **Zero JavaScript by default** - Изпраща само HTML и CSS по подразбиране
2. **Islands Architecture** - Хидратира само интерактивните части
3. **Framework agnostic** - Работи с React, Vue, Svelte, Solid и др.
4. **Отлична производителност** - Автоматично оптимизирани Core Web Vitals

## Astro Architecture

### File-based Routing

Подобно на Next.js, Astro използва file-based routing:

```
src/pages/
  index.astro        -> /
  about.astro        -> /about
  blog/
    index.astro      -> /blog
    [slug].astro     -> /blog/:slug
  api/
    health.ts        -> /api/health
```

### Component Syntax

```astro
---
// Frontmatter - изпълнява се на сървъра
import Layout from "../layouts/Layout.astro";
import { getArticles } from "../lib/api";

const articles = await getArticles();
const title = "My Blog";
---

<Layout title={title}>
  <h1>{title}</h1>
  <ul>
    {articles.map(article => (
      <li>
        <a href={`/article/${article.id}`}>{article.title}</a>
      </li>
    ))}
  </ul>
</Layout>

## Rendering Modes

### Static (SSG)

```astro
---
export const prerender = true;
// Страницата се генерира при build
---
```

### Server (SSR)

```astro
---
// Default - страницата се генерира при заявка
const data = await fetchDynamicData();
---
```

### Hybrid

Астро позволява смесване на двата режима в един проект.

## Islands Architecture

Islands са интерактивни компоненти в море от статичен HTML:

```astro
---
import Counter from "./Counter.jsx";
import Newsletter from "./Newsletter.svelte";
---

<article>
  <h1>Static content</h1>
  <p>This is static HTML, no JavaScript.</p>
  
  
  <Counter client:load />
  
  
  <Newsletter client:visible />
  
  <p>More static content...</p>
</article>
```

### Client Directives

- **client:load** - Зарежда и хидратира веднага
- **client:idle** - Зарежда когато браузърът е idle
- **client:visible** - Зарежда когато влезе във viewport
- **client:media** - Зарежда при media query match
- **client:only** - Рендерира само на клиента

## Integration with Go Backend

В нашия проект Astro frontend комуникира с Go backend:

```typescript
// src/lib/api.ts
const API_BASE = "http://127.0.0.1:8082";

export async function getArticles() {
  const res = await fetch(`${API_BASE}/api/articles`);
  return res.json();
}
```

## Astro Config

```javascript
// astro.config.mjs
import { defineConfig } from "astro/config";
import node from "@astrojs/node";

export default defineConfig({
  output: "server",
  adapter: node({
    mode: "standalone"
  }),
  server: {
    host: "127.0.0.1",
    port: 4322
  }
});
```

## Content Collections

Astro има вградена система за управление на съдържание:

```typescript
// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string())
  })
});

export const collections = { blog };
```

## Заключение

Astro е отличен избор за content-focused сайтове, където производителността е приоритет. Islands architecture позволява прецизен контрол върху JavaScript bundle-а.

---
**Брой думи: 3,156**

Render Mode

Published

Cancel