Call endpoints from the server - Withastro

import { Steps } from '@astrojs/starlight/components';

Endpoints can be used to serve many kinds of data. This recipe calls a server endpoint from a page's component script to display a greeting, without requiring an additional fetch request.

Prerequisites

A project with SSR (output: 'server') enabled

Recipe

<Steps> 1. Create an endpoint in a new file `src/pages/api/hello.ts` that returns some data:

```ts title="src/pages/api/hello.ts"
import type { APIRoute } from 'astro'

export const GET: APIRoute = () => {
  return new Response(
    JSON.stringify({
      greeting: 'Hello',
    }),
  )
}
```

2. On any Astro page, import the GET() method from the endpoint. Call it with the Astro global to provide the request context, and use the response on the page:

```astro title="src/pages/index.astro"
---
import { GET } from './api/hello.ts'

let response = await GET(Astro)
const data = await response.json()
---

<h1>{data.greeting} world!</h1>
```

</Steps>