Page Router 버전의 데이터 패칭
기존 Page Router에서는 사전 렌더링 시, Next.js 서버가 백엔드 API나 데이터베이스에서 데이터를 가져오는 역할을 했다.
이를 위해 getServerSideProps() 같은 특수한 함수를 사용하여 데이터를 패칭한 후, 해당 데이터를 페이지 컴포넌트의 props로 전달하는 방식이었다.
이렇게 동작하는 이유는 Page Router 버전에서는 서버 컴포넌트 개념이 없었기 때문이다.
모든 페이지 컴포넌트가 클라이언트 컴포넌트로 동작했으며, 브라우저에서도 한 번 더 실행되어야 했기 때문에, 서버에서 미리 데이터를 패칭하여 props로 전달하는 방식이 사용되었다.
하지만 이러한 방식에는 단점이 있었다. 서버에서 가져온 모든 데이터가 페이지 컴포넌트의 props로만 전달되었기 때문에, 데이터를 필요로 하는 하위 컴포넌트들은 props나 Context API를 사용해 데이터를 전달받아야 했다. 이 과정이 번거롭고 복잡해지면서, 깊게 중첩된 컴포넌트들로 데이터를 전달하는 것이 부담이 될 수 있었다.
App Router 버전의 데이터 패칭
App Router 버전부터는 서버 컴포넌트의 도입으로 인해 이러한 단점을 해결할 수 있게 되었다.
서버 컴포넌트는 오직 서버에서만 실행되기 때문에, async 키워드를 사용하여 비동기 함수로 만들고, 내부에서 await와 fetch 메서드를 활용해 직접 데이터를 패칭할 수 있다.
이러한 방식 덕분에, 더 이상 페이지 컴포넌트에서 props나 Context API를 사용해 데이터를 하위 컴포넌트로 전달할 필요가 없다. 데이터가 필요한 컴포넌트가 직접 데이터를 가져올 수 있기 때문이다. 따라서, 컴포넌트 트리가 깊어지더라도 무리 없이 데이터 패칭을 구현할 수 있는 구조가 된다.
