i have a rout handler on /api/template?id=xxxxxxxx
the route.ts

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const id = searchParams.get('id')

  const { data, error } = await supabase
    .from('templates')
    .select(`id, parent, body`)
    .eq('id', id)
    .single()

  if (data) {
    return NextResponse.json(data)
  }
  if (error) {
    return NextResponse.json(error)
  }
}

and when i visit it, it works fine and gives me the needed response.
however, when i call this in a page.tsx i get this response

body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:3000/api/template?id=xxxxxxx"

what should i do to get the response in the pages