next js) 서버컴포넌트,클라이언트컴포넌트,deduplication

 

서버컴포넌트,클라이언트컴포넌트

 

컴포넌트 사용이유 : 더러운코드축약,같은코드재사용

1. 서버컴포넌트: JavaScript의 서버 컴포넌트 는 클라이언트의 브라우저로 전송되기 전에 서버 측에서 처리되고 렌더링되는 응용 프로그램의 요소 또는 부분을 나타냅니다. 이러한 컴포넌트 는 서버에서 동적으로 생성되어 일반적으로 클라이언트 요청에 대한 응답으로 HTML로 전송됩니다. 정적이거나 자주 변경되지 않는 콘텐츠를 렌더링하는 데 유용합니다. Next.js와 같은 프레임워크는 서버 컴포넌트 를 활용하여 페이지를 사전 렌더링하여 초기 로드 시간과 SEO를 개선합니다.
   요약 : 서버컴포넌트는 자바스크립트 기능을 집어넣을수없음 ex onclick,usestate 등 but 서버컴포넌트는 로딩속도가 더 빠르고 검색엔진 노출의 이점이 있음
2. 클라이언트 컴포넌트: 반대로 JavaScript의 클라이언트 컴포넌트 는 사용자 브라우저 내 클라이언트 측에서 처리되고 렌더링되는 애플리케이션의 일부입니다. 이러한 컴포넌트 는 대화형인 경우가 많으며 전체 페이지를 다시 로드할 필요 없이 사용자 입력, 업데이트 및 동적 콘텐츠를 처리합니다. React, Vue.js, Angular와 같은 라이브러리는 클라이언트 측 컴포넌트와 함께 작동하므로 반응성이 뛰어나고 동적인 사용자 인터페이스가 가능합니다.
   "use client" 라는 명령어를 상단에 입력해야함 
   
   요약 : 클라이언트 컴포넌트는 가능함  이걸로 페이지를 만들어버리면 자바스크립트 파일일 많아져서 무거워짐, hydration 필요(리액트 문법을 html을 유저한테 쏴준다음에 분석하는작업)

/* "use client" */

 

 
 3. deduplication: JavaScript의 중복 제거에는 애플리케이션 내에서 중복되거나 중복된 코드, 기능 또는 데이터를 식별하고 제거하는 작업이 포함됩니다. 반복을 제거하여 코드베이스를 간소화하고, 코드베이스를 더욱 효율적이고 유지 관리 가능하게 만들고 전체 크기를 줄이는 프로세스입니다. 재사용 가능한 기능 또는 구성 요소 생성, 공유 라이브러리 사용, 데이터 스토리지 최적화와 같은 기술은 중복 제거에 도움이 됩니다. 이 방법은 코드의 잠재적인 오류를 최소화하면서 성능과 가독성을 향상시키는 데 중요합니다.

 let 장바구니 = ["tomato", "pasta"]; //기존 리액트 js  이렇게 데이터를 다시 호출하는것은 비효율적이지만
next js 에서는 같은요청이 여러개면 1개로 압축해주는 deduplication 이라는 기능 덕에 상관 없을 수 있음