API resolved without sending a response when trying to fetch data from separate page

[codedbyjordan]

I have an endpoint setup that queries an external database and page that calls that endpoint
inside of getServerSideProps. With the following code,
When I visit the API endpoint the data is successfully returned but when I go to the page I I get this error: API resolved without sending a response for /api/get_bans, this may result in stalled requests.

export const getServerSideProps = async () => {
  let bans = await fetch('http://localhost:3000/api/get_bans').then((res) => { 
    return res.json();
  })

  return {
    props: { bans: bans }
  }

}

API Endpoint

import db from '../../db.js';

const handler = (req, res) => {
  if(req.method == 'GET') {
    db.connect();
    db.query('SELECT * FROM tf2jr_guardbans_logs', (error, results, fields) => {
      if (error) throw error;
      res.status(200).json(results);
    })
  }
}

export default handler;