Studiu de caz02 / 06

GoodAntShop

Magazin de furnicare · RU/RO/EN

Mica mea afacere și site-ul care vinde pentru ea. Vând colonii de furnici, furnicare și accesorii, iar site-ul mai are un blog și un atlas al speciilor de furnici din Moldova.

Rol: Proprietar · design și full-stack
Perioadă: mai 2026 – prezent
Context: Produs propriu
Format: Singur · Chișinău

React 18
Vite
React Router
SSR prerender
react-helmet-async
Leaflet
Vercel serverless
Resend
sharp

Deschide site-ulgoodantshop.md Codul pe GitHub

Pagina principală GoodAntShop pe un ecran de desktop

Pagina principală GoodAntShop pe telefon

Sarcina

Un magazin pentru un produs de nișă depinde de căutare. O aplicație React doar pe client îi dă lui Google un HTML gol, iar trecerea pe un framework complet ar fi fost prea mult pentru 11 produse și un blog. Așa că scopul a fost să păstrez stack-ul simplu React + Vite și totuși să servesc HTML complet, indexabil, în trei limbi.

HTML real pe fiecare rută, cu title, canonical, hreflang și Open Graph proprii
Comenzi fără server de backend și fără bază de date
Conținut care răspunde la întrebările începătorilor despre îngrijire, specii și alegerea furnicarului

Ce am construit

Fluxul de prerandare

Build-ul are trei pași. Întâi bundle-ul de client, apoi bundle-ul SSR, apoi scripts/prerender.mjs.
Fiecare dintre cele 66 de rute (22 de pagini × 3 limbi) este randată cu renderToString și StaticRouter și scrisă în propriul index.html. Build-ul eșuează dacă o rută iese goală.
Fiecare rută primește title, description, canonical, hreflang (ru / ro / en + x-default) și taguri og:* cu localizarea corectă.
Imaginile Open Graph sunt generate cu sharp la 1200×630. sitemap.xml cu alternative hreflang se construiește din aceeași listă de rute, iar pagina 404 statică există în trei limbi.
Pe client, hydrateRoot preia markupul prerandat. Coșul se citește abia după montare, așa că prima randare coincide cu HTML-ul de pe server.

Magazinul

Catalog de furnici, furnicare și accesorii cu opțiuni. Coșul se păstrează în localStorage.
Comenzile trec printr-o funcție serverless pe Vercel. Ea validează și escapează HTML-ul comenzii, apoi trimite o notificare pe email prin API-ul Resend.
Harta speciilor rulează pe Leaflet și se încarcă la cerere. Acoperă 6 zone ale Moldovei, are vizualizare pe specie și pentru toate speciile și trimite la speciile din stoc.
Articole pe blog și întrebări frecvente scrise pentru începători.

Rezultat

în Google pentru „cumpăr furnici” în Moldova (oct. 2026): Top 1–2
de rute prerandate: 66
limbi, legate prin hreflang: 3

Magazinul funcționează ca afacerea mea, iar codul sursă este public pe GitHub.

Arhitectura SEO

O singură listă de rute alimentează prerandarea, sitemap-ul și hreflang-ul, așa că nu se pot desincroniza.
Fiecare pagină are un @graph JSON-LD cu Organization, WebSite, BreadcrumbList, ItemList, Product cu Offer, detalii de livrare și politica de retur, FAQPage, BlogPosting și VideoObject.
AggregateRating și Review apar doar acolo unde produsul are recenzii proprii.
Meta tagurile există doar în HTML-ul prerandat, așa că hidratarea nu le dublează niciodată.
Paginile coșului sunt noindex și blocate în robots.txt. Resursele statice se păstrează în cache un an ca immutable.