SSR? CSR?

NextJS는 서버에서 웹 페이지의 HTML, CSS 및 JavaScript를 렌더링하고, 클라이언트에 전달한다.
이를 서버 사이드 렌더링(SSR)이라고 한다.

즉 서버에서 뚝딱뚝딱 다 만든 다음, 완성된 HTML을 브라우저에게 건네준다!

브라우저는 받은 파일을 띄워주기만 하면 된다.

그래서 NextJS로 만들어진 사이트의 페이지 소스를 보면 이미 컨텐츠가 들어가있다.

React는 서버는 초기 HTML만 제공하고, 클라이언트는 이를 받아 JavaScript를 사용하여 동적으로 페이지를 렌더링한다.
이를 클라이언트 사이드 렌더링(CSR)이라고 한다.

즉 서버에서 받은 파일들을 브라우저의 JavaScript 엔진이 작업한다!

그래서 브라우저가 JavaScript를 실행할 수 없는 상황이나 느린 네트워크 연결에서는 페이지를 제대로 확인할 수 없다.

React로 만들어진 사이트의 페이지 소스를 확인하면 컨텐츠가 비어있는 것을 확인할 수 있다.

---

Server Component? Client Component?

NextJS는 기본적으로 모든 컴포넌트가 서버 측에서 렌더링 되는 서버 컴포넌트이다.

그러나 초기 렌더링 이후 클라이언트에서 추가적인 상호 작용이 필요한 경우(event가 발생하거나, Link 이동을 하거나)
JavaScript를 사용하여 해당 컴포넌트를 활성화하는데, 이 과정을 Hydration(수분 보충)이라고 한다.

이처럼 클라이언트에서 동적 업데이트가 필요한 컴포넌트는
"use client"를 최상단에 선언하여 클라이언트 컴포넌트로 지정한다.

즉 클라이언트 컴포넌트란 서버에서 render되고 클라이언트에서 hydrate되는 컴포넌트!

각 컴포넌트가 서버 컴포넌트인지 클라이언트 컴포넌트인지 명시적으로 구분함으로써 NextJS는 페이지의 초기 렌더링에 필요한 JavaScript를 최소화할 수 있다.

이는 페이지 로딩 속도를 향상시키고 사용자 경험을 향상시킨다.

💡 서버 컨포넌트는 SSR, 클라이언트 컴포넌트는 CSR이라고 착각하면 안된다.

NextJS에서 모든 컴포넌트는 초기 렌더링 시 서버 사이드 렌더링으로 작동한다.

초기 렌더링 이후(SSR) 추가적인 상호작용이 필요한지(CSR)에 따라 서버 컴포넌트, 클라이언트 컴포넌트로 구분하는 것이다.

클라이언트 컴포넌트는 클라이언트에서만 렌더링 되는 것이 아니라, 클라이언트에서도 렌더링 되는 것!