1. 렌더링(Rendering)이란?
렌더링은 React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환하는 작업.
- 브라우저는 JavaScript 코드를 바로 이해하지 못하므로, React 코드를 HTML로 변환해줘야 함.
- Next.js는 이 작업을 서버에서 미리 해주는 SSR(Server Side Rendering)을 기본으로 함.
2. CRA와 Next.js의 렌더링 방식 차이
🔸 CRA (Create React App)
- Client Side Rendering (CSR) 방식
- 모든 UI가 브라우저에서 JS를 통해 만들어짐.
- 초기 페이지는 비어 있음 (
<div id="root">) - JS가 다운로드되고 실행된 후에야 화면에 UI가 보임.
- JS를 꺼두면 화면에 아무것도 안 보임.
- SEO에 불리 (검색 엔진이 HTML을 분석할 수 없음).
🔸 Next.js
- 기본적으로 Server Side Rendering (SSR) 사용
- 서버에서 미리 HTML을 생성 → 브라우저는 바로 UI를 볼 수 있음
- JS가 꺼져 있어도 기본적인 화면 표시 가능
- SEO에 유리, 빠른 초기 렌더링 제공
3. 'use client'의 역할
- Next.js에서는 기본적으로 모든 컴포넌트가 서버에서 먼저 렌더링됨.
- 하지만
useState,useEffect,usePathname등 브라우저에서만 동작 가능한 기능을 사용하는 경우, 컴포넌트를 Client Component로 지정해야 함. - 이때 컴포넌트 파일 상단에
'use client'를 작성.
"use client"
- 이 선언이 있으면 Next.js는 이 컴포넌트를 클라이언트에서 hydrate하고 상호작용이 가능하게 만듦.
4. 꼭 기억해야 할 사실 🔥
'use client'가 있어도 해당 컴포넌트는 처음에는 서버에서 렌더링됨!- 즉, 초기 HTML은 서버에서 생성되어 브라우저에 전달됨.
- 브라우저에서는 그 HTML을 hydrate(하이드레이션) 하며, React가 동작하면서 상호작용을 붙여줌.
5. 콘솔 로그로 확인해보기
"use client"
console.log("hello")
- 위 코드는
console.log('hello')가 서버 콘솔에 출력됨. - 이건 컴포넌트가 처음엔 서버에서 렌더링되었다는 확실한 증거.
6. 추가로 알아두면 좋은 개념 🌱
🔹 Hydration (하이드레이션)
- 서버에서 HTML을 렌더링해서 브라우저에 보내고,
- 브라우저는 그 HTML을 React 코드와 연결(hydrate) 하면서 동적인 UI로 바꿔줌.
- 즉, SSR로 렌더된 HTML에 React의 생명력을 불어넣는 과정!
🔹 Server Component vs Client Component
| 구분 | Server Component | Client Component |
|---|---|---|
| 기본 렌더링 위치 | 서버 | 클라이언트 |
| 특징 | HTML 생성만, 상호작용 없음 | JS 동작 가능, 상호작용 가능 |
| 예시 | 단순 텍스트, 데이터 fetch 컴포넌트 | 버튼 클릭, 상태 변경 등 |
| 사용 시기 | 페이지 초기화, SEO 필요한 경우 | 상태관리, 이벤트 처리 필요할 때 |
Client Component를 사용할 땐 항상 'use client' 선언이 필요!
7. 요약 정리 ✍️
- 렌더링이란: React → HTML 변환
- CRA는 CSR → JS 없으면 UI 없음
- Next.js는 기본 SSR → HTML 먼저 보여줌
'use client'는 브라우저 전용 기능 사용할 때 필요- 서버에서 먼저 렌더링됨 → 이후 하이드레이션으로 상호작용 가능
usePathname,useState,useEffect는 Client Component에서만 사용 가능
FE 개발 꿈틀이