데브허브 | DEVHUB | This makes apps way faster...This makes apps way faster...
- 느린 웹 앱의 주요 원인은 과도한 데이터 전송이며, 특히 JS 프레임워크 최적화 이후에도 '실제 데이터' 전송 방식이 병목 현상으로 남아있습니다. 🐢
- 기존 데이터 전송 방식은 '모든 데이터를 한 번에' 보내거나 '수많은 API 호출로 분할'하여 복잡성과 오버헤드를 유발합니다. 📦
- 댄 아브라모프는 '프로그레시브 JSON'이라는 대안을 제시했는데, 이는 데이터를 상단부터 하단으로 보내는 대신 '너비 우선' 방식으로 전송하는 것입니다. 🌳
- 프로그레시브 JSON은 JPEG 이미지가 흐릿하게 로드된 후 점차 선명해지는 방식과 유사하게, 먼저 '구조(뼈대)'를 보내고 실제 콘텐츠는 준비되는 대로 스트리밍합니다. 🖼️
- 이 방식은 데이터가 더 빨라지는 것이 아니라 '더 스마트하게 전달'되어 사용자가 페이지의 80%를 빠르게 볼 수 있게 함으로써 앱이 반응성이 좋다고 느끼게 합니다. 🚀
- React Server Components는 이미 이 원리를 사용하여 UI를 스트리밍하며, 누락된 부분은 Promise로 처리하고 Suspense가 이를 포착합니다. ⚛️
- 프로그레시브 JSON의 장점은 React에 국한되지 않고, Promise를 추적하고 부분 데이터를 처리할 수 있는 모든 프레임워크나 클라이언트에서 활용 가능하다는 점입니다. 🌐
- 개발자는 '모든 것을 한 번에' 또는 '모든 것을 마이크로 요청으로 분할'하는 선택의 딜레마 없이 깔끔한 아키텍처 모델을 유지하면서 성능 향상을 얻을 수 있습니다. ✨