Request and response handling in Astro - Step-by-Step Execution

Concept Flow - Request and response handling

Client sends HTTP request

↓

Astro server receives request

↓

Parse request data (URL, headers, body)

↓

Run Astro route handler function

↓

Generate response (HTML, JSON, etc.)

↓

Send response back to client

↓

Client receives and renders response

This flow shows how Astro receives a request, processes it in a route handler, and sends back a response to the client.

Execution Sample

Astro

export async function GET({ request }) {
  const url = new URL(request.url);
  const name = url.searchParams.get('name') || 'Guest';
  return new Response(`Hello, ${name}!`, { status: 200 });
}

This Astro GET handler reads a query parameter 'name' and returns a greeting in the response.

Execution Table

Step	Action	Input/State	Output/Result
1	Receive GET request	Request URL: /?name=Alice	Request object created with URL and headers
2	Parse URL	request.url = 'http://localhost/?name=Alice'	Extract query parameter name='Alice'
3	Check name parameter	name='Alice'	Use 'Alice' as greeting name
4	Create Response	Body: 'Hello, Alice!'	Response object with status 200 and body
5	Send Response	Response object	Client receives 'Hello, Alice!' with status 200
6	Client renders	Response body	Page shows: Hello, Alice!

💡 Request handled and response sent back to client

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
request.url	undefined	'http://localhost/?name=Alice'	'http://localhost/?name=Alice'	'http://localhost/?name=Alice'
url.searchParams.get('name')	undefined	'Alice'	'Alice'	'Alice'
name	undefined	undefined	'Alice'	'Alice'

Key Moments - 2 Insights

Why do we use 'new URL(request.url)' inside the handler?

Because 'request.url' is a string, and we need to parse it to access query parameters easily, as shown in step 2 of the execution_table.

What happens if the 'name' parameter is missing in the URL?

The code uses '|| "Guest"' to default the name to 'Guest', so the response will greet 'Guest' instead, as would be seen if step 3 had no 'name' value.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'name' after Step 3?

A "Guest"

B "Alice"

C undefined

D null

💡 Hint

Check the 'Output/Result' column in row for Step 3 in execution_table

At which step is the response object created?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for 'Create Response' action in execution_table

If the URL was '/?name=', what would the 'name' variable be after Step 3?

A null

B "" (empty string)

C "Guest"

D undefined

💡 Hint

searchParams.get('name') returns '' (empty string) for ?name=, but '' || 'Guest' evaluates to 'Guest' since empty string is falsy

Concept Snapshot

Astro request handling:
- Export async GET/POST functions
- Use 'request.url' parsed by 'new URL()'
- Access query params via 'url.searchParams.get()'
- Return 'Response' with body and status
- Response sent back to client automatically

Full Transcript

In Astro, when a client sends a request, the server receives it and parses the URL to extract data like query parameters. The route handler function runs, reading parameters from the URL object. It then creates a Response object with the desired content and status code. Finally, Astro sends this response back to the client, which renders the content. This flow ensures dynamic content based on request data.

Practice

1. In Astro, which exported function name is used to handle HTTP GET requests in an API route?

easy

A. POST

B. GET

C. FETCH

D. HANDLE

Solution

1. Step 1: Understand HTTP methods in Astro

   Astro uses exported functions named after HTTP methods to handle requests.

2. Step 2: Identify the function for GET requests

   The function named GET handles HTTP GET requests specifically.

3. Final Answer:

   GET -> Option B

4. Quick Check:

   GET function handles GET requests [OK]

Hint: GET function handles GET requests in Astro API routes [OK]

Common Mistakes:

• Confusing GET with POST function
• Using FETCH instead of GET
• Trying to use HANDLE which is not a valid function

2. Which of the following is the correct way to export a POST request handler in an Astro API route?

easy

A. export async function POST({ request }) { return new Response('ok'); }

B. export function handlePOST() { return 'ok'; }

C. export const POST = () => 'ok';

D. export function post() { return new Response('ok'); }

Solution

1. Step 1: Check function naming and export syntax

   Astro requires exported functions named exactly as HTTP methods in uppercase, e.g., POST.

2. Step 2: Validate function signature and return type

   The function should be async and return a Response object or similar.

3. Final Answer:

   export async function POST({ request }) { return new Response('ok'); } -> Option A

4. Quick Check:

   Correct export and async POST function [OK]

Hint: Use uppercase method name and async function for POST [OK]

Common Mistakes:

• Using lowercase function name 'post'
• Returning string directly instead of Response
• Wrong function name like 'handlePOST'

3. What will be the response body when this Astro API GET handler is called?

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

medium

A. {"message":"Hello"}

B. Hello

C. [object Object]

D. SyntaxError

Solution

1. Step 1: Analyze the returned Response object

   The handler returns a Response with JSON stringified object and content-type header set to application/json.

2. Step 2: Determine the response body content

   The body will be the JSON string: '{"message":"Hello"}'.

3. Final Answer:

   {"message":"Hello"} -> Option A

4. Quick Check:

   JSON string response body = {"message":"Hello"} [OK]

Hint: JSON.stringify creates JSON string in response body [OK]

Common Mistakes:

• Expecting plain text 'Hello' instead of JSON string
• Confusing object with string output
• Missing Content-Type header causing wrong parsing

4. Identify the error in this Astro POST handler code:

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

medium

A. POST function cannot be async

B. Missing await before request.json()

C. Response body must be JSON, not plain text

D. The parameter should be an object with a request property

Solution

1. Step 1: Check function parameter structure

   Astro passes an object with a request property, not the request directly.

2. Step 2: Confirm correct parameter destructuring

   The function should be declared as POST({ request }) to access the request object.

3. Final Answer:

   The parameter should be an object with a request property -> Option D

4. Quick Check:

   Function parameter must destructure { request } [OK]

Hint: Use ({ request }) parameter to access request in handlers [OK]

Common Mistakes:

• Using request directly instead of destructuring
• Forgetting async keyword
• Returning plain text is allowed, not an error

5. You want to create an Astro API route that accepts a POST request with JSON data containing a "name" field, and responds with a JSON greeting message. Which code correctly implements this behavior?

hard

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

B. export function POST(request) {
const data = request.json();
return new Response(`Hello, ${data.name}!`);
}

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

D. export async function POST() {
return new Response(JSON.stringify({ greeting: 'Hello!' }), {
headers: { 'Content-Type': 'application/json' }
});
}

Solution

1. Step 1: Correctly destructure request parameter

   The function must accept an object and destructure request to access the request data.

2. Step 2: Parse JSON body and create JSON response

   Use await request.json() to get the JSON data, then respond with a JSON string including the greeting.

3. Step 3: Set proper Content-Type header

   Response must have header 'Content-Type': 'application/json' for JSON response.

4. Final Answer:

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

5. Quick Check:

   Destructure request, await json(), respond with JSON [OK]

Hint: Destructure request, await json(), respond with JSON and header [OK]

Common Mistakes:

• Not destructuring request parameter
• Using request.text() instead of request.json()
• Missing Content-Type header for JSON response