` sets it up.
## Working with Requests and Responses
### Astro.request
- `Astro.request` is a standard web **Request** object.
- `Astro.request.method` = `"GET"`, `"POST"` and so on.
- `Astro.request.headers.get("user-agent")` = one request header.
- `await Astro.request.formData()` = the fields of a submitted form.
### Astro.url
- `Astro.url` is a **URL** object for the current address.
- `Astro.url.pathname` = the path, such as `/search`.
- `Astro.url.searchParams.get("q")` = one value from the query string.
### Astro.clientAddress
- The visitor's IP address, as the server sees it. Some adapters do not provide it.
### Astro.response
- Change the response before it is sent:
- `Astro.response.status = 404;`
- `Astro.response.headers.set("Cache-Control", "max-age=60");`
### Astro.redirect()
- `return Astro.redirect("/login");` sends the visitor somewhere else.
- The default status is `302` (temporary). Pass `301` for a permanent move.
- Use `return`, so the rest of the page does not run.
Press **▶ Run**. Fill the form and send it. Then click the "old" link.
Method: {Astro.request.method} · Path: {Astro.url.pathname}
{message && {message}
}
An old link to this page
`,
"src/pages/contact-old.astro": `---
return Astro.redirect("/contact", 301);
---
`,
}}
/>
- Send the form empty: the status becomes `400`. The **Terminal** shows it.
- The old link answers with a `301` redirect to `/contact`.
### Returning a Response from a Page
- A page can `return new Response(...)` instead of HTML.
- Use it for a plain-text or JSON answer, or a custom status.
- Example: `return new Response("Not found", { status: 404 });`
### Fetching Fresh Data on Every Request
- In an on-demand page, `fetch()` runs on each visit.
- Readers always see the latest data. Each visit also waits for the API.
### HTML Streaming
- **Streaming** = the server sends the HTML in pieces, as each piece is ready.
- Astro streams on-demand pages by default. The top of the page can show while a slow part below is still loading.
- Put slow `fetch()` calls in components lower on the page, not all at the top.
**Simple lesson:** read `Astro.request` and `Astro.url`, change `Astro.response`, and `return` a redirect or a `Response` when needed.
## On-Demand Dynamic Routes
### Dynamic Routes Without getStaticPaths()
- In a static page, `getStaticPaths()` must list every page ahead of time.
- In an on-demand page, there is no list. Any value in the address is accepted.
- The page reads `Astro.params` and looks up the data on each request.
- If nothing is found, return a 404.
♥ {post.likes} likes, fetched just now.
Another post ·
A missing post
`,
}}
/>
On-demand dynamic routes have no `getStaticPaths()`. Instead of a list, you must handle "not found" yourself.
**Simple lesson:** on-demand `[slug]` pages accept any value. Look it up, and return a 404 when it is missing.
## Mixed Rendering
### Why Mix
- Most pages of a site are the same for everyone: static is fastest.
- A few pages need the request: on-demand is needed.
- **Mixed rendering** = both in one project. Static speed where possible, on-demand where needed.
### The prerender Export
- `export const prerender = false;` = render this page on demand.
- `export const prerender = true;` = build this page ahead of time.
- The `output` setting decides the default. `prerender` changes it for one page.
### Two Ways to Mix
- **A static project with some on-demand pages** = the default `output: "static"`, plus `prerender = false` on those pages. Most sites look like this.
- **An on-demand project with some static pages** = `output: "server"`, plus `prerender = true` on pages that never change.
Press **▶ Run**. Read the **Terminal**: `▶` pages were built now, `λ` pages run on each request.
`,
"src/pages/about.astro": `About
Same for everyone. Built once.
Home
`,
"src/pages/stats.astro": `---
const res = await fetch("https://api.devjournal.dev/posts");
const posts = await res.json();
const total = posts.reduce((sum, p) => sum + p.likes, 0);
---
Live stats
{total} likes across {posts.length} posts, as of this request.
Home
`,
}}
/>
## Choosing the Right Mode
### A Decision Guide
Ask one question for each page: **when does its content change?**
1. **Per visitor** (their name, their cart, their settings) → on-demand.
2. **Per request** (search results, query strings, form answers) → on-demand.
3. **Every few minutes** (live scores, stock levels) → on-demand, perhaps with caching.
4. **Rarely** (posts, docs, about pages) → static.
### A Comparison Table
| Point | Static | On-demand | Mixed |
|---|---|---|---|
| Hosting | Any static host | A server or serverless host with an adapter | A host with an adapter |
| Speed | Fastest | Depends on the server and APIs | Fast where static, fresh where needed |
| Data freshness | As of the last build | Every request | Each page chooses |
| Cost | Lowest | Higher: code runs per visit | Low: only some pages run code |
| Request data | No | Yes | Only on on-demand pages |
**Simple lesson:** start static. Make a page on-demand only when its content depends on the visitor or the request.
## Request Security and Error Pages
### Cross-Site Request Forgery Protection
- **CSRF** (cross-site request forgery) = a bad website tricks a visitor's browser into sending a form to **your** site.
- Astro checks this for on-demand pages. It is on by default: `security.checkOrigin`.
- A form `POST` that comes from a different website is refused.
### What the 403 Response Means
- **403 Forbidden** = "I understood the request, but I refuse it".
- If a real form gets a 403, check that it is sent from your own site's address.
### The 500 Page
- **500** = "the server had an error".
- Make `src/pages/500.astro`. Astro shows it when an on-demand page throws an error.
- It gets an `error` prop. Do **not** show error details to visitors on a live site. Log them instead.
Press **▶ Run**. The broken page throws an error, so the 500 page is shown.
Sorry, this page is having trouble. Please try again soon.
Go home
`,
"src/pages/index.astro": `Home
`,
}}
expectWarning
/>
On a live site, never print `error.message` on the 500 page. It can reveal details about your server. Show a friendly message and log the error for yourself.
**Simple lesson:** Astro blocks cross-site form posts with a 403. A `500.astro` page catches server errors kindly.
## TL;DR
1. **On-demand rendering** = HTML made per request on a server.
2. **Adapter** = runs Astro on your host. `npx astro add node` (or vercel, netlify, cloudflare).
3. **Astro.request** = method, headers, `formData()`. **Astro.url** = pathname, `searchParams`.
4. **Astro.response** = set `status` and `headers`.
5. **Astro.redirect(path, status)** = `return` it. 302 by default.
6. **return new Response(...)** = a custom answer, such as a 404.
7. **On-demand [slug]** = no `getStaticPaths()`. Handle "not found" yourself.
8. **prerender** = `false` for on-demand, `true` for static, per page.
9. **Choose** = static unless the content depends on the visitor or the request.
10. **Security** = `checkOrigin` refuses cross-site form posts with a 403. **500.astro** = the error page.
## Common mistakes
| Mistake | Wrong idea | Correct idea | What goes wrong |
|---|---|---|---|
| `Astro.redirect()` without `return` | Calling it stops the page | Write `return Astro.redirect(...)` | The page keeps running and may fail |
| No adapter | Astro has a built-in server | Add one with `astro add` | The build stops |
| `getStaticPaths()` in an on-demand page | Every dynamic page needs it | On-demand pages read `Astro.params` | It is ignored, with a warning |
| Not handling a missing item | Every address has data | Return a 404 when nothing is found | The page crashes with a 500 |
| Making the whole site on demand | It is more modern | Mix: on-demand only where needed | Slower pages, higher bills |
| Showing `error.message` to visitors | It helps users | Log it, show a friendly message | Server details leak |
## Check Yourself
## Exercises
## What to Remember
- On-demand pages run on a server, once per request. They need an adapter.
- Read the request with `Astro.request` and `Astro.url`. Change the answer with `Astro.response`.
- `return Astro.redirect()` or `return new Response()` to answer differently.
- Mix modes with `prerender`. Start static, opt in where needed.
- Astro blocks cross-site form posts. A `500.astro` page handles server errors.
Next: **Astro Islands**, where Asha adds interactive components from Preact, with JavaScript only where they live.