Web Development/Next.js (11) 썸네일형 리스트형 [Next.js] 클라이언트 컴포넌트 (공식 문서 따라가기) Client Component란 무엇인가? Client Component는 서버에서 미리 렌더링된 HTML과 브라우저에서 실행되는 JavaScript를 결합하여 인터랙티브한 사용자 인터페이스를 제공하는 컴포넌트이다. 이를 통해 사용자는 페이지 로드 시 즉시 콘텐츠를 확인할 수 있으며, 이후 JavaScript가 로드되면서 상호작용이 가능한 상태로 전환된다.클라이언트 렌더링의 장점상호작용성Client Component는 상태 관리, 효과 처리, 이벤트 리스너 등을 활용하여 사용자와의 즉각적인 상호작용을 지원한다. 이를 통해 버튼 클릭, 폼 입력 등 사용자 행동에 실시간으로 반응하는 동적인 UI를 구현할 수 있다.브라우저 API 접근Client Component는 지리적 위치 정보나 로컬 스토리지와 같은 브.. [Next.js] 서버 컴포넌트(공식 문서 따라가기) 서버 컴포넌트(RSC)란? RSC를 이용해서, 선택적으로 서버에 캐시되고 렌더링되는 UI를 만들 수 있다.Next.js에서는 렌더링 작업이 라우트 세그먼트(route segments)별로 나뉘어 스트리밍과 부분 렌더링이 가능하다.또한, Next.js에서 서버 렌더링 전략은 Static Rendering, Dynamic Rendering, Streaming이 있다.Route Segment : URL의 각 경로의 각 부분을 의미한다. /product/[id] ⇒ product와 [id] 각각이 Route Segment이다.부분 렌더링 : next.js는 Route Segment 단위로 렌더링 작업을 분리한다. ⇒ 헤더 따로, 내용 따로 렌더링스트리밍 : 페이지의 일부가 준비된 즉시, 브라우저로 전송해서 렌더.. [Web] 서버 컴포넌트 서버 컴포넌트란? 서버에서 렌더링 되는 컴포넌트이다.왜 사용하는가?번들 파일이 작아진다.(TTI 개선 효과) → 번들로 보낸 js파일이 렌더링하던 부분을 서버에서 대신 렌더링 해주기 때문이다.getServerSideProps, getStaticProps 가 필요없어진다. →RSC 내부에서 fetching이 가능하다.자동적으로 코드 스플리팅이 된다. → RSC가 실행될 때, RSC는 보류되기 떄문에 굳이 RCC를 미리 import 할 이유가 없다.Progressive Rendering → RSC의 결과값은 Stream형태로 전달된다. 클라이언트에서 먼저 수신된 부분부터 렌더링 해 줄 수 있다.컴포넌트 단위의 Refetching → SSR의 경우, 서버에서 html을 완성해서 보내주기 때문에, 수정사항이 있.. 이전 1 2 다음
