Server endpoints (API routes) in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a server endpoint (API route) in Astro?

A server endpoint in Astro is a special file that handles HTTP requests like GET or POST. It acts like a door where the server listens and responds with data or actions.

beginner

How do you define a GET endpoint in Astro?

You create a file with an exported function named GET that takes a request and returns a Response object. Astro runs this function when a GET request hits that route.

beginner

What is the purpose of returning a Response object in Astro endpoints?

The Response object tells the browser what to show or do. It includes status codes, headers, and the body content like JSON or text.

intermediate

How can you handle different HTTP methods in Astro endpoints?

You export functions named after HTTP methods like GET, POST, PUT, DELETE. Astro calls the matching function based on the request method.

intermediate

Why use server endpoints instead of client-side fetching in Astro?

Server endpoints keep sensitive logic or keys safe on the server. They also reduce client load and can pre-process data before sending it to the browser.

In Astro, what does an exported GET function inside an endpoint file do?

A Handles GET requests to that route

B Renders a UI component

C Defines client-side navigation

D Creates a database connection

The exported GET function handles incoming GET requests for that API route.

What should an Astro server endpoint return to send data back to the client?

A A JSON object directly

B A React component

C An HTML string

D A Response object

Astro endpoints return a Response object which can contain JSON, text, or other data formats.

Which HTTP method function would you export to handle form submissions in Astro?

A PUT

B GET

C POST

D DELETE

POST is commonly used for form submissions and data creation.

Why might you prefer server endpoints over client-side fetching in Astro?

A To keep secrets safe on the server

B To make the UI load slower

C To avoid using JavaScript

D To disable user interaction

Server endpoints keep sensitive data and logic hidden from the client.

Where do you place server endpoint files in an Astro project?

A In the public folder

B In the src/pages/api folder

C In the components folder

D In the styles folder

Astro uses the src/pages/api folder for server endpoints.

Explain how to create a simple GET server endpoint in Astro and what it returns.

Think about how the server listens and sends back data.

Describe the benefits of using server endpoints in Astro compared to fetching data directly on the client.

Consider what should stay hidden from the browser.

Practice

1. What is the main purpose of a server endpoint in Astro?

easy

A. To manage client-side routing

B. To style the website pages

C. To handle incoming HTTP requests and send responses

D. To store user data permanently

Solution

1. Step 1: Understand what server endpoints do

   Server endpoints are designed to receive requests from clients and send back data or responses.

2. Step 2: Differentiate from other roles

   Styling, client routing, and data storage are handled elsewhere, not by server endpoints.

3. Final Answer:

   To handle incoming HTTP requests and send responses -> Option C

4. Quick Check:

   Server endpoints = handle requests [OK]

Hint: Endpoints handle requests and responses, not styling or routing [OK]

Common Mistakes:

• Confusing endpoints with client-side routing
• Thinking endpoints style pages
• Assuming endpoints store data permanently

2. Which of the following is the correct way to export a GET handler in an Astro server endpoint?

easy

A. function get() { return 'Hello' }

B. export async function GET(context) { return new Response('Hello') }

C. export function get() { return 'Hello' }

D. export async GET() { return 'Hello' }

Solution

1. Step 1: Recall Astro endpoint syntax

   Astro expects exported async functions named by HTTP method in uppercase, e.g., GET.

2. Step 2: Check function signature and export

   export async function GET(context) { return new Response('Hello') } correctly exports an async function named GET with a context parameter and returns a Response object.

3. Final Answer:

   export async function GET(context) { return new Response('Hello') } -> Option B

4. Quick Check:

   Export async uppercase method function = export async function GET(context) { return new Response('Hello') } [OK]

Hint: Export async functions named GET/POST in uppercase for endpoints [OK]

Common Mistakes:

• Using lowercase function names
• Not exporting the function
• Missing async keyword
• Returning string instead of Response object

3. Given this Astro endpoint code, what will be the response body when a GET request is made?

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hi' }), { headers: { 'Content-Type': 'application/json' } })
}

medium

A. undefined

B. Hi

C. Error: Missing context parameter

D. {"message":"Hi"}

Solution

1. Step 1: Analyze the returned Response object

   The function returns a Response with JSON stringified object { message: 'Hi' } and content-type application/json.

2. Step 2: Determine response body content

   The response body will be the JSON string: {"message":"Hi"} exactly as stringified.

3. Final Answer:

   "{\"message\":\"Hi\"}" -> Option D

4. Quick Check:

   JSON.stringify output = {"message":"Hi"} [OK]

Hint: JSON.stringify returns string, so response body is JSON text [OK]

Common Mistakes:

• Expecting plain text 'Hi' instead of JSON string
• Confusing response body with object
• Thinking context parameter is mandatory

4. What is wrong with this Astro endpoint code?

export function POST(request) {
  const data = await request.json();
  return new Response('Received');
}

medium

A. The function must be async to use await

B. POST should be lowercase

C. request.json() is not a valid method

D. Response must be an object, not a string

Solution

1. Step 1: Check async usage with await

   The function uses await but is not declared async, causing a syntax error.

2. Step 2: Verify other parts

   POST must be uppercase and exported, request.json() is valid, and Response can take a string body.

3. Final Answer:

   The function must be async to use await -> Option A

4. Quick Check:

   Use async with await = The function must be async to use await [OK]

Hint: Use async keyword when using await inside functions [OK]

Common Mistakes:

• Forgetting async keyword with await
• Using lowercase HTTP method names
• Misunderstanding request.json() availability

5. You want to create an Astro server endpoint that accepts a POST request with JSON data containing a "name" field, and responds with a JSON greeting like { "greeting": "Hello, name!" }. Which code snippet correctly implements this?

hard

A. export async function POST({ request }) {
const data = await request.json();
return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } });
}

B. export function POST(request) {
const data = request.json();
return new Response({ greeting: 'Hello, ' + data.name + '!' });
}

C. export async function POST(request) {
const data = await request.text();
return new Response(JSON.stringify({ greeting: 'Hello, ' + data + '!' }));
}

D. export async function POST() {
return new Response(JSON.stringify({ greeting: 'Hello!' }));
}

Solution

1. Step 1: Check correct async POST function with destructured request

   export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } correctly exports async POST with { request } destructured to access request.json().

2. Step 2: Verify JSON parsing and response format

   export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } awaits request.json(), extracts name, and returns JSON response with proper headers.

3. Final Answer:

   export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } -> Option A

4. Quick Check:

   Async POST with request.json() and JSON response = export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } [OK]

Hint: Use async POST with await request.json() and JSON response headers [OK]

Common Mistakes:

• Not awaiting request.json()
• Returning Response with object instead of string
• Missing Content-Type header for JSON
• Not destructuring request parameter