[Next.js] 3. client component, CSR, SSR, sever component

"use client"는 클라이언트 컴포넌트를 만들기 위해서,

"use server"는 서버 액션을 만들기 위해서 사용한다.

서버 컴포넌트는 없다.

app directory 안에 있는 모든 컴포넌트들은 기본적으로 서버 컴포넌트이기 때문이다.

 

 

서버 컴포넌트가 클라이언트 컴포넌트가 되지 않도록

클라이언트 컴포넌트로 빼줄 수 있는부분은 그때그때 _component 폴더로 빼주자!

 

 

1. client component, CSR 뿐이던 시절

유저가 웹에 접속하면,

리액트 실행에 필요한 코드를 다운받고, 리액트 컴포넌트 트리를 만들고, 트리를 바탕으로 DOM에서 렌더링을 진행한다.

 

이 방식으로는 유저가 초기 화면을 보기까지 시간이 오래 걸린다.

 

 

2. SSR 등장

클라이언트가 DOM을 만들지 않는다.

서버가 DOM을 만들고 클라이언트는 이 DOM을 전달받는다.

그리고 클라이언트는 DOM에서 Hydration만 진행한다. 

 

즉, 서버의 도움을 받아 초기 화면을 빠르게 띄우기 위함이다.

하지만 모든 기능이 작동하는 웹이 되기 위해서는 Hydration이 완료되어야 한다.

 

SSR의 도입으로 빠르게 화면을 볼 수는 있게 됐지만, 여전히 여러가지 성능에 문제가 있었다.

그중에서도 리액트 컴포넌트를 Hydration 시키기 위해서

다운로드 받고 실행해야 되는 import 되는 라이브러리들의 번들 사이즈는 클라이언트의 큰 부담이었다.

 

 

3. server component 등장

리액트 서버 컴포넌트는 리액트 v18에 도입된 새로운 기능이다.

서버에서만 렌더링되고 클라이언트로 전송되지 않는 컴포넌트이다.

렌더링의 부담을 클라이언트가 아닌 온전히 서버가 진다.

(import되는 라이브러리를 브라우저가 신경쓰지 않아도 된다.)

다만 유저에게 인터랙티비티 제공 불가능하다.

 

장점

• 클라이언트 사이드의 자바스크립트 번들 크기 감소한다. (클라이언트 사이드 처리 부담 감소)
• 자유롭게 서버 리소스에 접근 가능하다
• 보안이 중요한 정보를 클라이언트 측에 전달하지 않을 수 있다.
• 자동 코드 분할이 가능하다.
• 서버에 렌더링 값을 캐싱할 수 있다. (전송 데이터 양 감소)
• 애플리케이션 로딩 시간이 단축된다. (서버로 부터 완성된 컴포넌트를 받기 때문)

 

 

4. server component, client component 사용처

server component

• 데이터 패칭
• 서버 리소스에 직접 접근
• 민감한 데이터 접근(API키, 토큰)
• 자바스크립트 번들 사이즈 축소 필요

client component

• 인터렉티비티 혹은 이벤트 리스너 사용(onClick(), onChange())
• 상태나 라이프사이클 부수효과 사용(useState(), useReducer(), useEffect())
• browser-only API 사용(LocalStorage, Cookie, SessionStorage)

 

 

5. sever component vs SSR

둘다 리액트 애플리케이션 성능 향상을 목적으로 한다.

그러나 접근 방식과 사용 사례가 다르다.

 

server component : 서버에서 렌더링되는 컴포넌트 (클라이언트 사이드 자바스크립트 번들 크기 축소)
SSR : 서버에서 HTML을 생성하는 기술 (초기 페이지 로딩 시간 단축, 데이터패칭 등 로직처리에 유용, SEO 유리)

 

 

CSR과 SSR을 비교해보자

CSR은 JS엔진과 모든 데이터 로드가 완료된 이후에 컴포넌트 렌더링을 진행한다. (느릴 수 밖에)

SSR은 JS파일을 서버에서 먼저 HTML로 렌더링을 진행한다.

뭐 어찌되었든 페이지가 정상 작동하기 위해서는

JS번들이 모드 다운로드되고 하이드레이션이 완료되어야 하지만!

서버에서 빈화면이 아닌 데이터가 존재하는 HTML을 클라이언트 제공함으로써

JS파일이 다운로드 되는 동안 사용자에게 빈화면이 아닌 의미있는 콘텐츠를 제공할 수 있게 된다.

(non-interactive한 버전의 클라이언트 컴포넌트를 브라우저에 빠르게 전달해 초기 페이지를 빠르게)

 

요약

SSR : 초기 HTML 페이지를 빠르게 보여주기 위함

server component : 자바스크립트 번들 사이즈 감소

server component는 SSR의 대체가 아닌, 보완의 수단으로 사용될 수 있다.

둘을 함께 활용함으로써 사용자에게 훨씬 빠르게 인터렉팅한 페이지를 제공할 수 있게 된다.

(server component를 통해서 TTV TTI 차이 감소)

 

 

6. import

클라이언트 컴포넌트에서 서버 컴포넌트를 import 하는 것은 제한된다.

서버 컴포넌트에는 서버 전용 코드가 있을 수 있기 때문이다.

 

서버 컴포넌트에서는 클라이언트 컴포넌트, 서버 컴포넌트, native elements 임포트 및 렌더링 가능

 

+

클라이언트 컴포넌트에 자식 컴포넌트가 서버 컴포넌트일 경우에는

부모 컴포넌트의 children으로 서버 컴포넌트를 넣어주면 가능하다.(?)

즉, 서버 컴포넌트는 클라이언트 컴포넌트의 자식일때, children이나 props로 보낸다. (import X)