navigator.onLine과 online/offline 이벤트로 연결 상태를 SSR 안전하게 추적.
한 줄 요약
브라우저의 온라인/오프라인 상태를 navigator.onLine + window 이벤트로 실시간 추적하는 훅입니다.
네트워크 의존 UI를 만들 때 오프라인 안내 배너, 저장 대기열(낙관적 큐), 실시간 연결 표시 등.
서버에서는 항상 연결됨으로 시작해 hydration mismatch를 피한다.
마운트 직후 navigator.onLine 실제 값으로 동기화한다.
window online/offline 이벤트를 구독한다.
언마운트 시 리스너를 정리한다.
navigator를 첫 렌더에서 읽으면 SSR mismatch가 난다.
navigator.onLine은 '랜선 연결' 수준이라 실제 도달성과 다를 수 있다.
전환 시점 기록이 필요하면 since 타임스탬프를 함께 노출한다.
오프라인 배너재시도 큐
실시간 협업/채팅의 연결 인디케이터
import type { Metadata } from "next";
import { UseOnlineStatusDemo } from "./-components/UseOnlineStatusDemo";
export const metadata: Metadata = {
title: "useOnlineStatus — 온라인/오프라인 감지 훅 (데모)",
description:
"navigator.onLine과 window online/offline 이벤트로 네트워크 연결 상태를 추적하는 useOnlineStatus 훅. 오프라인 배너·저장 대기열에 표준.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-white">
<UseOnlineStatusDemo />
</main>
);
}