Astro sajtovi: kada su najbolji izbor, a kada nisu?

Šta je zapravo Astro?

Astro polazi od jedne pretpostavke: većini stranica JavaScript u pregledaču uopšte ne treba. Tekst, slike, cenovnik, radno vreme, mapa. Sve je to HTML. Astro zato podrazumevano ne pošalje ni jednu liniju JS-a, pa ga vi dodajete samo tamo gde stvarno postoji interakcija.

Next.js polazi od druge pretpostavke, i ima dobar razlog: da stranica jeste aplikacija. Zato u pregledač šalje React, pa dobijate stanje, rutiranje, forme koje reaguju bez osvežavanja i sve ostalo što aplikacija traži. Taj runtime nije trošak nego alat. Samo se plaća i kada vam ne treba.

Island Architecture, kako Astro bira šta dobija JavaScript

Astro to radi kroz Island Architecture, arhitekturu ostrva. Princip je jednostavan:

• →Stranica se sastoji od „ostrva“, interaktivnih komponenti
• →Sve ostalo (tekst, slike, navigacija) je statični HTML, bez JavaScript-a
• →Samo „ostrva“ dobijaju JavaScript, i to samo kada je potrebno

Rezultat je stranica koja u pregledač pošalje tačno onoliko JavaScript-a koliko na njoj ima ostrva. Na prezentacionom sajtu to je često nula. Koliko se to na kraju vidi u sekundama zavisi od sadržaja, slika, fontova i hostinga, pa brojku ne dajemo unapred, nego je izmerimo na vašem sajtu.

Lighthouse 100/100, i šta ta cifra zaista znači

Google Lighthouse je alat koji meri kvalitet web sajtova ocenama od 0 do 100 u 4 kategorije: performanse, pristupačnost, best practices i SEO. Astro sajtovi rutinski postižu:

Na sadržajnoj stranici Astro tu cifru dobija podrazumevano, jer nema JavaScript-a koji bi odložio prikaz. Next.js do visokih ocena takođe stiže, ali se tamo na tome radi: šta ide na server, šta u pregledač, šta se učitava kasnije. Taj posao radimo i naplaćujemo kao deo izrade. Razlika nije u tome da li je moguće, nego koliko košta da bude tako.

I jedna ograda, da se cifra ne čita pogrešno. Lighthouse meri jednu posetu u kontrolisanim uslovima, na simuliranom telefonu i simuliranoj mreži. Ono što Google koristi za rangiranje su podaci od stvarnih korisnika, a oni umeju da izgledaju drugačije. Zato ocenu gledamo kao alat za otkrivanje problema, ne kao rezultat sam po sebi.

Core Web Vitals, gde se razlika zaista vidi

Google rangira sajtove prema desecima faktora, ali Core Web Vitals su postali jedan od najvažnijih. Mere se tri stvari:

• 1.
  LCP (Largest Contentful Paint)

  Koliko brzo se pojavi najveći element na stranici. Google kao dobro računa sve do 2,5 sekunde. Kad u pregledaču nema JavaScript-a koji prvo mora da se preuzme i pokrene, ta granica se lakše drži.

• 2.
  FID / INP (Interaction to Next Paint)

  Koliko sajt brzo odgovori na klik ili dodir. Što manje JavaScript-a drži glavnu nit, to je odziv bolji. Na stranici bez ostrva nema šta da je zadrži.

• 3.
  CLS (Cumulative Layout Shift)

  Da li sadržaj skače dok se stranica učitava. Gotov HTML sa zadatim dimenzijama slika nema odakle da skoči. Isto važi i za Next.js kad se dimenzije postave, samo se tamo na to mora paziti.

SEO koji dobijate bez dodatnog rada

Veći deo SEO osnove Astro daje podrazumevano, bez podešavanja. Next.js ima ekvivalent za svaku stavku sa ove liste, samo se neke uključuju ručno i neke zahtevaju odluku:

• ✓
  Statički generisan HTML: Google bot odmah vidi kompletan sadržaj bez potrebe za JavaScript izvršavanjem. Nema čekanja na hydration.
• ✓
  Ugrađeni SEO alati: Meta tagovi, Open Graph, Twitter Cards i Schema Markup se generišu automatski na pravi način.
• ✓
  Optimizacija slika: Astro automatski konvertuje slike u WebP format, menja veličinu i dodaje lazy loading. Google nagrađuje brže učitavanje slika.
• ✓
  Automatski sitemap: Astro generiše sitemap.xml koji Google koristi za indeksiranje. Svaka nova strana se automatski prijavljuje Google-u.
• ✓
  Core Web Vitals bez borbe: Bez JavaScript-a nema šta da odloži prikaz, pa se dobre vrednosti dobijaju same. U Next.js-u se do istog dolazi, ali uz rad.

Astro vs Next.js, kada koristiti šta?

Oba su ozbiljna, oba koristimo, i nijedno nije rezervno rešenje. Razlikuju se po tome za koji tip projekta su pravljena. Zvezdice ispod su naša ocena iz prakse, ne merenje:

Vercel, gde hostujemo i jedne i druge

I Astro i Next.js sajtove hostujemo na Vercel platformi, globalnoj CDN mreži koja sadržaj servira sa servera najbližeg korisniku. Ovaj sajt koji sada čitate radi na Next.js-u, na istoj platformi.

• →Globalni CDN, serveri u 30+ zemalja, sajt se učitava brzo svuda
• →Auto-deploy, svaka izmena na sajtu je live za 30 sekundi
• →Besplatni SSL, HTTPS sertifikat bez dodatnih troškova
• →Vraćanje prethodne verzije, ako izmena nešto pokvari, prethodna verzija sajta se vraća bez ponovne izgradnje

Naši Astro sajtovi, realni rezultati

Jedan naš Astro sajt za lokalni biznis u Srbiji:

Zaključak: Astro ili Next.js za vaš sajt?

Postoji jedno pitanje koje razrešava skoro svaki slučaj: da li vaša stranica prikazuje sadržaj ili radi nešto. Ako prikazuje, idite na Astro. Ako radi, idite na Next.js.

Granica nije uvek čista i to je u redu. Prezentacioni sajt kojem za godinu treba zakazivanje termina i korisnički nalozi je od početka Next.js posao, ne Astro. Isto tako, prodavnica od dvanaest proizvoda bez naloga i bez stanja lager liste je Astro posao. Zato pitamo šta sajt treba da radi za dve godine, ne samo na dan predaje.