동기

React에는 이미 훌륭한 기본 요소들이 있습니다 — Suspense, ErrorBoundary, lazy. 하지만 실제 애플리케이션에서 사용하면 빈틈이 드러납니다. @suspensive/react는 그 빈틈을 채웁니다.

Suspense는 SSR에서 깨집니다

Next.js에서 <Suspense>를 사용하면 이런 에러를 만나게 됩니다:

Suspensive의 <Suspense/>를 활용하면 clientOnly prop 하나로 SSR 문제를 깔끔하게 해결할 수 있습니다 — 별도의 우회가 필요 없습니다.

ErrorBoundary가 너무 복잡합니다

react-error-boundary는 세 가지 fallback 인터페이스를 제공합니다. Suspensive의 <ErrorBoundary/>를 활용하면 하나의 fallback prop으로 통합하고, shouldCatch로 처리할 에러를 선택할 수 있습니다.

ErrorBoundary 초기화가 번거롭습니다

여러 <ErrorBoundary/>의 resetKeys를 각각 관리하는 것은 고됩니다. Suspensive의 <ErrorBoundaryGroup/>을 활용하면 한 번의 호출로 모두 초기화할 수 있습니다.

로딩 스피너가 깜빡입니다

50ms만 보이는 스피너는 없느니만 못합니다. Suspensive의 <Delay/>를 활용하면 짧은 로딩 상태를 숨겨서, 진짜 기다려야 할 때만 스피너를 보여줄 수 있습니다.

클라이언트 전용 코드가 hydration 불일치를 일으킵니다

Suspensive의 <ClientOnly/>와 useIsClient를 활용하면 안전하게 클라이언트에서만 렌더링할 수 있습니다 — 코드 곳곳에 typeof window !== 'undefined'를 흩뿌릴 필요가 없습니다.

같은 props를 반복 전달하고 있습니다

모든 <Suspense/>에 같은 fallback을 넘기지 마세요. Suspensive의 <DefaultPropsProvider/>를 활용하면 한 번만 설정하면 됩니다.

React.lazy는 사전 로딩도 에러 복구도 안 됩니다

Suspensive의 lazy를 활용하면 .load()로 사전 로딩하고, 청크 로딩 실패 시 자동 재시도할 수 있습니다 — 프로덕션에서야 비로소 필요하다는 걸 알게 되는 기능입니다.