NextJS route handler working when visiting directly via browser searchbar, but doesn’t work when console logging it

Basically, I am trying to access some json placeholder data via my route handler defined in /api/posts/route.js

export async function GET() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await res.json();

  return Response.json({ data: data });
}

I know that this part is OK because when I navigate to

http://localhost:3000/api/posts

a whole json object with this data appears on the page.

However, when I am trying to get this data via console logging in my

/posts/page.jsx

file, it just logs an empty object. Does anyone know what’s going on here? Thanks!

import React from 'react';

export async function getPosts() {
  const res = await fetch('http://localhost:3000/api/posts');

  const data = await res.json();

  return data.data;
}

const Post = async () => {
  const posts = await getPosts();
  console.log(posts);
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
};

export default Post;