이번 시간에는 CSR SSR RSC를 프론트엔드 렌더링 패러다임 변화의 순서를 기준으로 설명해보는 시간을 갖도록 하겠습니다.

📌초창기 웹 렌더링 방식

초창기 웹 렌더링 방식(1990년대~2000년대 초반)은 정적 웹 페이지와 동적 서버 렌더링에 의존 하였다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링 해야 했다. 당연히 성능적인 문제도 많았고 사용자 경험 측면에서도 좋지 못했다.
그러다 자바스크립트를 통해서 서버(프론트엔드 프로그램)와 브라우저(클라이언트)가 비동기로 데이터를 주고 받을 수 있는 Ajax(Asynchronous JavaScript and XML) 가 등장하게 되면서 현대의 React, Angular, Vue.js와 같은 SPA 프레임워크의 기초가 됨.

🧐Ajax(Asynchronous JavaScript and XML)특징

장점

• 페이지 새로고침 없이 데이터 갱신
• 향상된 사용자 경험 (UX)
• 필요한 데이터만 요청하므로 네트워크 트래픽 감소

단점

• SEO 문제
• JavaScript가 비활성화된 브라우저에서는 작동하지 않음
• 비동기 요청과 DOM 업데이트 관리로 인해 개발 난이도가 상승

CSR(Client Side Rendering)

Ajax(Asynchronous JavaScript and XML)의 등장으로 다양한 SPA 프레임워크와 더불어 CSR이 함께 등장하게 되었다.SPA는 처음 한번 페이지 전체를 로딩한 후 필요시 데이터만 바꿔 화면을 그려주는 것을 말한다.
CSR은 최초에 하나의 페이지만 서버(프론트엔드 프로그램)로부터 불러와 렌더링하고 그 이후에는 모든 것을 클라이언트(브라우저) 사이드에서 렌더링하는 방식을 말한다. 서버에서 html을 받고 js를 사용하여 웹페이지를 동적으로 렌더링하는 방식이다.

장점

• 사용자 경험(UX) 증가
• 네트워크 요청을 최소화하고, 애플리케이션이 빠르게 반응.

단점

• 초기 페이지 로딩 속도가 느릴 수 있음
• 번들 크기 증가로 인해 성능 문제 발생 가능
• SEO에 불리함

SSR+CSR(Hybrid Rendering)

CSR 방식에서는 SEO 문제가 발생한다. Next.js 와 같은 도구들은 이같은 문제를 SSR로 해결하려고 하였다. 이 때, Hydration이라는 기술로 CSR도 가능하게하여 SSR+CSR로 SPA와 SEO 요구를 동시에 해결하였다.

🧐Hydration

하이드레이션은 서버에서 생성된 HTML이 사용자의 상호작용을 처리할 수 있도록 만드는 과정

React Server Components (RSC)

React의 새로운 렌더링 패러다임으로, 컴포넌트 단위로 렌더링 방식을 SSR 또는 CSR로 나눌 수 있는 기술이다. 서버에서 렌더링된 컴포넌트와 클라이언트 컴포넌트를 혼합하여 사용하게 된다.

주요 특징

1. 서버에서 렌더링된 컴포넌트

• 서버에서 React 컴포넌트를 렌더링하고 그 결과를 클라이언트로 보낸다.
• 클라이언트는 이 데이터를 사용하여 화면에 표시한다.
• 클라이언트가 아닌 서버에서 실행되므로 브라우저에 포함되지 않고 네트워크를 통해 결과만 전달된다.

2. JavaScript 번들 크기 감소

• 서버 컴포넌트는 클라이언트에 번들로 전달되지 않으므로 클라이언트 측 JavaScript 크기를 줄이는 데 도움을 준다.
• 결과적으로 초기 로드 시간이 단축되고 사용자 경험이 향상된다.

3. 데이터 가져오기 최적화

• 서버 컴포넌트는 서버에서 직접 데이터베이스나 API 호출을 수행할 수 있다. 그렇기 때문에, 클라이언트-서버 간 추가 요청 없이 데이터와 UI를 함께 반환할 수 있다.

4. 클라이언트 및 서버 컴포넌트의 조합

• 서버 컴포넌트는 클라이언트 컴포넌트와 혼합하여 사용할 수 있다.
• 보통 클라이언트 컴포넌트는 상태 관리, 사용자 입력 처리 등 클라이언트 측 상호작용이 필요한 기능을 담당하고, 서버 컴포넌트는 데이터 로드와 비상호작용성 UI 렌더링을 담당한다.

5. React의 Streaming 지원

서버에서 렌더링된 결과를 스트리밍하여 클라이언트가 빠르게 초기 화면을 렌더링할 수 있도록 지원한다.

장점

성능 개선

• 서버에서 렌더링되므로 클라이언트 측 작업 부하가 줄어든다.
• 서버에서 바로 데이터를 처리하고 렌더링하기 때문에 데이터 전송 효율성이 높아진다.

SEO 친화적

• 서버에서 생성된 HTML이 브라우저에 전달되므로 SEO(검색 엔진 최적화)에 유리하다.

코드 분리 및 재사용성 증가

• 클라이언트와 서버 간의 명확한 역할 분리로 더 모듈화된 코드를 작성할 수 있다.

코드 예시

서버 컴포넌트 (.server.js 파일)

// ServerComponent.server.js
export default async function ServerComponent() {
  const data = await fetchDataFromAPI(); // 서버에서 데이터 가져오기
  return <div>{data.title}</div>; // 서버에서 바로 렌더링
}

클라이언트에서 사용

import ServerComponent from './ServerComponent.server';
export default function App() {
  return (
    <div>
      <h1>React Server Components Demo</h1>
      <ServerComponent /> {/* 서버에서 렌더링된 결과를 가져옴 */}
    </div>
  );
}

마무리

RSC와 같은 내용들은 Next.js에만 한정된 것은 아니지만, 최적화 되어있는 것은 맞기에 빨리 Next.js도 공부해서 최신 트렌드를 몸소 느껴보고 싶다는 생각이 들었다.