Rethinking React best practices 이 개념 문서에서는 React에서 크고 깊은 트리를 최적화하는 데 따르는 어려움과 차세대 React 프레임워크가 이러한 문제를 해결하는 방법에 대해 자세히 설명합니다. 이 글은 React의 개발 역사와 프론트엔드 개발자와 백엔드 개발자 사이의 '큰 격차'와 같은 과거에 직면했던 과제에 대해 논의하는 것으로 시작합니다. 그런 다음 "프론트엔드를 위한 백엔드" 스타일 코드의 대부분을 서버로 다시 옮기는 등 두 세계의 장점을 조정하는 데 중점을 두고 React 생태계가 어떻게 다시 중간으로 이동하고 있는지에 대해 설명합니다. 그런 다음 이 글에서는 서버 측 렌더링, 데이터 불러오기 제약 조건, 릴레이, React 서버 컴포넌트와 같은 주제를 살펴봅니다. 특히 콘텐츠가 많은 페이지의 경우 서버 측 렌더링이 체감 성능을 개선하는 데 도움이 될 수 있지만 고도로 인터랙티브한 페이지의 사용자 경험을 저하시킬 수 있는 방법을 설명합니다. 그런 다음 최종 사용자 기기에서 로드하고 실행해야 하는 코드의 양을 줄이고 필요한 것만 다운로드하고 실행하는 원칙의 중요성에 대해 설명합니다. 이를 위해 Remix와 Next와 같은 프레임워크는 React의 단방향 데이터 흐름을 서버까지 확장하여 MPA의 단순한 요청-응답 멘탈 모델과 SPA의 상호 작용을 결합합니다. 그런 다음 데이터 불러오기 제약 조건의 문제를 논의하고 컴포넌트가 데이터 종속성을 GraphQL 조각으로 선언적으로 정의할 수 있는 프레임워크인 Relay를 소개합니다. 릴레이 컴파일러는 트리를 통해 각 컴포넌트의 데이터 요구 사항을 수집하고 최적화된 GraphQL 쿼리를 생성하며, 이 쿼리는 런타임에 경로 경계에서 실행됩니다. 그런 다음 이 문서에서는 Remix 및 Next와 같은 프레임워크에서 볼 수 있는 서버의 중첩 경로가 데이터와 코드를 가져올 때 트리를 통과하지 않도록 하는 방법에 대해 설명합니다. 컴포넌트의 초기 데이터 종속성은 일반적으로 URL에 매핑될 수 있으며, URL의 중첩된 세그먼트는 컴포넌트 하위 트리에 매핑되어 프레임워크가 특정 URL에 필요한 데이터와 컴포넌트 코드를 미리 식별할 수 있게 해줍니다. 그런 다음 이 문서에서는 서스펜스, 동시 모드 및 스트리밍이 앞서 설명한 데이터 가져오기 패턴을 어떻게 향상시키는지 자세히 설명합니다. Suspense를 사용하면 데이터를 사용할 수 없을 때 하위 트리가 로딩 UI를 표시하는 것으로 되돌아갔다가 데이터가 준비되면 렌더링을 재개하여 리소스 가져오기와 렌더링을 동시에 병렬로 수행할 수 있습니다. 그런 다음 이 글에서는 서버를 사후 최적화가 아닌 일류 시민으로서 소개하는 React 서버 컴포넌트를 소개합니다. React는 백엔드가 컴포넌트 트리에 포함되는 강력한 외부 레이어를 성장시키기 위해 진화합니다. 이 문서에서는 데이터 변형을 위한 서버 액션 함수의 이점과 React와 Remix에서 어떻게 활용되고 있는지에 대해서도 살펴봅니다. 전반적으로 이 개념 문서는 React에서 크고 깊은 트리를 최적화하는 데 따르는 어려움과 차세대 React 프레임워크가 이러한 영향을 완화하는 방법에 대한 포괄적인 개요를 제공합니다. 더 나은 정보에 기반한 절충안을 만들기 위해 우리가 작동하는 근본적인 제약 조건을 이해하는 것의 중요성과 프레임워크가 개발자가 특정 상황에 대해 더 세분화된 절충안을 만들 수 있는 수단을 점점 더 많이 제공하고 있다는 점을 강조합니다.