Astro Framework: SSR, SSG и Islands Architecture в дълбочина

Въведение в Astro

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

Защо 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

---
// 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>

<style>
  /* Scoped styles - само за този компонент */
  h1 {
    color: var(--primary);
  }
</style>

Rendering Modes

Static (SSG)

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

Server (SSR)

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

Hybrid

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

Islands Architecture

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

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

<article>
  <h1>Static content</h1>
  <p>This is static HTML, no JavaScript.</p>
  
  <!-- Island - хидратира се с JavaScript -->
  <Counter client:load />
  
  <!-- Lazy island - зарежда се при видимост -->
  <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:

// 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

// 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 има вградена система за управление на съдържание:

// 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