Server endpoints (API routes) in Astro

Introduction

Server endpoints let your website talk to the server to get or send data. They help your site work with databases, forms, or other services.

When you want to save form data from a user to a database.

When you need to fetch data from a server to show on your page.

When you want to create a login system that checks user info.

When you want to connect your site to other apps or services.

When you want to handle background tasks like sending emails.

Syntax

Astro

export async function GET(context) {
  // handle GET request
  return new Response('Hello from GET!');
}

export async function POST(context) {
  // handle POST request
  const data = await context.request.json();
  return new Response(JSON.stringify({ message: 'Data received', data }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Each HTTP method (GET, POST, etc.) is a separate exported async function.

The context object gives you access to the request and other info.

Examples

This endpoint responds to GET requests with a simple text message.

Astro

export async function GET() {
  return new Response('Hello World');
}

This endpoint reads JSON data sent in a POST request and sends it back in the response.

Astro

export async function POST({ request }) {
  const data = await request.json();
  return new Response(JSON.stringify({ received: data }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

This GET endpoint returns JSON data instead of plain text.

Astro

export async function GET() {
  const data = { message: 'Server endpoint working!' };
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Sample Program

This POST endpoint receives JSON data with a user's name, then replies with a greeting message in JSON format.

Astro

export async function POST({ request }) {
  const userData = await request.json();
  const name = userData.name ?? 'Guest';
  const responseMessage = `Hello, ${name}! Your data was received.`;
  return new Response(JSON.stringify({ message: responseMessage }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Important Notes

Always set the correct Content-Type header in your responses.

Use await request.json() to read JSON data sent by the client.

Endpoints can handle different HTTP methods by exporting functions named after them.

Summary

Server endpoints let your site handle requests and send back data.

Each HTTP method (GET, POST, etc.) is a separate function you export.

Use the context or request object to read incoming data.

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