Invalid json response with getServerSideProps?

[taylor-lindores-reeves]

Hey, I just set up GetServerSideProps now in my index page (Home). Above my stateless component, I have the following simply example straight from the website docs:

export async function getServerSideProps(context) {
  // Fetch data from external API
  const res = await fetch(`http://localhost:3000/api/keys`);
  const data = res.json({});

  return { props: { data } };
}

In my backend which is in /db/router.js I am using a MongoDB mongoose set-up. Here is the api route:

router.get("/keys", (req, res) =>
  res.json({ google: "<MYAPIKEY>" })
);

I amn simply trying to return an API Key from the server to keep it serverside. All I am getting in response though is a html doc, thus, the following error:

FetchError: invalid json response body at http://localhost:3000/api/contact reason: Unexpected token < in JSON at position 0

Any idea what's going on when I simply want to respond with some json??

[justincy]

getServerSideProps() runs on the server, so your code is trying to make a request to the server from the server. That doesn't work.

The error you're seeing is telling to that it's trying to parse HTML as JSON. So somehow the client is getting an HTML response.

[taylor-lindores-reeves]

You know what it was, in my main server set up file I had stupidly put the following before requiring my routes config file

server.get(‘*’, (req, res) => {
    return handle(req, res)
}

I’m still not entirely sure what the point of this is - maybe you could help 👇?

const handle = app.getRequestHandler()