Fetching APIs in frontmatter in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is frontmatter in Astro?

Frontmatter is a special section at the top of an Astro file where you write JavaScript or TypeScript code. It runs before the page renders and is used to fetch data or set variables.

beginner

How do you fetch data from an API in Astro frontmatter?

You use the fetch() function inside the frontmatter script block to get data from an API. Then you can use that data in your component.

intermediate

Why fetch API data in frontmatter instead of inside the component?

Fetching in frontmatter happens at build time or server-side, so the page loads faster and the data is ready when the page renders. It also helps SEO and avoids loading spinners.

beginner

What does this Astro frontmatter code do?
<pre>---
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---</pre>

It fetches data from 'https://api.example.com/data' and converts the response to JSON format. The data variable holds the API data for use in the page.

intermediate

How can you handle errors when fetching APIs in Astro frontmatter?

You can use try-catch blocks around the fetch call to catch errors. This way, you can show fallback content or handle the error gracefully.

Where do you write API fetch code in Astro to run before rendering?

A Inside the frontmatter script block

B Inside the HTML template

C In a separate CSS file

D In a client-side JavaScript file only

API fetch code runs in the frontmatter script block before the page renders.

What does await fetch(url) do in Astro frontmatter?

A Sends data to the server

B Fetches data from the URL asynchronously

C Blocks the page from loading

D Creates a new HTML element

It fetches data from the URL asynchronously and waits for the response.

Why is fetching API data in frontmatter good for SEO?

A Because it delays page rendering

B Because it hides the data from search engines

C Because data is ready when the page loads

D Because it uses client-side JavaScript

Data is ready at page load, so search engines see full content immediately.

How do you convert a fetch response to JSON in Astro frontmatter?

A Using <code>response.text()</code>

B Using <code>JSON.parse(response)</code>

C Using <code>response.toString()</code>

D Using <code>response.json()</code>

The response.json() method parses the response body as JSON.

What is a good way to handle fetch errors in Astro frontmatter?

A Use try-catch blocks around fetch calls

B Ignore errors and continue

C Use CSS to hide errors

D Fetch data twice to avoid errors

Try-catch blocks let you catch and handle errors gracefully.

Explain how to fetch data from an API in Astro frontmatter and use it in your page.

Think about the steps from fetching to displaying data.

Describe why fetching API data in frontmatter improves page performance and SEO.

Consider what happens when data is ready early.