기본적으로 app하위의 모든 컴포넌트는 서버 컴포넌트이다. (초기 상태가 SSG)
서버 컴포넌트
노드에서 동작하는 컴포넌트
서버 컴포넌트에서 console.log()를 찍으면?
=> 노드가 구동되고 있는 터미널에 로그가 찍힘
클라이언트컴포넌트
클라이언트에서 동작하는 컴포넌트
클라이언트 컴포넌트에서 console.log()를 찍으면?
=> 브라우저 콘솔에 로그가 찍힘
"use client"로 클라이언트 컴포넌트로 변경할 수 있다.
어떻게 구분해서 사용해야할까?
사용자와의 상호작용이 있는 컴포넌트는 클라이언트 컴포넌트이다.
예시
fetch로 데이터 가져오기 = 서버 컴포넌트
백엔드의 리소스에 직접적으로 접근하기 = 서버 컴포넌트
Access Token 등 민감한 정보를 지켜야 할때 = 서버 컴포넌트
onClick, onChange 등 이벤트 함수가 필요한 컴포넌트 = 클라이언트 컴포넌트
React의 Hook이 사용되는 컴포넌트 = 클라이언트 컴포넌트
alert 등 브라우저-only API = 클라이언트 컴포넌트
'Today I Learned' 카테고리의 다른 글
| [Next.js] SSG 컴포넌트에서 서버 수정 내역을 반영해야 할 때 (3) | 2024.03.12 |
|---|---|
| Next.js 앱 이미지 넣는 방법 (0) | 2024.03.12 |
| Next.js 개요 및 렌더링 이해하기 (0) | 2024.03.11 |
| Vercel 배포 시 push한 내역이 자동으로 반영되지 않을 때 (0) | 2024.03.08 |
| React에서 버튼 클릭 시 상위 컴포넌트 이벤트 방지하기: 이벤트 버블링 제어 (0) | 2024.03.06 |