NextJS 배워보자 - 02
안녕하세요! 도도히 입니다!
저는 공부할때, 공식문서만 보면서 공부하기엔 재미가 없어서 하기 싫어지더라구요😞
그래서 직접 따라해보고 쳐보면서, 아 이게 이래서 동작하는구나 하면서 공식문서를 참고하니까 더 이해가 잘 되던데요?!
이번 시간은 Nextjs에서 거의 핵심으로 다루는 파트인 것 같아요. 아주 중요하고 조금은 어려운 내용입니다.
쉽게 설명한 내용이 이해도 잘된다. 다들 같이 공부해봐요!
서버 컴포넌트 or 클라이언트 컴포넌트를 사용하면,
개발자가 서버와 클라이언트에 걸쳐 있는 응용 프로그램을 만들어서
클라이언트에 더 풍부한 상호 작용과 기존 서버 렌더링의 향상된 성능을 제공할 수 있다.
📌 서버 컴포넌트
서버와 클라이언트를 활용하는 하이브리드 애플리케이션을 구축하기 위한 새로운 방법을 도입하는 기술.
배경
React 같은 경우, 전체 애플리케이션을 클라이언트 측에서 렌더링을 하지만,
컴포넌트를 렌더링할 위치를 선택할 수 있는 유연성을 제공한다.
페이지를 더 작은 컴포넌트로 분할하면 대부분의 컴포넌트가 비대화형이라,
서버 컴포넌트로 서버에서 렌더링 될 수 있음을 알 수 있다.
더 작은 대화형 UI의 경우 클라이언트 컴포넌트에 뿌릴 수 있다.
Next.js 서버 우선 접근 방식과 일치한다.
서버 컴포넌트를 사용하는 이유
초기 페이지 로딩이 빠르고, 자바스크립트 번들 크기가 줄어든다.
ex) 데이터를 가져올때, 데이터베이스에 더 가까운 서버로 이동하고,
서버의 클라이언트 자바스크립트 번들 크기에 영향을 주던 큰 종속성을 유지하고 성능을 향상시킬 수 있다.
데이터 처리를 서버로 이동시켜 성능을 향상시킬 수 있다.
기본 클라이언트 측 런타임은 캐시 가능 하고 크기를 예측할 수 있으며 애플리케이션이 커져도 증가 하지 않는다 . 추가 JavaScript는 클라이언트 컴포넌트를 통해 애플리케이션에서 클라이언트 측 상호 작용이 사용되는 경우 에만 추가된다.
서버측 UI 템플릿화와
서버 컴포넌트를 사용하면 React 애플리케이션 작성이 PHP 또는 Ruby on Rails와 유사하게 느껴지지만 React의 강력함과 유연성 및 템플릿 UI용 컴포넌트 모델이 있다.
경로가 Next.js로 로드되면 초기 HTML이 서버에서 렌더링된다. 그런 다음 이 HTML은 브라우저에서 점진적으로 향상되어 클라이언트가 Next.js 및 React 클라이언트 측 런타임을 비동기식으로 로드하여 애플리케이션을 인계하고 상호 작용을 추가할 수 있다.
서버 컴포넌트로의 전환을 더 쉽게 하기 위해 앱 라우터 내부의 모든 컴포넌트는 특수 파일 및 공동 배치 구성 요소를 포함하여 기본적으로 서버 컴포넌트이다. 이를 통해 추가 작업 없이 자동으로 채택하고 즉시 사용할 수 있는 뛰어난 성능을 얻을 수 있다. 선택적으로 ‘use client’ 지시문을 사용하여 클라이언트 컴포넌트에 적용할 수 있다.
📌 Client Components
응용 프로그램에 클라이언트 측 상호 작용을 추가하는 기술.
블로그까지 찾아와주신 분들에게 도움이 되었음 좋겠습니다!🙇♀️
댓글남기기