0
0
Astroframework~5 mins

Incremental builds with data in Astro

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Incremental builds with data let your website update only the parts that changed. This saves time and makes your site faster to build and load.

When your site has many pages but only some data changes often.
When you want faster updates without rebuilding the whole site.
When you fetch data from APIs or databases and want to keep content fresh.
When you want to save server resources during builds.
When you want to improve developer experience by reducing wait times.
Syntax
Astro
export async function getStaticPaths() {
  const data = await fetchData()
  return data.map(item => ({ params: { id: item.id } }))
}

export async function getStaticProps({ params }) {
  const itemData = await fetchDataById(params.id)
  return { props: { itemData } }
}

getStaticPaths tells Astro which pages to build based on your data.

getStaticProps fetches data for each page during build time.

Examples
This example builds pages only for ids 1 and 2 with simple messages.
Astro
export async function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ]
}

export async function getStaticProps({ params }) {
  return { props: { message: `Page for id ${params.id}` } }
}
This example fetches blog posts from an API and builds pages for each post slug.
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 getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json())
  return { props: { post } }
}
Sample Program

This Astro component builds two pages: one for id 'a' and one for 'b'. Each page shows its own title and content. Only these pages are built, saving time.

Astro
---
export async function getStaticPaths() {
  return [
    { params: { id: 'a' } },
    { params: { id: 'b' } }
  ]
}

export async function getStaticProps({ params }) {
  const data = {
    a: { title: 'Page A', content: 'Content for A' },
    b: { title: 'Page B', content: 'Content for B' }
  }
  return { props: { page: data[params.id] } }
}
---
<html lang="en">
  <head><title>{page.title}</title></head>
  <body>
    <h1>{page.title}</h1>
    <p>{page.content}</p>
  </body>
</html>
OutputSuccess
Important Notes

Incremental builds only rebuild pages with changed data, making builds faster.

Use getStaticPaths to control which pages get built.

Make sure your data fetching in getStaticProps is fast and reliable.

Summary

Incremental builds update only needed pages, saving time.

Use getStaticPaths and getStaticProps to fetch data for pages.

This approach improves site speed and developer experience.