setTimeout(response, 5000))
const response = await fetch(URL)
const json = await response.json()
return json
}
export default async function HomePage() {
const movies = await getMovies()
return (
{JSON.stringify(movies)}
)
}">
setTimeout(response, 5000))
const response = await fetch(URL)
const json = await response.json()
return json
}
export default async function HomePage() {
const movies = await getMovies()
return (
{JSON.stringify(movies)}
)
}">
setTimeout(response, 5000))
const response = await fetch(URL)
const json = await response.json()
return json
}
export default async function HomePage() {
const movies = await getMovies()
return (
{JSON.stringify(movies)}
)
}">
export const metadata = {
title: "Home"
}
const URL = "<https://nomad-movies.nomadcoders.workers.dev/movies>"
async function getMovies() {
await new Promise((response) => setTimeout(response, 5000))
const response = await fetch(URL)
const json = await response.json()
return json
}
export default async function HomePage() {
const movies = await getMovies()
return (
<div>
{JSON.stringify(movies)}
</div>
)
}
- 코드 정리 및 변수 설정
- 기존에 작성한 코드를 정리하고 필요한 부분만 남김
const URL에 복사한 URL을 넣고 movies 변수를 사용하여 데이터를 처리함
- 메타데이터와 데이터 페칭 함수 작성
export const metadata를 다시 작성하고 서버 컴포넌트에서 사용할 getMovies 함수를 생성함- 이 함수는 URL에서 데이터를 페칭하고 JSON 형식으로 반환함
- 컴포넌트 수정
- 기존의
Page 함수를 HomePage로 이름을 변경하고 async 함수로 변환하여 await를 사용할 수 있게 함
- 서버 컴포넌트이기 때문에
useState나 useEffect 같은 클라이언트 사이드 훅이 필요 없음
- Next.js의 데이터 캐싱 기능 설명
- 서버 컴포넌트에서 페칭된 데이터는 자동으로 캐싱되어 동일한 데이터를 다시 요청하지 않도록 함
- 이를 통해 API 호출 횟수를 줄이고 성능을 향상시킴
- 로딩 상태 처리
- 로딩 상태가 클라이언트 측 UI에 표시되지 않고 서버 응답을 기다리는 동안 사용자에게 아무것도 표시되지 않는 문제
- 로딩 상태 개선 필요성
- 현재 방식은 데이터가 로드될 때까지 사용자에게 아무 UI도 표시되지 않아 사용자 경험이 저하됨