Server Side vs Build Time Fetching in Astro: Key Differences and Usage

In Astro, build time fetching happens once when the site is built, embedding data directly into the static pages, while server side fetching runs on each request, allowing dynamic data updates. Build time fetching is faster for users but less flexible, whereas server side fetching offers fresh data but with more server load.

Quick Comparison

Here is a quick overview comparing server side fetching and build time fetching in Astro.

Factor	Build Time Fetching	Server Side Fetching
When it runs	During site build	On every user request
Data freshness	Static, fixed at build	Dynamic, always fresh
Performance for users	Very fast, static pages	Slower, server processes each request
Server load	Low after build	Higher, server handles each request
Use case	Content that rarely changes	Content that updates frequently
Example Astro API	getStaticPaths, Astro.fetchContent	Astro.server or API routes

Key Differences

Build time fetching in Astro happens once when you build your site. It grabs data like blog posts or product info and bakes it into the static HTML files. This means users get very fast pages because the data is already there, but if the data changes, you must rebuild the site to update it.

Server side fetching runs every time a user visits a page. The server fetches fresh data and builds the page on demand. This keeps content up-to-date without rebuilding, but it can slow down response time and increase server work.

Choosing between them depends on your needs: if your data rarely changes, build time fetching is simpler and faster. If you need live data, server side fetching is the way to go, but it requires a server environment and careful performance considerations.

Code Comparison

This example shows how to fetch data at build time in Astro using getStaticPaths and passing data to a page.

astro

export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  return posts.map(post => ({ params: { slug: post.slug } }));
}

export async function get({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json());
  return {
    props: { post }
  };
}

---

<h1>{post.title}</h1>
<p>{post.content}</p>

Output

<h1>Post Title</h1>
<p>Post content here...</p>

Server Side Equivalent

This example shows server side fetching in Astro using an API route to get fresh data on each request.

astro

import { json } from '@astrojs/http';

export async function get() {
  const post = await fetch('https://api.example.com/posts/latest').then(res => res.json());
  return json(post);
}

---

---

<script>
  import { onMount } from 'solid-js';
  let post = null;
  onMount(async () => {
    const res = await fetch('/api/post');
    post = await res.json();
  });
</script>

{post ? (
  <>
    <h1>{post.title}</h1>
    <p>{post.content}</p>
  </>
) : (
  <p>Loading...</p>
)}

Output

<h1>Latest Post Title</h1>
<p>Latest post content here...</p>

When to Use Which

Choose build time fetching when your data changes rarely and you want the fastest possible page loads with minimal server work. This is ideal for blogs, documentation, or marketing sites.

Choose server side fetching when your data updates often or must be personalized per user, such as dashboards, live feeds, or user-specific content. This requires a server environment but keeps data fresh.

Key Takeaways

Build time fetching runs once during site build and creates static pages with fixed data.

Server side fetching runs on every request, providing fresh data but with more server load.

Use build time fetching for mostly static content to maximize speed and simplicity.

Use server side fetching for dynamic or frequently changing data needing real-time updates.

Astro supports both methods, so pick based on your app’s data freshness and performance needs.