Static vs server-side data fetching in Astro - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data at build time using Astro's static data fetching.

Astro

export async function getStaticPaths() {
  const response = await fetch('[1]');
  const data = await response.json();
  return { paths: data.items };
}

Drag options to blanks, or click blank then click option'

A'/local/data.json'

B'/api/data'

C'https://example.com/data.json'

D'/server/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using server-only API routes which are not available at build time.

Using relative paths that don't exist during build.

Static data fetching uses external URLs or local files available at build time. Here, a full URL is needed.

2fill in blank

medium

Complete the code to fetch data on each request using Astro's server-side data fetching.

Astro

export async function get({ params }) {
  const response = await fetch('[1]');
  const data = await response.json();
  return { body: JSON.stringify(data) };
}

Drag options to blanks, or click blank then click option'

A'/build/data.json'

B'/static/data.json'

C'/local/data.json'

D'https://api.example.com/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using static file paths that don't update per request.

Using build-time URLs for server-side fetching.

Server-side data fetching happens on each request, so it can call dynamic APIs like external endpoints.

3fill in blank

hard

Fix the error in this Astro component to correctly fetch data server-side.

Astro

---
const response = await fetch('[1]');
const data = await response.json();
---
<h1>{data.title}</h1>

Drag options to blanks, or click blank then click option'

A'https://api.example.com/data'

B'/build/data.json'

C'/server/data.json'

D'/static/data.json'

Attempts:

3 left

💡 Hint

Common Mistakes

Using static file paths that cause 404 errors during server-side rendering.

Using build-only paths that don't exist at runtime.

Server-side fetch in Astro components must use URLs accessible at request time, like external APIs.

4fill in blank

hard

Fill both blanks to create a static data fetching function that filters items with id greater than 10.

Astro

export async function getStaticPaths() {
  const res = await fetch('[1]');
  const data = await res.json();
  return {
    paths: data.items.filter(item => item.id [2] 10)
  };
}

Drag options to blanks, or click blank then click option'

A'https://example.com/data.json'

B'/api/data'

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using server-only API paths in static fetch.

Using wrong comparison operator in filter.

The static fetch uses a full URL, and the filter checks for ids greater than 10 using >.

5fill in blank

hard

Fill all three blanks to create a server-side fetch that returns JSON with only active users.

Astro

export async function get() {
  const res = await fetch('[1]');
  const users = await res.json();
  const activeUsers = users.filter(user => user.[2] === [3]);
  return {
    body: JSON.stringify(activeUsers)
  };
}

Drag options to blanks, or click blank then click option'

A'https://api.example.com/users'

Bstatus

C'active'

DisActive

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names for filtering.

Using static file paths instead of API URLs.

The server fetch calls the API URL, filters users by 'status' equal to 'active', and returns JSON.