[NextJs] server 컴포넌트 (vs client 컴포넌트, vs SSR)

Next.js가 v13으로 버전 업데이트가 되면서, 기존에 page 폴더에서 해왔던 작업들이 app 폴더에서 진행되게 변경되었고 추가적인 변화들이 생겼습니다.

 

그중에서 이 글에서 알아볼 것은 server componet 입니다.

 

Server Componet 란?

server 컴포넌트란 서버를 벗어나지 않는 컴포넌트입니다.

 

조금더 길게 써보면,

server 컴포넌트의 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공합니다.

즉 해당 컴포넌트의 js 코드가 클라이언트에서 실행되지 않는다는 것을 의미합니다.

 

이게 무슨 의미가 있을까요?

일반적인 CSR에서는 컴포넌트의 js 코드가 클라이언트로 전송되고, 클라이언트에서 실행됩니다.

반면 server 컴포넌트는 앞서 언급했듯이 클라이언트로 js 코드를 보내지 않습니다.

대신 이러한 코드를 서버에서 실행하며 결과는 클라이언트로 스트리밍되어 라우트 세그먼트 단위로 캐시됩니다.

 

이런 과정에서 얻을 수 있는 이점은 크게 2가지가 있습니다.

1. 클라이언트에서는 js 코드가 실행되지 않으므로 클라이언트의 부하가 줄어듭니다.

2. 결과를 스트리밍(여러개의 작은 패킷으로 분할 -> 순차적으로 클라이언트에 전송)하므로 서버에서 처리되는 내용이 거의 실시간으로 표시되고, js가 필요없는 것들은 미리 로딩되어있고 js가 필요한 것들이 이후에 순차적으로 로딩되는 등의 컨트롤이 가능해집니다.

 

Server Componet vs SSR

server 컴포넌트는 서버에서만 렌더링되고, 그 결과는 HTML과 함께 스트리밍되어 클라이언트로 전송됩니다. 이 컴포넌트의 js코드는 서버에 남아 있으므로, 클라이언트에 전송되지 않습니다. 이는 클라이언트에게 보내는 코드의 양을 줄이고, 따라서 웹사이트의 로딩 시간을 줄일 수 있습니다.

이 방식의 한 가지 중요한 특징은, 서버 컴포넌트는 서버에서 필요한 데이터를 모두 가져올 수 있다는 것입니다. 이는 클라이언트와 서버 간의 요청-응답 사이클을 줄일 수 있습니다. 클라이언트는 서버 컴포넌트의 렌더링 결과를 받아서 그대로 표시하면 됩니다.

 

SSR은 서버에서 컴포넌트를 렌더링하고, 그 결과를 HTML 형태로 직렬화하여 클라이언트로 보냅니다. 클라이언트는 이 HTML을 받아서 초기 페이지 로딩 시에 표시합니다.

하지만 SSR에서는 해당 컴포넌트와 연결된 js와 데이터도 클라이언트로 전송됩니다. 클라이언트는 이 js를 실행하여 컴포넌트를 hydrate 합니다. 이는 클라이언트가 서버에서 렌더링된 컴포넌트를 다시 활성화하고, 사용자 상호작용을 처리할 수 있게 하는 과정입니다.

 

즉, SSR은 초기 페이지 로딩 시간을 단축한다는 이점이 있지만, 이후에는 클라이언트에서 js를 실행해야 하므로 클라이언트의 부하가 늘어날 수 있습니다. 또한, 데이터를 직렬화하고 전송하는 과정에서 추가적인 네트워크 부하가 발생할 수 있습니다.

 

언제 server / client 컴포넌트를 사용해야할까?

기본적으로 다음 중 하나 이상에 해당하지 않는 한 모든 컴포넌트에는 항상 서버 컴포넌트를 사용하는 것이 권장됩니다.

Next.js의 app 폴더 또한 기본적으로 모든 컴포넌트를 server 컴포넌트로 강제하고 있습니다. (만약 client 컴포넌트로 전환하려면 파일 최상위에 "use client" 를 추가해주면 됩니다)

1. 브라우저와 상호작용이 필요하거나, 이벤트 리스너(onClick(), onChange() 등)가 필요할 때
2. 상태 및 라이프사이클 효과(useState(), useReducer(), useEffect() 등), 즉 react hook을 사용할 때
3. 브라우저 전용 API를 사용할 때 (window, document..)
4. React 클래스 컴포넌트를 사용할 때