Isomorphic-Fetch not responding with my API's JSON

I've got an API page of JSON that I'm trying to fetch from. If I search the link that I fetch the correct JSON is all that shows. One of two responses come back, depending on how I fetch. I'm using isomorphic-fetch btw.

1. If I leave out the res.json() and just return the fetch response, I get a 200 status with unrelated JSON (somewhat expected, but I still wonder why my JSON body is not in there.

2. I feel like this is worth noting. If I do a regular fetch without the getInitialProps or async-await, I received said response as expected, but I need to pass to props so...

3. If I include the res.json(), I receive this error...

{ FetchError: invalid JSON response body at http://localhost:5000/api/user/personal reason: Unexpected end of JSON input

Heres my code...

 const Profile = props => {
    console.log(props)
    return (
        <div>
            <Navbar />
            Profile
        {props.userName}
        </div>
    )

}

Profile.getInitialProps = async function () {
    const res = await fetch("http://localhost:5000/api/user/personal")
    const data = await res.json()
    return { data }
}

Thanks, guys!! Even if you don't have an answer, I feel like I'm missing a vital concept somewhere, so any insight is appreciated.