2020년 말 React 팀이 "번들 크기가 없는 React 서버 구성 요소" 개념을 도입했을 때 많은 사람들이 이를 이해하는 데 어려움을 겪었고 여전히 어려움을 겪고 있습니다. 기존 프레임워크 중 어느 것도 새로운 개념을 지원하지 않았으며 프로토타입은 실제 애플리케이션을 구축하는 데 사용할 수 있는 기반을 제공하지 않았습니다.
4년이 지난 지금, React의 필수 버전은 아직 베타 버전이며 프로덕션용으로 출시되지 않았으며 이를 지원하는 유일하고 크고 잘 알려진 프레임워크는 전 React 팀 구성원으로 구성되어 있습니다. 이는 RSC 기반의 대체 프레임워크를 제공하려고 노력한 소수의 개발자에게는 매우 슬픈 상황입니다.
일반적인 React는 브라우저에서 애플리케이션을 구축하기 위한 빠른 선언적 솔루션을 제공하는 데에만 초점을 맞춘 라이브러리입니다. 브라우저의 애플리케이션에는 상태를 가져오고 저장하기 위해 항상 서버가 필요합니다. 이 사실을 바탕으로 React 클라이언트 에코 시스템에는 수많은 솔루션이 개발되어 존재합니다. 점점 더 많은 사람들이 Typescript를 사용하여 백엔드를 만들기 시작하면서 다음 트렌드는 백그라운드에서 API 엔드포인트를 생성하는 입력 인터페이스를 갖춘 RPC의 르네상스입니다.
이러한 요구 사항이 포함된 RSC를 살펴보면 이 모든 것이 다음과 같이 RSC의 범위에 속한다는 사실이 금방 분명해집니다.
이를 통해 애플리케이션 개발자는 클라이언트나 서버에서 렌더링되는 것과 관계없이 모든 구성 요소를 정의하기 위해 React를 사용할 수 있습니다. 이 통합 환경은 최신 앱의 복잡성을 줄이고 백엔드와 프런트엔드에서 중복된 비즈니스 로직을 제거합니다.
리액트 라이브러리는 아직 공식 베타 버전이므로 그 중 어느 것도 프로덕션 준비가 완료된 것으로 볼 수 없습니다.
현재는 Next.js만 프로덕션에 어느 정도 사용할 수 있습니다. 버전 15는 2021년 후반에 버전 12로 시작된 RSC의 4번째 반복입니다.
나열된 프레임워크 외에도 RSC 프레임워크 구축에 대한 청사진이 포함된 저장소가 더 있습니다. 내부에 대해 자세히 알아보려면 이 저장소를 사용하세요.
더 많은 프레임워크를 알고 계시다면 댓글에 해당 프레임워크의 링크를 제공해 주세요.
반응 클라이언트 앱의 훌륭한 기존 번들러를 기반으로 전사하고 번들링하는 것은 간단합니다. 이를 수행하는 데는 여러 가지 옵션이 있으며 가장 많이 사용되는 옵션 중 하나는 ViteJ를 개발 서버 및 번들러로 사용하는 것입니다. JavaScript 프런트엔드 및 백엔드 스택을 제공하는 프레임워크는 여전히 개발 및 프로덕션에서 TypeScript 및 번들링을 처리하기 위한 자체 솔루션을 제공해야 했습니다.
RSC를 사용하면 번들러는 최소 3개의 텍스트 변환 및 번들 파이프라인을 처리해야 합니다.
Vite 버전 6이 출시될 때까지 작동하는 솔루션을 제공하려면 많은 특수 코드가 필요했습니다. Next.js는 버전 15에서 Turbopack으로 전환하여 이런 종류의 문제를 처리하기 위해 구축된 적이 없는 웹팩의 사용과 복잡성에 따른 지연 문제를 해결합니다.
Vite 6의 새로운 기능은 많은 대상 프레임워크 작성자를 대상으로 하며 새로운 환경 API를 통해 훌륭한 솔루션을 제공합니다.
이제 구성 요소가 완전히 다른 환경에서 렌더링된다는 사실을 기반으로 대체 콘텐츠를 제공하여 이러한 각 환경의 제한 사항을 처리할 수 있도록 각 반응 라이브러리를 구축해야 합니다. 현재 대부분의 라이브러리는 많은 브라우저 관련 API가 누락된 SSR 콘텐츠를 생성하기 위해 서버에서 렌더링되는 작업을 처리할 수 있습니다. RSC 구성 요소를 렌더링하면 다른 반응 서버 라이브러리에 추가 제한이 발생합니다. 예를 들어 모든 하위 구성 요소에 테마를 제공하는 데 필요한 반응 컨텍스트 및 상태 및 중단 라이브러리를 지원하지 않습니다. 그리고 라이브러리에는 라이브러리 및 모든 관련 하위 라이브러리에 대한 packages.json 및 ESM-Modules에 적절한 내보내기 옵션이 필요합니다.
RSC용 반응 라이브러리에서 제공하지 않는 두 번째 부분은 라우터입니다. 클라이언트와 서버 라우팅을 처리하는 라우터가 없으면 반응 서버 구성 요소는 서버에서 어떤 상태를 렌더링할지 알 수 없습니다. 이것이 바로 각 프레임워크에 자체 라우터 구현이 함께 제공되는 이유이며 이에 대한 API가 표준화될 때까지 한 프레임워크용으로 개발된 서버 및 클라이언트 구성 요소를 다른 프레임워크와 작동하도록 변경해야 합니다.
React 서버 구성요소에 대한 자세한 내용은 공식 React 문서에서 확인할 수 있습니다.
메타 프레임워크의 선택적 요구 사항:
Next.js 15가 가장 대표적인 RSC 프레임워크인데 왜 대체 프레임워크를 살펴볼 필요가 있을까요?
이 작업을 수행하는 이유는 항상 달성하려는 목표에 따라 결정되지만, 다른 옵션을 살펴보는 것이 타당한 몇 가지 이유를 나열해 보겠습니다.
이 문서는 RSC를 제공하는 대안에만 초점을 맞추고 있지만 RSC와 거의 유사한 기능을 제공하는 더 많은 프레임워크가 있으며 이 문서에 나열된 RSC 프레임워크보다 훨씬 더 나은 대안이 될 수 있다는 점을 명심하세요.
Kato Daishi 개발:
와쿠(와쿠) 또는 わKU는 일본어로 '틀'을 의미합니다. 최소한의 React 프레임워크로서 중소 규모 React 프로젝트를 구축하는 스타트업 및 대행사 개발자의 작업을 가속화하도록 설계되었습니다. 여기에는 마케팅 웹사이트, 가벼운 전자상거래, 웹 애플리케이션이 포함됩니다.
대규모 전자상거래 또는 기업용 애플리케이션에는 다른 프레임워크를 권장합니다. Waku는 서버 구성 요소 시대에 재미있는 개발자 경험을 선사하는 경량 대안입니다. 네, 다시 React 개발을 재미있게 만들어 보겠습니다!
Waku로 새 프로젝트를 시작하는 것은 간단하며 tailwind로 설정된 시작 템플릿을 얻게 됩니다.
npm은 waku@latest를 생성합니다
변경 서버 작업을 사용할 때 단일 요청으로 클라이언트 측 구성 요소에 대한 업데이트를 반환하는 것을 제외하고 모든 기본 요구 사항이 충족됩니다. 현재 모든 서버 변형에는 업데이트된 데이터를 RSC 스트림으로 로드하기 위해 서버에 두 번째 요청이 발생하는 클라이언트 구성 요소의 router.reload()를 사용하여 클라이언트 라우터를 새로 고쳐야 합니다.
다음 선택 요구 사항은 아직 개발 중입니다.
Vercel, Netlify, Cloudflare, PartyKit, Deno, AWS Lambda, NodeJS 등 다양한 배포 대상 지원
번들링의 복잡성으로 인해 많은 타사 라이브러리에서 문제가 발생할 수 있다는 점에 대비하세요.
https://github.com/dai-shi/waku/issues/423
Viktor Lázár 개발:
Vite ❤️를 사용하여 React 서버 구성요소와 서버 액션을 사용하고 싶어서 @lazarv/react-server를 만들었습니다. 대부분의 작은 앱의 경우 Next.js는 너무 많고 너무 무겁고 느렸습니다. node.js를 사용하여 간단한 JavaScript 파일을 실행하는 것과 동일한 경험을 하고 싶었습니다. 이 프레임워크는 가능한 한 의견을 피하려고 노력하고 있습니다. 당신은 당신이 원하는 무엇이든 성취할 수 있습니다. 유일한 제한은 자체 React 버전을 사용한다는 것입니다. 프로젝트에 React를 설치할 필요조차 없습니다. 모든 것이 프레임워크에 포함되어 있습니다. 제가 이 프레임워크를 만들고 이 문서를 작성하는 데 사용했던 것처럼 여러분도 이 프레임워크를 사용하여 즐거운 시간을 보내시기를 바랍니다. - 라자르
이 프레임워크를 사용하면 반응 서버 구성요소를 배우는 것이 매우 쉽습니다! 유효한 반응 서버 구성 요소가 포함된 단일 파일과 명령 실행만 있으면 됩니다.
./App.jsx
export default function App() {
return <h1>Hello, World!</h1>
}
npx @lazarv/react-server ./App.jsx
튜토리얼 섹션에는 시작하는 방법에 대한 유용한 문서와 몇 가지 예제 프로젝트가 있습니다.
모든 기본 요구 사항이 충족됩니다단일 요청으로 클라이언트 측 구성 요소에 업데이트를 반환하는 경우(변형 서버 작업을 사용할 때
제외)런타임은 NodeJS API에 따라 다르므로 다른 런타임도 마찬가지입니다. (AWS Lambda@Edge, Cloudflare)는 현재 지원되지 않습니다.
추가로 다음 기능이 있습니다:
배포 대상: NodeJS, Vercel - 개발 중인 어댑터: Netlify, Cloudflare, sst
Tailwind CSS, TanStack 쿼리, Mantine UI, Material UI를 즉시 지원합니다.
Tom Preston-Werner 제공:
Redwood는 풀스택 JavaScript 애플리케이션 프레임워크입니다.
배터리, 백엔드, React, 규칙 및 의견이 포함됩니다.
아직 개발 중 Node v20 및 Yarn 4에서만 작동합니다.
export default function App() {
return <h1>Hello, World!</h1>
}
그런 다음 몇 가지 실험적 기능을 활성화해야 합니다.
npx @lazarv/react-server ./App.jsx
마지막으로 구축하고 제공합니다.
npx -y create-redwood-app@canary -y ~/rsc_app cd ~/rsc_app
setup-rsc 명령의 일부로 베어본 RSC 앱이 생성되어 서버 구성 요소 내부에서 클라이언트 구성 요소 렌더링을 보여줍니다
배포 대상: Vercel, Netlify, Render, GCP 또는 Coherence를 통한 AWS, Flightcontrol을 통한 AWS, NodeJS
| Next.js | WAKU | React-server | RedwoodJS | |
|---|---|---|---|---|
| DEV-Environment / Bundling | Turbopack | Vite 5 | Vite 6 | Vite |
| Rendering | SSR, ISR, SSG, CSR | SSR, SSG, CSR | SSR, SSG, CSR, Micro-Frontends | SSR, SSG, CSR |
| Caching Layers | Yes | No | Yes | ?? |
| Deployment Target | Vercel, NodeJS | Vercel, Netlify, Cloudflare, Deno, AWS Lambda, PartyKit, NodeJS | Vercel, NodeJS, sst (AWS Lambda) | Vercel, Netlify, AWS, NodeJS |
| Community | Very Big | Tiny | Just Starting | Small |
| Open Source Financing | Vercel | Donations | Donations | Privately Funded by a Rich Guy |
주요 시사점 요약:
프로젝트에 가장 적합한 프레임워크를 찾아보세요.
위 내용은 Next.js를 넘어서: 대체 React 서버 구성 요소 프레임워크 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
