Static vs server-side data fetching in Astro - Performance Comparison

Performance: Static vs server-side data fetching

HIGH IMPACT

This concept affects how fast the main content appears and how quickly the page responds to user interactions.

Fetching data for a blog post page

Astro

---
export const prerender = true;
const res = await fetch('https://api.example.com/posts/1');
const post = await res.json();
---

<article>{post.title}</article>

Data is fetched at build time, so the page is served instantly without waiting for API calls.

📈 Performance GainReduces LCP by 200-500ms and lowers server CPU usage.

Fetching data for a blog post page

Astro

---
export const prerender = false;
const res = await fetch('https://api.example.com/posts/1');
const post = await res.json();
---

<article>{post.title}</article>

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

📉 Performance CostBlocks rendering until data arrives, increasing LCP by 200-500ms depending on API speed.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Static data fetching	Minimal - pre-built DOM	0 on load	Fast paint with ready HTML	[OK] Good
Server-side data fetching	Minimal but delayed DOM creation	0 on load but delayed	Paint delayed until data arrives	[X] Bad

Rendering Pipeline

Static data fetching pre-renders HTML with data, so the browser receives ready content. Server-side fetching waits for data during request, delaying HTML delivery.

→HTML Generation

→Network

→First Paint

⚠️ BottleneckServer-side data fetching delays HTML generation, increasing time to first byte.

Core Web Vital Affected

LCP

This concept affects how fast the main content appears and how quickly the page responds to user interactions.

Optimization Tips

1Use static data fetching for content that changes rarely to speed up page load.

2Avoid server-side fetching if it causes noticeable delays in HTML delivery.

3Choose server-side fetching when data freshness is critical despite slower load.

Performance Quiz - 3 Questions

Which data fetching method usually results in faster initial page load?

A Server-side fetching on every request

B Static data fetching at build time

C Client-side fetching after page load

D Fetching data with a delay timer

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe the time to first byte (TTFB) and content download time.

What to look for: Long TTFB indicates server-side fetching delay; fast TTFB with immediate HTML means static fetching.