React 서버 구성요소: 진화-JS 튜토리얼-php.cn

React Server Components: The Evolution

소개

약 10년 전 소프트웨어 개발자로서의 길을 시작했을 때 저는 HTML, CSS, JavaScript 및 일부 Python 2 스크립트를 코딩했습니다. 그 기간 동안 우리는 서버 측 클라이언트-서버 통신을 위해 PHP와 SQL에만 의존했습니다. 그 다음 단계는 상태나 효과에 따른 변화에 반응하는 마법의 단어 '리액트(React)'였다. 페이스북 엔지니어가 만들었다는 소문에 따르면, 문제를 더 깊이 파고들지 않고도 제가 이해한 바는 이렇습니다. 이것은 우리가 프런트엔드 부분을 코딩하는 방식에 있어 폭탄이었습니다.

소프트웨어 개발이 발전하고 백엔드 시스템이 복잡해지면서 RSC(React Server Components)는 생태계의 진화가 절실히 필요하다고 느꼈습니다. 이는 대규모 JavaScript 번들과 "로딩" 스피너가 어디에나 있던 시절을 생각나게 합니다. RSC가 어떻게 게임을 변화시키고 있는지 살펴보겠습니다.

퍼포먼스 혁명

RSC가 가져오는 주요 변화는 기술적인 것뿐만 아니라 철학적인 것이기도 합니다. 전체 구성 요소 트리를 클라이언트에 전달하는 대신 RSC를 사용하면 React에서 좋아하는 상호 작용을 유지하면서 서버에서 구성 요소를 렌더링할 수 있습니다. 저는 대시보드 애플리케이션을 RSC로 마이그레이션했는데 아주 간단하고 이 세상에 없는 일이었으며 크기가 60% 감소한 대시보드 애플리케이션에 확실한 영향을 미쳤습니다.

최근에 제가 접한 실제 사례는 다음과 같습니다.

 // Before: Client Component
 import { ComplexDataGrid } from 'heavy-grid-library';
import { format } from 'date-fns';

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return <ComplexDataGrid data={data} />;
}

로그인 후 복사

이 전통적인 클라이언트측 접근 방식에서는 다음과 같은 여러 가지 일이 발생합니다.

클라이언트 JavaScript와 함께 번들로 제공되는 대용량 데이터 그리드 라이브러리를 가져오고 있습니다.
useState를 사용하여 브라우저에서 로컬로 데이터를 관리하고 있습니다.
useEffect를 사용하여 구성요소가 마운트된 후 데이터를 가져오고 있습니다.
데이터를 가져오는 동안 사용자에게 로딩 상태가 표시됩니다.
모든 데이터 처리는 브라우저에서 이루어지므로 사용자 기기의 속도가 느려질 수 있습니다.

이제 RSC 버전을 살펴보겠습니다.

import { sql } from '@vercel/postgres';
import { DataGrid } from './DataGrid';

export default async function Dashboard() {
  const data = await sql`SELECT * FROM dashboard_metrics`;

  return <DataGrid data={data} />;
}

로그인 후 복사

구성 요소는 기본적으로 비동기식이므로 useEffect 또는 useState가 필요하지 않습니다.
서버 측 쿼리를 통해 직접 데이터베이스에 액세스합니다.
클라이언트 측 데이터 가져오기 코드가 필요하지 않습니다.
초기 데이터에는 제로 로딩 상태가 필요합니다.
데이터 처리는 사용자 기기가 아닌 강력한 서버에서 이루어집니다.
가져온 DataGrid 구성 요소는 데이터 가져오기가 아닌 표시만 처리하면 되므로 훨씬 가벼울 수 있습니다.

변화가 눈에 띕니다. 더 이상 useEffect가 없고, 클라이언트측 데이터를 가져오는 일이 없으며, 가장 중요한 점은 클라이언트에 JavaScript를 불필요하게 전달하는 일이 없다는 점입니다.

실제 혜택

그 영향은 단순한 성과 지표 그 이상입니다. RSC로 작업할 때 이제 데이터베이스 쿼리가 데이터 소스에 더 가깝게 발생하고(위 예에서는 최상의 코딩 방법이 아님) 구성 요소가 더 단순해지고 더 집중되며, 인증 및 권한 부여 패턴이 더 간단해지고 SEO가 향상된다는 점을 알게 되었습니다. 개선 사항은 거의 무료로 제공됩니다. 이는 React 세계에서는 이전에는 일어나지 않았던 일입니다.

그러나 가장 중요한 장점은 개발자 경험입니다. 데이터베이스에 직접 액세스할 수 있는 구성 요소를 작성하는 것은(안전함!) 초능력처럼 느껴집니다. 이는 React의 구성 요소 기반 아키텍처와 Next.js를 통해 가장 진보된 서버 측 렌더링의 성능 이점을 모두 갖춘 것과 같습니다.

상충관계

솔직히 말하자면 RSC는 완벽하지 않습니다. 멘탈 모델을 파악하는 데, 특히 클라이언트/서버 경계를 이해하는 데 시간이 걸립니다. 나에게는 블랙박스에서의 일종의 복잡한 작업이다. 이전 마이그레이션 예를 따르겠습니다. RSC와 호환되지 않는 타사 라이브러리로 인해 몇 가지 장애물이 발생했습니다. 해결책은? 하이브리드 접근 방식:

 // Before: Client Component
 import { ComplexDataGrid } from 'heavy-grid-library';
import { format } from 'date-fns';

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchDashboardData().then(setData);
  }, []);

  return <ComplexDataGrid data={data} />;
}

로그인 후 복사

이 하이브리드 접근 방식에서 어떤 일이 일어나고 있는지 분석해 보겠습니다.

use client 지시문은 SearchFilter를 클라이언트 구성 요소로 명시적으로 표시합니다.
SearchFilter는 클라이언트에서만 발생할 수 있는 사용자 상호 작용(onChange 이벤트)을 처리합니다.
ProductList는 서버 구성 요소로 남아 서버측에서 데이터를 가져옵니다.
구성요소 구성을 통해 적절한 경우 서버 및 클라이언트 렌더링을 혼합할 수 있습니다.
대화형 부분(SearchFilter)만이 JavaScript를 클라이언트에 전달합니다.
데이터가 많은 부분(제품이 포함된 ProductGrid)은 서버에서 렌더링됩니다.

결론(미래는 서버 우선)

RSC는 단순한 새로운 기능 그 이상을 나타냅니다. 이는 React 애플리케이션을 구축하는 방법에 전달되는 패러다임입니다. React의 컴포넌트 모델을 유지하면서 비용이 많이 드는 계산과 데이터 가져오기를 서버로 옮기는 기능은 혁신적입니다.

RSC는 데이터 집약적인 애플리케이션을 구축하는 팀에게 개발자 경험을 희생하지 않고도 더 나은 성능을 얻을 수 있는 길을 제공합니다. 환경이 성숙해지고 더 많은 라이브러리가 RSC와 호환됨에 따라 이 패턴이 React 애플리케이션을 구축하는 기본 방식이 될 것으로 기대합니다.

경험을 공유하세요

프로젝트에서 React Server 구성요소를 사용하기 시작하셨나요? 아래 댓글을 통해 여러분의 의견, 도전 과제 및 승리 소식을 듣고 싶습니다.
이 기사가 RSC를 더 잘 이해하는 데 도움이 되었다면 ❤️을 선택하고 최신 시스템에 대해 더 자세히 알아보려면 저를 팔로우하는 것을 잊지 마세요.

저자 정보

Ivan Duarte는 프리랜서로 일한 경험이 있는 백엔드 개발자입니다. 그는 웹 개발과 인공 지능에 열정을 갖고 있으며 튜토리얼과 기사를 통해 지식을 공유하는 것을 즐깁니다. 더 많은 통찰력과 업데이트를 보려면 X, Github 및 LinkedIn에서 저를 팔로우하세요.