Next.js 16.3에는 브라우저의 네트워크 연결이 끊기는 즉시 컴포넌트가 반응할 수 있게 해주는 실험적(experimental)인 useOffline 훅이 포함되었습니다. const isOffline = useOffline()을 호출하면 요청이 실패할 때까지 기다릴 필요 없이 UI를 즉시 전환할 수 있습니다. 예를 들어, 메인 앱 대신 “오프라인 상태입니다”라는 문구를 렌더링할 수 있습니다.
이 훅이 지금 중요한 이유
개발자들은 오랫동안 브라우저의 online/offline 이벤트에 의존해 왔지만, 이러한 이벤트는 로우 레벨(low-level)이며 수동으로 연결 작업을 해주어야 합니다. Next.js의 새로운 훅은 이러한 반복적인 코드(boilerplate)를 한 줄로 추상화하여 프레임워크의 React 우선(React-first) 패러다임에 깔끔하게 녹아듭니다. 즉각적인 이점은 더 매끄러운 사용자 경험입니다. 실시간 API가 필요한 버튼을 비활성화하거나, 폼 제출을 차단하고, 연결이 끊기는 즉시 친절한 안내 메시지를 표시할 수 있습니다. 이를 통해 fetch 요청이 실패한 후에야 나타나는 조용한 오류(silent errors)를 방지할 수 있습니다.
페이지에 추가하는 방법
import { useOffline } from 'next/navigation';
export default function Home() {
const isOffline = useOffline();
return isOffline ? (
<p>You are offline</p>
) : (
<App />
);
}
이 훅은 실시간으로 업데이트되는 불리언(boolean) 값을 반환하므로, 모든 조건부 렌더링이나 이펙트(effect)가 즉각적으로 반응할 수 있습니다. next/navigation 패키지에 포함되어 있기 때문에, 클라이언트 사이드 렌더링(CSR) 페이지와 클라이언트에서 하이드레이션(hydrate)되는 서버 컴포넌트 모두에서 작동합니다.
대비해야 할 한계점
이 훅은 사이트를 오프라인 우선(offline-first) 앱으로 만들어 주지는 않습니다. 단순히 연결 상태를 보고할 뿐입니다. 네트워크가 끊겼을 때도 콘텐츠를 계속 사용할 수 있게 하려면 여전히 다음 작업이 필요합니다:
- 내장된 Next.js 에셋 최적화 도구(asset optimizer)나 서비스 워커(service worker)를 사용하여 정적 에셋을 캐싱합니다.
- IndexedDB 또는 다른 클라이언트 사이드 저장소에 동적 데이터를 저장합니다.
- 폼 제출을 위한 백그라운드 동기화(background sync) 또는 재시도 로직을 구현합니다.
이러한 요소들이 없다면, UI가 사용자에게 오프라인 상태임을 알릴 수는 있지만 앱은 여전히 새로운 데이터를 불러올 수 없습니다.
실험적 API 사용 시의 리스크
useOffline은 실험적(experimental) 단계로 표시되어 있으므로, 향후 릴리스에서 시그니처(signature)나 동작이 변경될 수 있습니다. 이 훅을 핵심 비즈니스 로직에 직접 고정해 둔 프로젝트는 Next.js가 업데이트될 때 수정이 필요할 수 있습니다. 신중한 접근 방식은 API가 진화할 경우 교체할 수 있도록 내부 유틸리티로 이 훅을 래핑(wrap)하는 것입니다.
향후 주목할 점
Next.js는 향후 릴리스에서 캐싱 전략을 프레임워크에 직접 통합하는 등 더 광범위한 오프라인 지원을 암시했습니다. “실험적” 단계에서 “안정적(stable)” 단계로 전환되는지, 그리고 자동 데이터 지속성(data persistence)을 통해 useOffline을 보완하는 새로운 API가 나오는지 릴리스 노트를 주의 깊게 살펴보시기 바랍니다.
요약: useOffline은 개발자가 연결 끊김을 빠르게 감지하고 UI를 맞춤화할 수 있는 방법을 제공하지만, 이는 시작 단계일 뿐입니다. 견고한 오프라인 경험을 위해서는 여전히 명시적인 캐싱 및 동기화 메커니즘이 필요하며, 이 훅의 실험적 상태를 고려할 때 향후 리팩터링의 번거로움을 피하려면 사용 범위를 격리하여 관리하는 것이 좋습니다.