next.js

코딩애플을 통해 next.js를 공부하던 중 서버컨포넌트, 클라이언트 컴포넌트에 대하여 나오게 되었다.

이것에 대해 더욱 자세히 알아보려고 한다.

📌 서버 컨포넌트

서버컴포넌트란, 말 그대로 서버 부분에서 랜더링 되는 컴포넌트이다.

✔️ 특징

• 모든 컴포넌트는 서버컴포넌트가 기본
• 자바스크립트 기능을 넣을 수 없음
  -> React useState, useEffect도 불가
• 로딩속도가 빠름
• 검색엔진 노출에 유리
• async 함수로 정의 가능

📌 클라이언트 컨포넌트

클라이언트 컴포넌트 는, 버튼 또는 검색창과 같이 사용자와 상호작용하는 작은 UI 들을 클라이언트 단에서 렌더링되는 컴포넌트를 뜻한다.

✔️ 특징

• 파일 최상단에 "use client"를 작성해 사용
• 로딩속도가 느림
  1) 자바스크립트 또는 리액트 기능이 들어가기 때문
  2) hydration이라는 과정 필요

📍 hydration이란?

html 유저에게 보낸 후 자바스크립트,리액트로 html을 다시 읽고 분석하는 일

보통 큰 페이지들은 서버컴포넌트
큰 페이지 속 기능들이 필요한 컴포넌트와 같은 경우 클라이언트 컴포넌트 활용

(출처 : 애플코딩 강의)

연습 코드 깃허브(Private)
-> list, cart 연습