Case study02 / 06

GoodAntShop

Ant-farm store · RU/RO/EN

My own small business and the site that sells for it. I sell ant colonies, formicaria and accessories, and the site also has a blog and an atlas of the ant species found in Moldova.

Role
Owner · design and full-stack
Period
May 2026 – present
Context
Own product
Format
Solo · Chișinău
  • React 18
  • Vite
  • React Router
  • SSR prerender
  • react-helmet-async
  • Leaflet
  • Vercel serverless
  • Resend
  • sharp
GoodAntShop home page on a desktop screen
GoodAntShop home page on a phone

The task

A shop for a niche product depends on search. A client-only React app gives Google empty HTML, and moving to a full framework would have been too much for 11 products and a blog. So the goal was to keep the simple React + Vite stack and still serve complete, indexable HTML in three languages.

  • Real HTML on every route, with its own title, canonical, hreflang and Open Graph
  • Orders without running a backend server or a database
  • Content that answers beginners’ questions about care, species and which formicarium to choose

What I built

Prerender pipeline

  • The build runs in three steps. First the client bundle, then the SSR bundle, then scripts/prerender.mjs.
  • Each of the 66 routes (22 pages × 3 languages) is rendered with renderToString and StaticRouter and written to its own index.html. The build fails if a route renders empty.
  • Each route gets its own title, description, canonical, hreflang (ru / ro / en + x-default) and og:* tags with the right locale.
  • Open Graph images are generated with sharp at 1200×630. sitemap.xml with hreflang alternates is built from the same route list, and there is a static 404 in three languages.
  • On the client, hydrateRoot takes over the prerendered markup. The cart is read only after mount, so the first render matches the server HTML.

Store

  • Catalog of ants, formicaria and accessories with options. The cart is kept in localStorage.
  • Orders go through a serverless function on Vercel. It validates and HTML-escapes the order, then sends an email notification through the Resend API.
  • The species map runs on Leaflet and loads on demand. It covers 6 zones of Moldova, has a per-species view and an all-species view, and links to the species in stock.
  • Blog posts and FAQ written for beginners.

Outcome

in Google for “buy ants” in Moldova (Oct 2026)
Top 1–2
prerendered routes
66
languages, linked with hreflang
3

The store runs as my own business, and the source code is public on GitHub.

SEO architecture

  • One route list drives the prerender, the sitemap and hreflang, so they can’t drift apart.
  • Every page has a JSON-LD @graph with Organization, WebSite, BreadcrumbList, ItemList, Product with Offer, shipping details and return policy, FAQPage, BlogPosting and VideoObject.
  • AggregateRating and Review appear only where a product has its own reviews.
  • Meta tags exist only in the prerendered HTML, so hydration never duplicates them.
  • Cart pages are noindex and blocked in robots.txt. Static assets are cached for a year as immutable.