Astroframework~8 mins

Why data fetching happens at build time in Astro - Performance Evidence

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Performance: Why data fetching happens at build time

HIGH IMPACT

This affects the page load speed by preloading data before the user requests the page, reducing runtime delays.

Loading data for a webpage

Astro

---
// Fetches data once at build time (static by default)
const res = await fetch('https://api.example.com/data');
const data = await res.json();
---

<html>
  <body>
    <div>{data.title}</div>
  </body>
</html>

Data is fetched once at build time, so pages load instantly with pre-rendered content.

📈 Performance GainReduces LCP by serving static content, no runtime data fetching needed.

Loading data for a webpage

Astro

---
// Fetches data on every request in SSR mode
const res = await fetch('https://api.example.com/data');
const data = await res.json();
---

<html>
  <body>
    <div>Loading...</div>
  </body>
</html>
// Note: Configure output: 'server' in astro.config.mjs for SSR

Fetching data on every request delays page rendering and increases server load.

📉 Performance CostBlocks rendering for each request, increasing LCP and server response time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Runtime data fetching (SSR)	Same DOM nodes	Multiple reflows possible due to loading states	Higher paint cost due to delayed content	[X] Bad
Build time data fetching (Static)	Same DOM nodes	Single reflow with full content	Lower paint cost with immediate content	[OK] Good

Rendering Pipeline

Data fetching at build time happens before the browser requests the page, so the server sends fully rendered HTML immediately.

→HTML Generation

→Network

→Paint

⚠️ BottleneckNetwork and server response during runtime data fetching

Core Web Vital Affected

LCP

This affects the page load speed by preloading data before the user requests the page, reducing runtime delays.

Optimization Tips

1Fetch data at build time to serve fully rendered pages quickly.

2Avoid runtime data fetching to reduce delays and improve LCP.

3Use static rendering when data changes infrequently for best performance.

Performance Quiz - 3 Questions

Test your performance knowledge

How does fetching data at build time affect page load speed?

AIt improves load speed by serving pre-rendered content.

BIt slows down load speed by adding extra runtime requests.

CIt has no effect on load speed.

DIt increases the number of runtime reflows.

DevTools: Performance

How to check: Record a page load and look for network requests and time to first contentful paint.

What to look for: Long delays or multiple data fetches indicate runtime fetching; fast paint with minimal network calls indicates build time fetching.