[NextJS] Server와 Client 컴포넌트 각각 언제 사용해야할까?

 

바닐라 React

바닐라 React를 사용한다면 Client Component를 사용하는 것이다. React는 순수 Client 사이드 라이브러리이기 때문이다. 

 

바닐라 React 동작 원리

 

 

NextJS

NextJS는 풀스택 프레임워크이다. 프론트엔드뿐 아니라 백엔드를 가지고 있으며, 코드 또한 백엔드에서 실행된다.  

NextJS 동작 원리

 

NextJS에서 모든 pages, layouts, components는 Server에서 랜더링된다. 이것이 React Server Components라고 불리는 이유이다.

 

서버 컴포넌트는 NextJS에서 기본 값으로 적용된다. 즉, NextJS에서 Component를 만들면 브라우저에서 실행되지 않고, 서버에서 실행된다는 것이다. 따라서 서버 컴포넌트에 console.log를 작성해보면 브라우저에서 실행되는 것이 아니기 때문에 브라우저 개발자 도구 콘솔창에 아무것도 나타나지 않게 된다. 대신, 서버에서 실행되기 때문에 terminal에 해당 console 메세지가 나타나게 된다. 이는 SPA의 특성을 가진 React에서도 나타난다. React 웹에서 페이지를 이동하더라도 최종적으로 새로운 페이지를 fetch하지 않기 때문에 브라우저 콘솔창에 아무것도 나타나지 않는다. 이 경우에도 마찬가지로 백엔드 terminal에 나타나게 된다. 

 

SPA 특성으로 페이지를 이동하더라도 모든 컴포넌트는 서버(backend)에서 랜더링 된다. 이는 finished된 HTML code가 client로 보내지고 랜더링 된다는 것이다. NextJS는 이러한 개념을 포괄하기 때문에 더 적은 JS코드를 클라이언트에 사용하거나, SEO에 유리하다는 중요한 이점이 있다. 왜냐하면 웹 검색 크롤러는 마지막으로 완료된 콘텐츠를 찾는 특성이 있기 때문이다. 바닐라 자바스크립트, 리엑트의 경우 콘텐츠를 나중에 가져오기 때문에 SEO에 불리하다. NextJS로 만들어진 프로젝트에 소스코드를 살펴보면 화면에 보여지는 모든 스크린을 나타내는 것을 알 수 있다. 웹 검색 크롤러는 이를 바라본다. 

 

물론, NextJS에서도 Client 컴포넌트를 사용할 수 있다. NextJS에서는 Client 컴포넌트도 서버에서 사전에 랜더링되는 것은 똑같다. 하지만, 잠정적으로 클라이언트에서 랜더링될 수 있다. 예를들어, 'useState 훅', 'useEffect', 'setInterval 함수', 'onClick 이벤트'가 코드에 들어가 있는 경우 client component를 사용해야 한다. 해당 코드들은 client에서만 동작하도록 요구되거나 사용자와의 상호작용이 필요하기 때문이다.

 

 

하지만 NextJS의 모든 컴포넌트는 서버 컴포넌트로 디폴트 값으로 설정되어 있다. Client 컴포넌트를 사용하려면 NextJS에 'use client'라고 상단에 선언해주어야 한다.