Static vs server-side data fetching in Astro - Hands-On Comparison

Static vs Server-side Data Fetching in Astro

📖 Scenario: You are building a simple Astro website that shows a list of books. Some data will be fetched at build time (static), and some data will be fetched on each request (server-side).

🎯 Goal: Create an Astro component that fetches a static list of books at build time and also fetches the current date and time on each request using server-side data fetching.

📋 What You'll Learn

Create a static data array of books in the component

Create a server-side function to fetch the current date and time

Display the static books list in the page

Display the server-side fetched date and time in the page

💡 Why This Matters

🌍 Real World

Websites often need to show some data that never changes (static) and some data that updates every time a user visits (server-side).

💼 Career

Understanding static vs server-side data fetching is key for building fast, dynamic websites with frameworks like Astro.

1

Create static book data

In your Astro component, create a constant called books that is an array with these exact objects: { title: 'The Hobbit', author: 'J.R.R. Tolkien' } and { title: '1984', author: 'George Orwell' }.

Astro

# Your code here

Hint

Use const books = [ ... ] with the exact objects inside the array.

2

Add server-side data fetching function

Add an export async function get({ params }) that returns an object with a props property containing the current date and time as currentTime using new Date().toISOString().

Astro

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' }
];

// Add server-side data fetching function below

Hint

Define export async function get() that returns { props: { currentTime: new Date().toISOString() } }.

3

Display static books list in the component

Inside the component's HTML, use a {books.map((book) => ( ... ))} expression to create a <li> for each book showing the book's title and author.

Astro

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' }
];

export async function get() {
  return {
    props: {
      currentTime: new Date().toISOString()
    }
  };
}


  {/* Render books list here */}
  # Your code here

Hint

Use {books.map((book) => ( ... ))} to create list items inside the <ul>.

4

Display server-side fetched current time

Add a <p> below the books list that shows the text Current time: followed by the currentTime prop value.

Astro

const books = [
  { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { title: '1984', author: 'George Orwell' }
];

export async function get() {
  return {
    props: {
      currentTime: new Date().toISOString()
    }
  };
}


  {books.map((book) => (
    {book.title} by {book.author}
  ))}



# Your code here

Hint

Use a paragraph tag with Current time: {currentTime} to show the server-side data.