![]()
이전 포스트에서 useEffect를 사용한 클라이언트 측 데이터 페칭 방식을 살펴보았습니다. 이 방식은 React에서 일반적이지만, Next.js의 진정한 장점을 활용하는 최적의 방법은 아닙니다.Next.js에서는 모든 페이지 컴포넌트가 기본적으로 React 서버 컴포넌트(RSC)로 작동하며, 이를 활용하여 데이터를 서버에서 직접 가져올 수 있습니다. 이 방법을 통해 코드가 훨씬 간결해지고, 중요한 이점을 얻을 수 있습니다. 1. 서버 컴포넌트 데이터 페칭 코드 예시와 변화서버 컴포넌트 방식을 사용하면, 클라이언트 컴포넌트에서 필수였던 useState와 useEffect를 모두 제거하고 코드를 극적으로 간결하게 만들 수 있습니다. a. 코드 구조: async 키워드와 직접 fetchNewsPage 컴포..
해당 블로그는 Udemy Max 강사의 NextJS 강의 중 일부를 요약한 내용입니다. - https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=KEEPLEARNING 사용자가 "/some-route" 경로로 요청을 보냈다고 가정해보자. 순수 React에서 동작 방식 Response로 비어있는 HTML 파일과 JavaScript 코드를 전달하고, JavaScript 코드가 클라이언트에서 실행된다. JS 코드가 실행되면서 서버에서 데이터를 가져와 화면상에 무언가를 나타나게 된다. 랜더링이 클라이언트에서 시작되며, DOM 구조 이외에 필요한 모든 데이터는 클라이언트에서 다시 서버로 요청을 보내어 Load되기 때문에 시간이 걸릴 수 ..
