-
Notifications
You must be signed in to change notification settings - Fork 288
Add experimental.useOffline — offline detection, retry, and useOffline() hook #701
Copy link
Copy link
Open
Labels
nextjs-trackingTracking issue for a Next.js canary change relevant to vinextTracking issue for a Next.js canary change relevant to vinext
Description
Upstream
- [experiment] Add useOffline flag with offline retry behavior vercel/next.js#92011 — offline retry behavior (
904501127c9ed2e0a7ffd51bd192537b7c398fb3) - [experiment] Add useOffline hook to expose offline state to userland vercel/next.js#92012 —
useOffline()hook (7bce97d6485599cab2964ef58fde8a55d19904d3)
Summary
Next.js added a new experimental.useOffline flag that provides two capabilities:
1. Offline retry for navigations, server actions, and prefetches
When a fetch() rejects due to a network error (not abort/timeout), the request blocks until connectivity is restored and then retries automatically, instead of falling back to MPA navigation or surfacing an error.
- New
packages/next/src/client/components/offline.tsmodule owns all offline state: detection, polling with exponential backoff (500ms → 1s → 2s → 3s cap), and connectivity checks via HEAD requests. fetchServerResponse(navigation) catches network errors, callscheckOfflineError()→waitForConnection()→ retries.fetchServerAction(server actions) does the same — safe to replay because the rejection means the request never reached the server.- Browser
offline/onlineevents feed into the polling loop. Successful fetches from any code path short-circuit vianotifyOnline(). - Gated behind
process.env.__NEXT_USE_OFFLINEwith lazyrequire()calls.
2. useOffline() hook via next/offline
- New
next/offlineexport path (offline.js,offline.d.ts). useOffline()hook returnstruewhen offline, powered byOfflineProviderrendered inside the app router.- Uses
useState+useOptimisticso value updates even during blocked transitions. - Module-level
dispatchOfflineChange()bridges from the offline detection module into React state viastartTransition.
Impact on vinext
- New shim needed:
next/offline→ exportuseOffline()hook. Needs to be added to the shim map inindex.ts. - Config flag:
experimental.useOfflineneeds to be recognized if vinext processes next.config. - Client-side router changes: The offline retry logic lives in the client router reducer layer. If vinext ships its own client-side navigation (vs. delegating to Next.js client code), this needs to be replicated. If vinext re-exports Next.js client components, this may come for free with the flag.
OfflineProviderin app router tree: The provider wraps the router content — relevant if vinext constructs the app router React tree.- Prefetch scheduler integration:
notifyOnline()callspingPrefetchScheduler()to resume prefetches after reconnection.
Suggested approach
Start with the shim for next/offline that exports a no-op useOffline() returning false. The full offline retry behavior is complex client-side router logic that can be deferred until the feature stabilizes (it's behind experimental).
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
nextjs-trackingTracking issue for a Next.js canary change relevant to vinextTracking issue for a Next.js canary change relevant to vinext