Practice

(1/5)

1. What is the main benefit of using incremental builds in Astro projects?

easy

A. Only pages with changed data are rebuilt, saving time

B. All pages are rebuilt every time for consistency

C. It disables data fetching during build

D. It automatically deploys the site to a server

Solution

Step 1: Understand incremental build purpose
Incremental builds focus on rebuilding only what changed, not the whole site.
Step 2: Identify the benefit in context
This saves build time and speeds up development and deployment.
Final Answer:
Only pages with changed data are rebuilt, saving time -> Option A
Quick Check:
Incremental builds = rebuild changed pages only [OK]

Hint: Incremental means update only changed parts [OK]

Common Mistakes:

Thinking all pages rebuild every time
Confusing incremental builds with disabling data fetching
Assuming it automatically deploys the site

2. Which Astro function is used to specify which pages should be built incrementally with data?

easy

A. useEffect

B. getServerSideProps

C. renderToString

D. getStaticPaths

Solution

Step 1: Recall Astro data fetching functions
Astro uses getStaticPaths to define dynamic routes for static generation.
Step 2: Match function to incremental build role
getStaticPaths tells Astro which pages to build incrementally with data.
Final Answer:
getStaticPaths -> Option D
Quick Check:
Page list for incremental build = getStaticPaths [OK]

Hint: Use getStaticPaths to list pages for static build [OK]

Common Mistakes:

Confusing getStaticPaths with getServerSideProps
Using React hooks like useEffect in Astro build functions
Thinking renderToString controls incremental builds

3. Given this Astro code snippet, what will be the output for the page paths?

export async function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ];
}

medium

A. No pages will be built because return type is wrong

B. Only page /1 will be built

C. Pages for /1 and /2 will be built incrementally

D. Pages for /id/1 and /id/2 will be built

Solution

Step 1: Analyze getStaticPaths return value
The function returns an array with params objects containing id '1' and '2'.
Step 2: Understand path generation
Astro uses these params to build pages at /1 and /2 paths incrementally.
Final Answer:
Pages for /1 and /2 will be built incrementally -> Option C
Quick Check:
Params id '1' and '2' create /1 and /2 pages [OK]

Hint: Params define page paths directly [OK]

Common Mistakes:

Assuming only first param builds a page
Thinking return type must be an object, not array
Confusing path format with nested folders

4. Identify the error in this Astro incremental build code snippet:

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

medium

A. getStaticPaths must return an array, not an object

B. Params should be a string, not an array

C. Function must be synchronous, not async

D. Return value should be a function, not an object

Solution

Step 1: Check getStaticPaths return type
Astro expects getStaticPaths to return an array of params objects, not an object wrapping an array.
Step 2: Identify correct return structure
The code incorrectly returns an object with params array instead of just the array.
Final Answer:
getStaticPaths must return an array, not an object -> Option A
Quick Check:
Return type must be array for getStaticPaths [OK]

Hint: Return array directly from getStaticPaths [OK]

Common Mistakes:

Wrapping params array inside an object
Making function synchronous when async is allowed
Returning a function instead of data

5. You want to build a blog with incremental builds in Astro. You fetch posts from an API and want only new or updated posts to rebuild. Which approach correctly implements this?

hard

A. Use getStaticProps only once to fetch all posts and build all pages at once

B. Use getStaticPaths to list all post IDs, then getStaticProps to fetch data for each ID

C. Use client-side fetching only, no static generation

D. Manually rebuild the entire site on every post update

Solution

Step 1: Understand incremental build with data fetching
Incremental builds require listing pages (post IDs) with getStaticPaths and fetching data per page with getStaticProps.
Step 2: Match approach to requirement
Use getStaticPaths to list all post IDs, then getStaticProps to fetch data for each ID uses getStaticPaths to specify posts and getStaticProps to fetch each post's data, enabling incremental rebuilds.
Final Answer:
Use getStaticPaths to list all post IDs, then getStaticProps to fetch data for each ID -> Option B
Quick Check:
Incremental builds = getStaticPaths + getStaticProps [OK]

Hint: List pages then fetch data per page for incremental builds [OK]

Common Mistakes:

Fetching all posts at once disables incremental builds
Relying only on client-side fetching loses static benefits
Rebuilding entire site wastes time and defeats incremental purpose

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full rebuild on data change	N/A (build time only)	N/A	Delays initial paint	[X] Bad
Incremental build with data tracking	N/A (build time only)	N/A	Faster initial paint due to quicker build	[OK] Good

Incremental builds with data in Astro - Performance & Optimization

Practice

Solution

Step 1: Understand incremental build purpose

Step 2: Identify the benefit in context

Final Answer:

Quick Check:

Solution

Step 1: Recall Astro data fetching functions

Step 2: Match function to incremental build role

Final Answer:

Quick Check:

Solution

Step 1: Analyze getStaticPaths return value

Step 2: Understand path generation

Final Answer:

Quick Check:

Solution

Step 1: Check getStaticPaths return type

Step 2: Identify correct return structure

Final Answer:

Quick Check:

Solution

Step 1: Understand incremental build with data fetching

Step 2: Match approach to requirement

Final Answer:

Quick Check:

Ready to prove it?