Skip to main content
This page traces the path data takes from an external API to the rendered UI, including how loading states, errors, and computed values are handled.

​
Page load sequence

1

User requests a route

The browser sends an HTTP request to Vercel. The @astrojs/vercel SSR adapter invokes the Astro server function for the matching route.
2

Astro renders the HTML shell

Astro evaluates the .astro page file on the server, generates the HTML layout and static markup, and sends it to the browser. React component markup is included as empty placeholders at this stage.
3

Browser receives HTML and loads scripts

The browser parses the HTML and downloads the JavaScript bundles for any component marked client:load.
4

React islands hydrate

React mounts each component into its placeholder DOM node. Each component initialises its own state — typically data: null, loading: true, error: null.
5

useEffect triggers API fetch

On mount, each component’s useEffect hook fires and calls fetch() against the relevant external API endpoint.
6

Response parsed and stored in state

When the API responds, the component calls setData() with the parsed JSON, sets loading: false, and React re-renders with the live data.
7

Charts and tables render

Chart.js (via react-chartjs-2) and table components receive the data as props and render the final interactive UI.

​
Independent component fetching

Each React island fetches its own data independently. There is no shared data layer or global store. A typical component looks like this: 
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch('https://api.argentinadatos.com/v1/finanzas/indices/inflacion');
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const json = await res.json();
      setData(json);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);
This pattern is repeated across all data-fetching components. The empty dependency array [] ensures the fetch runs once on mount.

​
Error handling

Every component wraps its fetch logic in a try/catch block:
  • Network errors (no connection, DNS failure) are caught and stored in error state.
  • HTTP errors (4xx, 5xx) are detected by checking res.ok and throwing explicitly.
  • Parsing errors (malformed JSON) are also caught by the same catch block.
When error is non-null, the component renders an error message instead of the data UI. This prevents blank or broken layouts when an API is unavailable.
Error boundaries are not used at the React tree level. Each component handles its own errors locally, so one failing component does not affect others on the same page.

​
Loading states

While loading is true, components render a placeholder UI rather than an empty container. Depending on the component:
  • Skeleton loaders — placeholder blocks that match the shape of the final content (tables, cards).
  • Spinners — animated indicators for charts that take longer to render.
This prevents layout shift and gives users immediate visual feedback that data is on its way.

​
Inflation calculator formula

The InflationCalculator component fetches the monthly CPI series from ArgentinaDatos and computes the real purchasing-power change between two user-selected dates. The API returns each month’s CPI as a percentage change (e.g., 20.6 means prices rose 20.6% that month). To get the cumulative change across a range, the component multiplies together the monthly inflation factors for every month in the selected range: 
inflationFactor = (1 + r₁/100) × (1 + r₂/100) × … × (1 + rₙ/100)
adjustedAmount  = initialAmount × inflationFactor
totalInflation  = (inflationFactor − 1) × 100
Where each r is the valor field for that month in the API response. The annualized and average monthly rates are then derived: 
annualizedInflation    = (1 + totalInflation/100)^(12/months) − 1
avgMonthlyInflation    = (1 + annualizedInflation)^(1/12) − 1
The component:
  1. Fetches the full monthly series once on mount and sorts it by date.
  2. Slices the array to the months between the user’s selected start and end dates.
  3. Applies the compound multiplication above using Array.reduce.
  4. Recalculates reactively whenever the user changes the amount or date fields (via useCallback).
Each valor in the API response is a month-over-month percentage change, not a cumulative index level. The compound product formula is required to get the correct total inflation across multiple months.

​
API endpoints used

ComponentAPIEndpoint
InflationCalculatorArgentinaDatos/v1/finanzas/indices/inflacion
InflationGraph / InflationChartArgentinaDatos/v1/finanzas/indices/inflacion
DollarPricesDolarAPI/v1/dolares
DollarHistoryChartArgentinaDatos/v1/cotizaciones/dolares/{casa}

Build docs developers (and LLMs) love

Get started for freeTalk to us