Next.js 16.3 یک هوک آزمایشی به نام useOffline را عرضه میکند که به کامپوننت اجازه میدهد در لحظهی قطع شدن اتصال شبکه توسط مرورگر، واکنش نشان دهد. با فراخوانی const isOffline = useOffline() میتوانید بلافاصله رابط کاربری (UI) را تغییر دهید – برای مثال، به جای اپلیکیشن اصلی، عبارت “You are offline” را نمایش دهید – بدون اینکه منتظر شکست خوردن یک درخواست (request) بمانید.
چرا این هوک در حال حاضر اهمیت دارد
توسعهدهندگان مدتهاست که به رویدادهای online/offline مرورگر متکی بودهاند، اما این رویدادها سطح پایین (low-level) هستند و نیاز به پیادهسازی دستی دارند. هوک جدید Next.js کدهای تکراری (boilerplate) را در یک خط خلاصه میکند و بهخوبی با پارادایم React-first این فریمورک همخوانی دارد. مزیت فوری آن، تجربه کاربری روانتر است: دکمههایی که به یک API زنده نیاز دارند میتوانند غیرفعال شوند، فرمها میتوانند مسدود شوند و بلافاصله پس از قطع اتصال، یک اعلان دوستانه ظاهر شود. این کار از بروز خطاهای بیصدا که معمولاً تنها پس از شکست خوردن یک fetch ظاهر میشوند، جلوگیری میکند.
چگونه آن را به یک صفحه اضافه کنیم
import { useOffline } from 'next/navigation';
export default function Home() {
const isOffline = useOffline();
return isOffline ? (
<p>You are offline</p>
) : (
<App />
);
}
این هوک یک مقدار boolean برمیگرداند که بهصورت آنی (real time) بهروزرسانی میشود، بنابراین هرگونه رندرینگ شرطی یا افکت (effect) میتواند بلافاصله واکنش نشان دهد. از آنجایی که این هوک در پکیج next/navigation قرار دارد، هم در صفحات رندر شده در سمت کلاینت (client-side rendered) و هم در سرور-کامپوننتهایی (server-components) که در کلاینت هییدریت (hydrate) میشوند، کار میکند.
محدودیتهایی که باید برای آنها برنامهریزی کنید
این هوک سایت شما را به یک اپلیکیشن offline-first تبدیل نمیکند. این هوک صرفاً وضعیت اتصال را گزارش میدهد. برای اینکه محتوا در زمان قطع شبکه قابل استفاده باقی بماند، همچنان باید:
- داراییهای استاتیک (static assets) را با بهینهساز داخلی Next.js یا یک service worker کش کنید.
- دادههای پویا را در IndexedDB یا سایر ذخیرهسازهای سمت کلاینت ذخیره کنید.
- منطق همگامسازی پسزمینه (background sync) یا تلاش مجدد (retry) را برای ارسال فرمها پیادهسازی کنید.
بدون این موارد، رابط کاربری ممکن است به کاربر اطلاع دهد که آفلاین است، اما اپلیکیشن همچنان قادر به بارگذاری دادههای جدید نخواهد بود.
ریسکهای استفاده از یک API آزمایشی
از آنجایی که useOffline به عنوان آزمایشی (experimental) علامتگذاری شده است، ساختار یا رفتار آن ممکن است در نسخههای آینده تغییر کند. پروژههایی که این هوک را در منطق اصلی کسبوکار خود قفل میکنند، ممکن است هنگام بهروزرسانی Next.js نیاز به تغییرات داشته باشند. یک رویکرد هوشمندانه این است که هوک را درون یک ابزار کاربردی داخلی (internal utility) قرار دهید تا در صورت تغییر API، بهراحتی قابل جایگزینی باشد.
آنچه باید در آینده دنبال کنید
Next.js در نسخههای آینده به پشتیبانی گستردهتر از حالت آفلاین اشاره کرده است که احتمالاً شامل ادغام استراتژیهای کشینگ بهطور مستقیم در فریمورک خواهد بود. تغییر وضعیت از “experimental” به پایدار (stable) و همچنین معرفی APIهای جدیدی که مکمل useOffline برای ذخیرهسازی خودکار دادهها هستند را در یادداشتهای انتشار (release notes) دنبال کنید.
نکته کلیدی: useOffline راهی سریع برای تشخیص قطع اتصال و شخصیسازی رابط کاربری در اختیار توسعهدهندگان قرار میدهد، اما این تنها اولین قدم است. تجربههای آفلاین قدرتمند همچنان نیازمند مکانیزمهای صریح کشینگ و همگامسازی هستند و وضعیت آزمایشی این هوک به این معناست که تیمها باید استفاده از آن را ایزوله کنند تا از دردسرهای بازنویسی کد (refactoring) در آینده جلوگیری شود.