한 입 크기로 잘라먹는 Next.js(v15) 4.1) 앱 라우터의 데이터 페칭

Data Fetching

<aside> 💡

최상단 컴포넌트에서만 데이터를 페칭할 수 있던 Page Router 버전의 Next와 다르게, async로 처리한다.

</aside>

Page Router 버전에서는 Server component 개념이 없고 전부 Client component이기 때문에, 비동기 처리를 아예 할 수 없었다.

• 모든 컴포넌트와 페칭 메소드가 서버에서 한번, 클라에서 한번 실행되었다. 이를 서버에서만 데이터를 불러오기 위해 아래와 같이 작성해야만 했다.

<aside> 💡

반면 Server component가 있는 App Router 버전에서는 비동기 처리가 가능하다.

</aside>