질문
React의 Server Components의 개념을 설명하고, 기존의 Client Components와 비교했을 때 어떤 이점과 단점이 있는지 말씀해주세요. Server Components를 사용하여 React 애플리케이션의 성능을 최적화하는 방법과 발생할 수 있는 제약 사항이나 고려해야 할 점에 대해 설명해주세요.
질문의도
React Server Components의 개념과 기존 Client Components와의 차이점을 이해하고 있는지를 평가합니다. 서버에서의 렌더링을 통해 성능 최적화를 어떻게 달성할 수 있는지, 그리고 이를 도입할 때 발생할 수 있는 제약 사항이나 구현 시 고려할 점을 설명할 수 있는지를 확인하는 문제입니다.
1. Server Component의 개념
React Server Components는 서버에서 렌더링되는 컴포넌트로, 클라이언트가 아닌 서버에서 데이터를 가져오고 HTML을 생성하여 클라이언트에 전달합니다. 이를 통해 클라이언트 측의 자바스크립트 실행을 줄이고, 초기 로딩 속도를 개선하며, 사용자 경험을 향상시키는 데 좋은 방안이라고 생각합니다.
2. Client Component와 비교
장점
•
SEO 친화성: 서버에서 렌더링된 HTML은 검색 엔진이 쉽게 크롤링할 수 있어 검색 최적화(SEO)에 유리합니다. 클라이언트 컴포넌트는 자바스크립트를 통해 렌더링되므로, 검색 엔진이 내용을 제대로 인식하지 못할 수 있습니다. (쉽게 설명하자면, SEO 입장에선 컨텐츠가 서버에서 만들어져 나올 경우 빠르게 컨텐츠를 접할 수 있다는 장점이 존재합니다.)
•
빠른 초기 화면: 서버에서 미리 렌더링된 HTML이 제공되므로, 사용자는 페이지를 더 빠르게 볼 수 있습니다. 클라이언트 컴포넌트는 데이터를 가져오고 렌더링하는 과정에서 시간이 소요될 수 있습니다. (번들링 사이즈도 영향이 큼)
단점
•
상태 관리의 복잡성: 서버 컴포넌트와 클라이언트 컴포넌트 간의 상태 공유가 어려워지며, 이는 애플리케이션의 복잡성을 증가시킬 수 있습니다. 추가로 전역 상태관리를 사용할때나, User Interface 관련 동적 데이터를 다루기 위한 복잡성이 증가 할 수 있다고 생각합니다.
•
제한된 유연성: 서버에서 렌더링되므로, 사용자 인터랙션에 대한 즉각적인 반응이 제한될 수 있습니다. 클라이언트 컴포넌트는 더 많은 동적 기능을 제공할 수 있습니다.
3. Server Component를 사용해 React 애플리케이션 성능 최적화 방법
•
데이터 페칭 통합: 서버에서 직접 데이터를 가져와 필요한 정보를 미리 렌더링함으로써 클라이언트의 데이터 요청을 줄이고, 초기 화면 등장 시간을 단축할 수 있습니다.
•
코드 분할: 서버 컴포넌트를 사용하여 클라이언트에 전달되는 HTML을 최소화하고, 필요한 자바스크립트만 로드함으로써 성능을 최적화합니다.
•
캐싱 활용: 서버에서 렌더링된 결과를 캐싱하여 반복적인 사용자 요청에 대한 응답 속도를 향상시킬 수 있습니다.
4. Server Component와 Client Component를 사용할 때 고려해야 할 점, 제약 사항
고려해야 할 점
•
서버와 클라이언트 간의 데이터 흐름: 서버 컴포넌트와 클라이언트 컴포넌트 간의 데이터 흐름과 상태 관리를 명확히 이해하고 설계해야 합니다.
•
유저 인터페이스 반응성: 서버 컴포넌트를 사용하면서도 클라이언트에서의 즉각적인 사용자 인터랙션을 고려해야 하며, 필요한 경우 클라이언트 컴포넌트를 적절히 활용해야 합니다.(상황에 맞게 동적 페이지와 정적 페이지를 잘 나누어 사용할 수 있는 설계가 필요)
제약 사항
•
서버 의존성: 서버에서 렌더링되므로, 서버의 성능에 따라 전체 애플리케이션의 성능이 영향을 받을 수 있습니다.
•
비동기 처리의 복잡성: 서버에서의 데이터 페칭이 비동기로 이루어지기 때문에, 클라이언트에서의 렌더링과 핸들링이 필요하며, 이로 인해 쓸대없는 복잡성이 증가할 수 있습니다.