Skip to content
Astro Astro

Call endpoints from the server

This content is not available in your language yet.

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

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

    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:

    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>