Next.js 16.3 มาพร้อมกับ useOffline hook แบบทดลอง (experimental) ที่ช่วยให้คอมโพเนนต์สามารถตอบสนองได้ทันทีที่เบราว์เซอร์ขาดการเชื่อมต่อเครือข่าย เพียงแค่เรียกใช้ const isOffline = useOffline() คุณก็สามารถสลับการแสดงผล UI ได้ทันที เช่น แสดงข้อความ “You are offline” แทนแอปพลิเคชันหลัก โดยไม่ต้องรอให้คำขอ (request) ล้มเหลว

ทำไม hook นี้ถึงสำคัญในตอนนี้

นักพัฒนาต้องพึ่งพาเหตุการณ์ online/offline ของเบราว์เซอร์มานาน แต่เหตุการณ์เหล่านั้นเป็นระดับต่ำ (low-level) และต้องเขียนโค้ดเชื่อมต่อด้วยตัวเอง Hook ใหม่ของ Next.js ช่วยลดความยุ่งยากของโค้ดส่วนเกิน (boilerplate) ให้เหลือเพียงบรรทัดเดียว ซึ่งสอดคล้องกับรูปแบบการทำงานที่เน้น React เป็นหลัก (React-first paradigm) ประโยชน์ที่เห็นได้ทันทีคือประสบการณ์ผู้ใช้ที่ราบรื่นยิ่งขึ้น เช่น ปุ่มที่ต้องใช้ API แบบเรียลไทม์สามารถถูกปิดใช้งานได้, ฟอร์มสามารถถูกระงับการส่งได้ และสามารถแสดงการแจ้งเตือนที่เป็นมิตรได้ทันทีที่การเชื่อมต่อขาดหายไป สิ่งนี้ช่วยป้องกันข้อผิดพลาดที่เกิดขึ้นเงียบๆ (silent errors) ซึ่งปกติจะปรากฏขึ้นหลังจากที่การ fetch ข้อมูลล้มเหลวเท่านั้น

วิธีเพิ่ม hook นี้ลงในหน้าเพจ

import { useOffline } from 'next/navigation';

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

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

Hook นี้จะคืนค่าเป็น boolean ที่อัปเดตแบบเรียลไทม์ ดังนั้นการเรนเดอร์แบบมีเงื่อนไข (conditional rendering) หรือ effect ใดๆ ก็สามารถตอบสนองได้ทันที เนื่องจากมันอยู่ในแพ็กเกจ next/navigation จึงสามารถใช้งานได้ทั้งกับหน้าเพจที่เรนเดอร์ฝั่งไคลเอนต์ (client-side rendered pages) และ server-components ที่ทำการ hydrate บนไคลเอนต์

ข้อจำกัดที่คุณต้องวางแผนรับมือ

Hook นี้ ไม่ได้ เปลี่ยนเว็บไซต์ให้กลายเป็นแอปพลิเคชันแบบ offline-first แต่มันทำหน้าที่เพียงแค่รายงานสถานะการเชื่อมต่อเท่านั้น หากต้องการให้เนื้อหายังคงใช้งานได้เมื่อไม่มีเครือข่าย คุณยังคงต้อง:

  • แคช (Cache) ไฟล์ static assets ด้วยตัวปรับแต่ง asset ในตัวของ Next.js หรือใช้ service worker
  • เก็บข้อมูลแบบไดนามิกไว้ใน IndexedDB หรือที่เก็บข้อมูลฝั่งไคลเอนต์อื่นๆ
  • ใช้การซิงค์ข้อมูลเบื้องหลัง (background sync) หรือตรรกะการลองใหม่ (retry logic) สำหรับการส่งฟอร์ม

หากไม่มีส่วนประกอบเหล่านี้ UI อาจแจ้งผู้ใช้ว่าพวกเขาออฟไลน์อยู่ แต่แอปพลิเคชันจะยังคงไม่สามารถโหลดข้อมูลใหม่ได้

ความเสี่ยงจากการใช้ API แบบทดลอง

เนื่องจาก useOffline ถูกทำเครื่องหมายว่าเป็นแบบทดลอง (experimental) รูปแบบการใช้งาน (signature) หรือพฤติกรรมของมันอาจเปลี่ยนแปลงได้ในการอัปเดตครั้งหน้า โปรเจกต์ที่นำ hook นี้ไปผูกไว้กับตรรกะทางธุรกิจหลัก (core business logic) อาจจำเป็นต้องปรับเปลี่ยนเมื่อ Next.js มีการอัปเดต แนวทางที่รอบคอบคือการห่อหุ้ม (wrap) hook นี้ไว้ภายใต้ utility ภายในที่สามารถเปลี่ยนออกได้หาก API มีการพัฒนาไปในทิศทางอื่น

สิ่งที่ควรติดตามต่อไป

Next.js ได้ส่งสัญญาณถึงการรองรับการทำงานแบบ offline ที่ครอบคลุมยิ่งขึ้นในการอัปเดตครั้งต่อๆ ไป ซึ่งอาจรวมถึงการรวมกลยุทธ์การทำแคช (caching strategies) เข้ากับเฟรมเวิร์กโดยตรง โปรดติดตามบันทึกการอัปเดต (release notes) เพื่อดูการเปลี่ยนสถานะจาก “experimental” เป็นแบบเสถียร (stable) และดู API ใหม่ๆ ที่จะมาช่วยเสริมการทำงานของ useOffline ด้วยการจัดเก็บข้อมูลแบบอัตโนมัติ (automatic data persistence)

สรุปสาระสำคัญ: useOffline ช่วยให้นักพัฒนาตรวจพบการขาดการเชื่อมต่อและปรับแต่ง UI ได้อย่างรวดเร็ว แต่นี่เป็นเพียงก้าวแรกเท่านั้น ประสบการณ์การใช้งานแบบ offline ที่แข็งแกร่งยังคงต้องอาศัยกลไกการทำแคชและการซิงค์ข้อมูลที่ชัดเจน และสถานะแบบทดลองของ hook นี้หมายความว่าทีมควรแยกการใช้งานของมันออกมาเพื่อหลีกเลี่ยงปัญหาปวดหัวจากการต้องแก้โค้ดใหม่ (refactoring) ในอนาคต