Next.js 16.3 ra mắt một hook thử nghiệm useOffline cho phép một component phản ứng ngay lập tức khi trình duyệt mất kết nối mạng. Bằng cách gọi const isOffline = useOffline(), bạn có thể chuyển đổi giao diện ngay tức thì – ví dụ, hiển thị thông báo “Bạn đang ngoại tuyến” thay vì ứng dụng chính – mà không cần đợi một yêu cầu (request) bị lỗi.

Tại sao hook này lại quan trọng vào lúc này

Các nhà phát triển từ lâu đã dựa vào các sự kiện online/offline của trình duyệt, nhưng các sự kiện đó ở cấp thấp và yêu cầu thiết lập thủ công. Hook mới của Next.js trừu tượng hóa các mã lặp lại (boilerplate) thành một dòng duy nhất, khớp hoàn hảo với mô hình ưu tiên React của framework này. Lợi ích tức thì là trải nghiệm người dùng mượt mà hơn: các nút cần API trực tiếp có thể được vô hiệu hóa, các biểu mẫu có thể bị chặn, và một thông báo thân thiện có thể xuất hiện ngay giây phút kết nối bị mất. Điều này ngăn chặn các lỗi âm thầm mà nếu không có nó, chúng sẽ chỉ xuất hiện sau khi một lệnh fetch thất bại.

Cách thêm nó vào một trang

import { useOffline } from 'next/navigation';

export default function Home() {
  const isOffline = useOffline();

  return isOffline ? (
    <p>You are offline</p>
  ) : (
    <App />
  );
}

Hook này trả về một giá trị boolean được cập nhật theo thời gian thực, vì vậy bất kỳ việc render có điều kiện hoặc effect nào cũng có thể phản ứng ngay lập tức. Vì nó nằm trong gói next/navigation, nó hoạt động trên cả các trang được render ở phía client và các server-component được hydrate trên client.

Những giới hạn bạn cần lên kế hoạch trước

Hook này không biến một trang web thành một ứng dụng ưu tiên ngoại tuyến (offline-first). Nó chỉ đơn thuần báo cáo trạng thái kết nối. Để giữ cho nội dung có thể sử dụng được khi không có mạng, bạn vẫn phải:

  • Lưu bộ nhớ đệm (cache) các tài nguyên tĩnh bằng bộ tối ưu hóa tài nguyên tích hợp sẵn của Next.js hoặc một service worker.
  • Lưu trữ dữ liệu động trong IndexedDB hoặc một kho lưu trữ phía client khác.
  • Triển khai cơ chế đồng bộ hóa nền (background sync) hoặc logic thử lại (retry logic) cho việc gửi biểu mẫu.

Nếu không có những thành phần đó, giao diện có thể thông báo cho người dùng rằng họ đang ngoại tuyến nhưng ứng dụng vẫn sẽ không thể tải dữ liệu mới.

Rủi ro khi sử dụng một API thử nghiệm

Vì useOffline được đánh dấu là thử nghiệm, chữ ký (signature) hoặc hành vi của nó có thể thay đổi trong các bản phát hành tương lai. Các dự án đưa hook này vào logic nghiệp vụ cốt lõi có thể cần phải điều chỉnh khi Next.js cập nhật. Một cách tiếp cận thận trọng là bao bọc hook sau một tiện ích (utility) nội bộ để có thể dễ dàng thay thế nếu API tiến hóa.

Điều cần theo dõi tiếp theo

Next.js đã gợi ý về việc hỗ trợ ngoại tuyến rộng hơn trong các bản phát hành sắp tới, có thể là tích hợp trực tiếp các chiến lược lưu bộ nhớ đệm vào framework. Hãy chú ý đến các ghi chú phát hành để biết bất kỳ sự chuyển đổi nào từ trạng thái “thử nghiệm” sang ổn định, và các API mới bổ trợ cho useOffline với khả năng lưu trữ dữ liệu tự động.

Tóm tắt: useOffline cung cấp cho các nhà phát triển một cách nhanh chóng để phát hiện mất kết nối và tùy chỉnh giao diện, nhưng đây mới chỉ là bước đầu tiên. Các trải nghiệm ngoại tuyến mạnh mẽ vẫn đòi hỏi các cơ chế lưu bộ nhớ đệm và đồng bộ hóa rõ ràng, và trạng thái thử nghiệm của hook có nghĩa là các đội ngũ nên cô lập việc sử dụng nó để tránh những rắc rối khi phải tái cấu trúc (refactoring) trong tương lai.