서버 vs 클라이언트 혼재된 개념 정리

 

 

요 4주동안 프로젝트 현직 멘토님과 주1회 멘토링을 진행하면서 Next 관련 공부했던 내용들을 정리해보았다

기본기가 너무 부족한거같다 공부좀 하자 ^^

---

 

SSR / CSR vs 서버 컴포넌트 / 클라이언트 컴포넌트 부터 일단 헷갈림

• SSR = 서버컴포넌트
• CSR = 클라이언트컴포넌트

라고 이해하고 있었던 나....(진짜 공부 안한거 티남) 너무 부끄러웠다

앞에 동일하게 서버/클라이언트라고 들어가니까 개념이 혼재된듯하다

 

SSR / CSR 이란 → Redering 시점을 말하는것이다.

• SSR: 서버에서 HTML 만들어서 보냄 (언제 그리냐)
• CSR: 브라우저에서 JS로 그림

그럼

서버 컴포넌트(RSC) / 클라이언트 컴포넌트(RCC)는? → 실행되는 위치

• 서버컴포: 서버에서 실행됨
• 클라컴포: 브라우저에서 실행됨

 

SSR vs CSR 차이

결론적으로 말하면 사전렌더링 방식에서 차이가 드러난다

 

SSR

서버단에서 렌더링이 빠르게 진행됨. 때문에 FCP 시간을 단축가능한 장점이 있다.
그러나 무언가 인터렉션할수있는 상태는 아니기때문에 그상태로 JS번들 > Hydration을 기다려야하는 단점이 있다.

 

CSR

클라이언트단에서 렌더링이 진행된다. 빈 HTML 파일을 가장먼저 불러오고 JS번들을 기다려야한다는 단점이 있지만,
Hydration 이후에는 바로 사용자 인터렉션 가능하다는 장점

 

그럼 Hydration은 또 뭐고

사전렌더링 이후 인터렉션 되지않는 목마른 JS번들이 빈 HTML에게 물을 뿌려주는것과 같은..! 즉 인터렉션되게 만들어주는 과정을 말한다

• SSR이면 바로 인터랙션 가능하다?
• CSR만 인터랙션 가능하다?

No.... SSR도 처음엔 인터랙션 안된다. 반드시 Hydration 이후에 되는것이다

 

 

 

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

• 서버컴포 = 그냥 SSR용
• 클라컴포 = 그냥 CSR용

가 아니다.... 컴포넌트는 내부코드의 역할기준에 따라 나뉘게된다

 

그래서 언제 뭘 써야하는데

서버 컴포넌트

• 데이터 fetching
• 인증 처리
• 초반에 빠르게 UI 구성
• JS 번들에 포함 안됨

→ 로직 + 데이터 + 초기 렌더링에 유리

 

 

클라이언트 컴포넌트

• 상태 관리 (useState)
• 이벤트 (onClick)
• 애니메이션

→ 사용자와 상호작용을 해야하는 인터랙션 담당

 

 

Next에서는 기본적으로 서버컴포를 쓰는것을 권장. 그래야 JS번들 용량을 줄일수 있기 때문이다

but 상호작용 필요한 페이지들은 클라컴포를 써야한다

 

 

이정도 적어두면 이제 정말 헷갈릴일은 없겠지...? ^^.....제발