Next.js
서버 페이지에서 데이터 기다리기
서버 컴포넌트는 비동기 작업을 기다린 뒤 결과를 화면에 사용할 수 있습니다.
이럴 때 필요해요
데이터를 기다리는 부분과 표시하는 부분을 구분합니다.
어떻게 동작하나요?
서버 페이지를 async 함수로 작성하면 데이터 조회를 await할 수 있습니다. 값을 받은 뒤 JSX에 사용합니다. 아래 loadConcert는 외부 API 대신 고정 값을 반환하는 설명용 함수입니다.
실제 API로 바꾸면 네트워크 실패, 잘못된 응답과 권한 문제도 처리해야 합니다. TypeScript 타입을 적어도 외부 응답이 자동 검증되지는 않습니다.
서버 컴포넌트에서 읽었다는 사실만으로 매번 새로 조회하거나 항상 캐시한다고 판단할 수 없습니다. 렌더링 시점과 캐시 정책은 별도로 확인합니다. 버전과 설정에 따른 차이는 심화 단계에서 이어갑니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
// app/concerts/page.tsx
async function loadConcert() { return { title: "주말 재즈" }; }
export default async function Page() {
const concert = await loadConcert();
return <h1>{concert.title}</h1>;
}고정 데이터를 기다려 표시하는 읽기 예제이며 실제 API나 DB는 연결하지 않습니다.
자주 헷갈리는 포인트
- async 페이지 자체를 실제 네트워크 호출의 증거로 보지 않습니다.
- 서버 조회와 캐시 여부를 동일한 개념으로 취급하지 않습니다.
내 말로 설명해 보기
이 예제는 실제 공연 서버에서 정보를 받아올까요?
생각할 단서 loadConcert 함수가 실제로 하는 작업을 먼저 읽어 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 서버 컴포넌트는 비동기 작업을 기다린 뒤 결과를 화면에 사용할 수 있습니다.
- 고정 데이터를 기다려 표시하는 읽기 예제이며 실제 API나 DB는 연결하지 않습니다.
예시 답변
아닙니다. loadConcert가 고정 객체를 반환합니다. 실제 서버를 연결하면 실패·검증·권한·캐시를 추가로 설계해야 합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.