클라이언트 코드에서 ajax 요청 시 promise를 반환합니다.

아래는 Next js 서버코드입니다

export default async function handler(request,response){

    let recent = undefined
    if(recent == undefined)
    {
        try {
            recent = await fetch("https://외부 api 주소",{method:'GET'})
            let data = await recent.json()
            return response.status(200).json(data)
        }
        catch (e)
        {

        }
    }

}

이렇게 서버 코드 만들어 둔 뒤에 클라이언트 코드에서 ajax 요청 시 promise 를 반환합니다.

<div onClick={()=>{
    fetch("api/v1/article/recent", {method:'get'}).then(value => {
        const data = value.json()
        console.log(data)
    })}
}> 테스트
</div>

신기하게도 then 안에 async await을 넣어두면 올바르게 데이터를 가져옵니다.
<div onClick={()=>{
    fetch("api/v1/article/recent", {method:'get'}).then(async value => {
        const data = await value.json()
        console.log(data)
    })}
}> 테스트
</div>

아래 처럼 사용하는 것이 맞나요?
db 요청이나 외부 백엔드 요청이나 동작 방식은 같아 보이는데 저렇게 하지않으면 promise 를 반환하고 있습니다
강의에서는 너무 잘 되어서 어디서 틀렸는지 찾지 못하고 있습니다..