Solving Real-World Data Fetching Challenges with Next.js and TanStack Query: A Pragmatic Case Study
- 발표자는 청중의 주의를 끌고 데모의 성공을 기원하기 위해 고무 오리를 사용합니다. 🦆
- 2006년 아마존 연구에 따르면 페이지 로드 시간 100ms 증가는 연간 반복 매출(ARR)을 1% 감소시켰으며, 이는 당시 1억 7백만 달러, 현재 38억 달러에 해당합니다. 💰
- 아키텍처 패턴에는 만능 해결책이 없으며, 각 프로젝트의 고유한 요구사항과 환경을 고려해야 합니다. 💡
- 불필요한 조기 최적화는 피해야 합니다. (예: 사용자 0명인 스타트업에서 완벽한 대시보드를 구축하는 DevOps 엔지니어 사례) 🚧
- 개발자는 복잡한 데이터 페칭 및 관리에 따른 원활한 사용자 경험 제공의 어려움에 직면하며, 특히 백엔드 미완성 등 '최적화되지 않은 조건'에서 창의적인 해결책이 필요합니다. 🛠️
- 사용자 대면 웹페이지의 경우, 0~2초의 페이지 로드 시간이 가장 높은 전환율을 보이는 '황금 시간대'입니다. 🚀
- 응답 시간의 세 가지 중요한 한계: 0.1초(즉각적인 반응), 1초(사용자의 사고 흐름 유지 한계), 10초(사용자 주의 유지 한계). ✨🧠⏳
- 페이지 로드 시간이 1~3초일 때 이탈률은 약 32%이지만, 10초로 늘어나면 123%까지 급증할 수 있습니다. 📉
- 과거에는 14KB가 단일 초기 혼잡 윈도우에 맞아 서버 왕복을 최소화하는 '14KB 규칙'이 있었으나, 현대 CDN에서는 46KB 이상으로 늘어날 수 있습니다. 📦
- '정지 비용(stall cost)'은 왕복 시간(RTT)에 따라 발생하며, 사용자 네트워크 환경(예: 3G vs. LAN)에 따라 크게 달라집니다. 🐌
- 핵심 렌더링 페이로드를 초기 혼잡 윈도우 내로 유지하는 것이 중요합니다. 🎯
- Next.js는 React 프레임워크로, 서버 사이드 렌더링, 정적 페이지 생성, 내장 라우팅 등 다양한 기능을 제공합니다. ⚛️
- TanStack Query는 강력한 비동기 상태 관리 라이브러리로, 데이터 페칭뿐만 아니라 전역 상태 관리에도 활용되며 프레임워크에 구애받지 않습니다. 🔄
- API 유형은 크게 공개 API(통제 불가), 내부 API(완전 통제), 파트너/제품 API(제3자 판매용, 제한적 통제)로 나뉩니다. 🌐🤝💼
- 사용하는 API의 한계(장단점)를 이해하고, 그에 맞춰 데이터 소비 전략을 조정하는 것이 중요합니다. 🤔