Next.js에서 Cloudflare Workers를 활용한 React Edge로의 탈출기
2024-11-20 13:52:04Next.js에서 Cloudflare로! React Edge 도입기의 시작
반복되는 작은 불편들이 쌓이며, 마침내 결정적인 계기가 되었습니다. Vercel의 높은 비용, 그리고 관리의 복잡함은 물론, SEO 헤더가 서버에서 렌더링되지 않는 문제들이 무엇보다 큰 골칫거리였습니다. 더욱이, Next.js의 최근 방향성은 제게 또 다른 복잡함을 안겨주었습니다.
Cloudflare로의 전환: 새로운 대안을 찾아서
Cloudflare의 강력한 인프라와 함께, 서버리스 환경인 Workers, R2 스토리지, 분산 데이터를 위한 KV까지 활용 가능하다는 점이 매력적이었습니다. 더욱이, 요금 체계가 투명하여 사용한 만큼만 요금이 청구된다는 점도 큰 장점이었습니다.
React Edge: 개발자의 고통을 덜어줄 새로운 React 프레임워크
React Edge의 개발 목표는 명확했습니다. 디렉티브로 혼란스러운 지시를 줄이고, 비싼 비용을 절감하며, 특히 클라이언트와 서버 간의 인위적인 분리를 해소하는 것이었죠. React와 JavaScript, 그리고 Golang에 대한 깊은 이해를 바탕으로, 스트림과 멀티플렉싱을 활용하여 렌더링과 데이터 관리를 최적화했습니다.
Cloudflare Workers의 글로벌 인프라 덕에 이 모든 것이 가능해졌습니다. React Edge는 서버와 클라이언트가 마치 하나의 코드처럼 동작할 수 있도록 하였습니다.
혁신적인 RPC와 데이터 페칭으로 새로운 경험 제공
React Edge에서는 코드를 서버에 작성하고, 클라이언트에서 마치 로컬인 것처럼 호출할 수 있습니다. 이는 강력한 타이프 세이프티와 제로 설정을 제공합니다. 클라이언트와 서버가 동일한 코드베이스를 공유하여, 최적화된 번들로 서버와 클라이언트 양쪽에서 원활하게 작동합니다.
특히, app.useFetch 훅은 데이터 페칭 경험을 통일합니다. 서버에서 데이터를 사전 로드하고, 클라이언트에서 이를 자동으로 활용하며, 필요 시 업데이트를 지원합니다.
Cloudflare 인프라와 완벽한 조화: 성능과 비용 모두 잡는다
Cloudflare의 Edge 기반 인프라 위에서 React Edge는 성능을 극대화하며, 예측 가능한 비용 체계를 제공합니다. 특히, Durability, KV 스토리지 및 기타 Cloudflare의 생태계를 활용하며, 견고하고 확장가능한 앱을 구축할 수 있습니다.
React Edge는 개발 환경, 테스트 및 빌드 프로세스를 Vite를 기반으로 하여, 개발을 가속화하고 컴파일을 최적화합니다. 이는 빠른 개발과 정확한 빌드를 보장합니다.
차세대 React 개발: 서버리스와 하이브리드 환경을 넘어
React Edge는 기존의 API 경로를 별도로 만들 필요가 없으며, 로딩/오류 상태를 수동으로 관리할 필요가 없습니다. 또한, CORS 문제를 처리하거나 직렬화/역직렬화를 걱정할 필요가 없습니다. 이러한 통합과 자동화의 힘으로 더 나은 인터페이스와 애플리케이션을 구축하세요.