React Server Components(RSC)

xxziiko·2024년 12월 22일

[Next.js]

목록 보기

2/2

React의 클라이언트 중심 렌더링의 한계

CSR 중심의 렌더링은 UI를 동적으로 생성하여 초기 로딩 이후 빠른 페이지 전환과 부드러운 사용자 경험을 제공하는 이점이 있지만 한계도 존재

1. 초기 로딩 속도 저하
초기 요청 시 HTML이 빈 껍데기 상태로 전달된 후 클라이언트에서 자바스크립트를 로드하여 실행하기 때문에 데이터 요청 및 렌더링까지 시간이 소요
2. SEO 문제
빈 HTML로 인해 검색 엔진이 페이지 내용을 제대로 색인하지 못하는 문제 발생
3. 자바스크립트 번들 크기 증가
CSR은 클라이언트로 많은 양의 자바스크립트 번들을 전송해야 하기 때문에 브라우저 로딩 시간을 늘리고 성능 저하를 유발

React에서 서버사이드 렌더링 구조의 문제점

1. 자바스크립트 번들 크기가 0인 컴포넌트를 만들 수 없다.

	import snitizeHtml from 'sanitize-html' //206k (63.3k 	gzipped)

	function Board({text} :{text: string}) {
  	const html = useMemo(() => sanitizeHTml(text), 	[text])
  
  	return <div dangerouslySetInnerHtml={{__html: html}} 	/>
	}

이 컴포넌트는 63.3kb에 달하는 sanitize-html가 필요하다.
이렇게 외부 라이브러리가 무겁고 브라우저에서 로드 후 사용해야 하는 경우, 클라이언트의 성능이 저하되고 초기 로딩 속도가 느려질 수 있다.
👉 서버에서 해당 라이브러리를 실행하고 렌더링 결과를 클라이언트에 전달한다면?

2. 백엔드 리소스에 대한 직접적인 접근이 불가능

리액트에서는 백엔드 데이터에 접근하기 위해 REST API와 같은 방법을 사용하는 것이 일반적이다. 편리하지만 백엔드에서 항상 클라이언트가 접근하기 위한 방법을 마련해놓아야 하는 불편함 존재
👉 클라이언트에서 직접 백엔드에 접근해 원하는 데이터를 가져올 수 있다면?

3. 자동 코드 분할(code split) 불가능

코드 분할이란 하나의 거대한 코드 번들 대신, 코드를 여러 작은 단위로 나누어 동적으로 지연 로딩함으로서 앱을 초기화 하는 속도를 높여주는 기법을 말한다. React에서는 주로 lazy를 사용하여 이를 구현해왔지만, 개발자가 모든 필요한 컴포넌트를 수동으로 lazy로 감싸야 한다는 번거로움이 존재
👉 서버에서 코드분할을 자동으로 수행한다면?

4. 연쇄적으로 발생하는 클라이언트와 서버의 요청을 대응하기 어려움

최초 컴포넌트의 요청과 렌더링이 끝나기 전까지 하위 컴포넌트의 요청과 렌더링이 끝나지 않는 점, 서버 요청이 지연됨으로써 컴포넌트 결과물에 의존하는 하위 컴포넌트들의 Loading 상태의 렌더링을 추가적으로 발생시키는 단점 존재
👉 이러한 작업을 서버에서 수행하여 지연을 줄인다면?