Skip to main content
Argentista is a server-side rendered web app built on Astro 5 with interactive React 19 islands. Astro renders the HTML shell on the server; React components hydrate on the client to fetch live data and render charts.

​
High-level architecture

┌─────────────────────────────────────────────────────────┐
│                        Vercel                           │
│                                                         │
│  ┌─────────────┐    SSR HTML    ┌────────────────────┐  │
│  │  Astro SSR  │ ─────────────▶ │   Browser / Client │  │
│  │  (server)   │                │                    │  │
│  └──────┬──────┘                │  React islands     │  │
│         │                       │  hydrate with      │  │
│         │ renders layout        │  client:load       │  │
│         ▼                       └────────┬───────────┘  │
│  ┌─────────────┐                         │              │
│  │  .astro     │                         │ fetch()      │
│  │  page files │                         ▼              │
│  └─────────────┘              ┌──────────────────────┐  │
│                               │   External APIs      │  │
│                               │  • ArgentinaDatos    │  │
│                               │  • DolarAPI          │  │
│                               └──────────────────────┘  │
└─────────────────────────────────────────────────────────┘

​
Astro + React: island architecture

Astro uses an island architecture: the page is mostly static HTML, and React components are selectively hydrated where interactivity is needed. You add the client:load directive to a component to tell Astro to ship its JavaScript to the browser and hydrate it immediately on page load. 
<!-- Astro renders the shell; React hydrates the component -->
<InflationCalculator client:load />
<CurrencyConverter client:load />
This means:
  • Initial HTML is fast — Astro sends pre-rendered markup before any JavaScript runs.
  • Only interactive components ship JS — static sections have zero client-side overhead.
  • Each island is independent — components fetch their own data and manage their own state.
All data fetching happens inside React components on the client, not in Astro server code. Astro only provides the page shell and layout.

​
Routes

RouteFileComponents rendered
/src/pages/index.astroInflationCalculator, CurrencyConverter
/inflacionsrc/pages/inflacion.astroInflationGraph, InflationChart
/dolarsrc/pages/dolar.astroDollarPrices, DollarHistoryChart
Each page is an .astro file that imports and mounts its React components with client:load.

​
External data dependencies

ArgentinaDatos

https://api.argentinadatos.com — provides historical inflation indices (CPI) and historical dollar exchange rate data (cotizaciones).

DolarAPI

https://dolarapi.com — provides live dollar prices (compra/venta) for all exchange rate types: oficial, blue, MEP, CCL, crypto, tarjeta, and mayorista.
Neither API requires authentication. All requests are made directly from the browser via fetch().

​
Header and navigation

The Header.astro component is shared across all pages via the layout and persists across client-side navigations (using Astro’s transition:persist). It contains:
  • Navigation links — Inicio (/), Dólar (/dolar), and Inflación (/inflacion), with the current route highlighted.
  • Live dollar ticker — a scrolling marquee bar below the nav that shows real-time buy/sell prices for every dollar type. The ticker fetches live data from https://dolarapi.com/v1/dolares server-side at render time (inside the .astro frontmatter), meaning the prices are baked into the SSR HTML on each request.
The ticker data is fetched server-side in the Astro component, unlike the React component data which is fetched client-side. This means the ticker reflects prices at the time Vercel rendered the page, not continuously updated in the browser.

​
Deployment

Argentista deploys to Vercel using the @astrojs/vercel SSR adapter. Vercel runs the Astro server function, handles routing, and serves static assets from its CDN. Vercel Analytics and Speed Insights are enabled, injecting lightweight tracking scripts into every page. 
astro check && astro build
The build command type-checks the project before bundling. The output is a Vercel-compatible server function plus static assets.
See Data flow for a step-by-step walkthrough of how a page loads and data reaches the UI, and Tech stack for details on every dependency.

Build docs developers (and LLMs) love

Get started for freeTalk to us