← cd ../blog
general

De ce am ales Astro pentru campusnet.ro

De ce am ales Astro pentru campusnet.ro — imagine de copertă

Când am decis să refac campusnet.ro, aveam o singură prioritate: viteza. Nu doar viteza de încărcare pentru utilizatori, ci și viteza mea de dezvoltare. După ce am testat Next.js și Gatsby, am realizat că pentru un blog tehnic, adesea „mai puțin înseamnă mai mult”. Așa am descoperit Astro.

Ce face Astro special?

Spre deosebire de framework-urile care trimit megabytes de JavaScript către browser (hidratare masivă), Astro folosește arhitectura Islands Architecture. Ideea e simplă: totul este HTML static până când ai nevoie de interactivitate. Dacă o pagină nu are nevoie de JS, Astro nu trimite niciun byte de JS. Rezultatul? Pagini care se încarcă instantaneu.

Structura proiectului

Organizarea în Astro este intuitivă:

  • src/pages: Rutele site-ului (file-based routing).
  • src/layouts: Wrapper-ele pentru pagini.
  • src/components: Componentele UI (Astro, React, Svelte etc.).
  • src/content: Sursa de adevăr pentru blog și proiecte, folosind Content Collections.

Content Collections și Type Safety

Unul dintre motivele principale pentru care am ales Astro este integrarea cu Zod. Pot defini schema conținutului meu, asigurându-mă că fiecare postare de blog are datele necesare:

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.string(),
    excerpt: z.string().max(160)
  })
});

export const collections = { blog };

Generarea paginilor cu getStaticPaths

Pentru rutele dinamice, Astro folosește getStaticPaths. Este metoda prin care transformăm fișierele Markdown/MDX în pagini HTML statice la momentul build-ului:

---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(p => ({ params: { slug: p.id }, props: { p } }));
}
---

Layout-uri și Slot-uri

Componentele de tip layout sunt inima site-ului. Folosesc un BaseLayout care acceptă un slot pentru conținut și props pentru SEO:

--- 
const { title } = Astro.props;
---
<html>
  <head><title>{title}</title></head>
  <body>
    <nav>...</nav>
    <main><slot /></main>
  </body>
</html>

Insule de interactivitate: Fără framework-uri grele

Pentru funcționalități precum Lightbox, tema dark/light sau meniul mobil, nu am avut nevoie de React sau Vue. Am folosit is:inline pentru a injecta scripturi vanilla JS direct în pagină:

<script is:inline>
  const toggleTheme = () => document.documentElement.classList.toggle('dark');
  document.querySelector('#theme-btn').addEventListener('click', toggleTheme);
</script>

Căutarea cu Pagefind

Pentru că site-ul este static, nu am un backend de căutare. Soluția? Pagefind. Este un motor de căutare static care se rulează după build:

npx pagefind --site dist

Acesta indexează tot HTML-ul generat și îmi oferă un UI de căutare rapid, fără a consuma resurse pe server.

Concluzie

Astro mi-a oferit libertatea de a scrie conținut în MDX, performanța unui site static și simplitatea de care aveam nevoie. Cu un timp de build sub 1 secundă pentru zeci de pagini, campusnet.ro este acum mai rapid și mai ușor de întreținut ca niciodată. Dacă plănuiești un blog sau un site de documentație, Astro este, în opinia mea, cea mai bună alegere în 2026.