Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
Next.js App Router에서 React Query v5.40.0과 Suspense로 데이터 로딩 전략을 비교했습니다. await 없는 prefetch와 점진적 렌더링으로 더 자연스러운 UX를 얻을 수 있음을 실험했습니다.
#Next.js#App Router
12500
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
React Server Component와 Streaming으로 웹 성능 극대화하기: Next.js 실전 가이드
Next.js App Router에서 React Server Components와 Streaming을 활용해 데이터 패칭 패턴을 비교했습니다. loading.tsx와 Suspense, use 훅으로 체감 속도와 로딩 시간을 함께 개선하는 방법을 설명했습니다.
#React#Next.js
22100
CSR 환경에서 Suspense로 발생한 문제 해결하고 성능 개선하기
react-router-dom 기반 CSR 환경에서 Suspense 사용 시 발생한 순차적 API 호출 문제를 프리패칭으로 개선한 사례입니다. 데이터 대기 구간을 줄여 렌더링 흐름과 성능을 높인 경험을 공유했습니다.
#React#CSR
2400
예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법
6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.
#React#SSR
3500
React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
Fetcher가 API 오류를 throw하고 지역·전역 Error Boundary가 이를 계층적으로 처리하는 방식을 소개했습니다.\n오류 영역별 폴백 UI와 재시도 기능으로 나머지 콘텐츠를 유지하는 사용자 경험을 구현했습니다.
#React#error boundary
000
React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
React Error Boundary로 렌더링 에러와 API 에러를 선언적으로 처리하는 구조를 소개했습니다. 제한된 범위의 ApiErrorBoundary와 전역 GlobalErrorBoundary로 재시도 UX까지 구성했습니다.
#React#error boundary
4800
React Query와 함께 Concurrent UI Pattern을 도입하는 방법
React Query의 Suspense 옵션과 Error Boundary로 로딩·오류 UI를 선언적으로 분리했습니다.\n경계 구성으로 복잡한 비동기 화면의 유지보수와 UX 설계를 개선하는 방식을 소개합니다.
#React#React Query
2600
무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?
짧은 API 응답에 스켈레톤을 무조건 노출하면 오히려 화면이 덜그럭거릴 수 있음을 설명했습니다. React Suspense와 성능 지표를 활용한 지연 노출 방식을 제안했습니다.
#React#Suspense
1000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
Transition : 쉿, 이제 안전해 나의 작은 Suspense
Suspense의 fallback 전환이 유발하는 화면 깜빡임 문제를 짚었습니다. React 18 Transition과 Recoil 지원 기능으로 이전 화면을 유지하는 방법을 소개합니다.
#React#Suspense
1900
React 18 에서 추가된 기능
React 18의 동시 렌더링, automatic batching, startTransition 등 주요 추가 기능을 소개했습니다. Suspense로 데이터 로딩 상태와 UI 표시 순서를 분리하는 방식을 설명합니다.
#React#Suspense
1900
Suspense와 선언적으로 Data fetching처리
사이트 개편에서 react-query를 도입한 경험을 다룹니다. Suspense 기반의 선언적 데이터 페칭 처리를 소개합니다.
#React#react-query
000
Suspense와 선언적으로 Data fetching처리
Suspense와 선언적으로 Data fetching처리
Suspense로 Promise 기반 비동기 작업과 fallback 렌더링을 선언적으로 연결했습니다. 경쟁 상태·워터폴·결합도를 줄이는 컴포넌트 구성을 설명합니다.
#React#Suspense
3300