Next.js 16.3 ಒಂದು ಪ್ರಯೋಗಾತ್ಮಕ useOffline hook ಅನ್ನು ಪರಿಚಯಿಸಿದೆ, ಇದು ಬ್ರೌಸರ್ ತನ್ನ ನೆಟ್‌ವರ್ಕ್ ಸಂಪರ್ಕವನ್ನು ಕಳೆದುಕೊಂಡ ಕ್ಷಣದಲ್ಲೇ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಪ್ರತಿಕ್ರಿಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. const isOffline = useOffline() ಅನ್ನು ಕರೆಯುವ ಮೂಲಕ, ನೀವು ರಿಕ್ವೆಸ್ಟ್ ಫೇಲ್ ಆಗುವವರೆಗೆ ಕಾಯದೆ ತಕ್ಷಣವೇ UI ಅನ್ನು ಬದಲಾಯಿಸಬಹುದು - ಉದಾಹರಣೆಗೆ, ಮುಖ್ಯ ಆ್ಯಪ್ ಬದಲಿಗೆ “You are offline” ಎಂದು ತೋರಿಸಬಹುದು.

ಈ hook ಈಗ ಏಕೆ ಮುಖ್ಯ?

ಡೆವಲಪರ್‌ಗಳು ದೀರ್ಘಕಾಲದಿಂದ ಬ್ರೌಸರ್‌ನ online/offline ಇವೆಂಟ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತರಾಗಿದ್ದಾರೆ, ಆದರೆ ಆ ಇವೆಂಟ್‌ಗಳು ಲೋ-ಲೆವೆಲ್ ಆಗಿದ್ದು, ಅವುಗಳನ್ನು ಮ್ಯಾನುಯಲ್ ಆಗಿ ಜೋಡಿಸಬೇಕಾಗುತ್ತದೆ. Next.js ನ ಹೊಸ hook ಈ ಬಾಯ್ಲರ್ ಪ್ಲೇಟ್ (boilerplate) ಕೋಡ್ ಅನ್ನು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಸರಳಗೊಳಿಸುತ್ತದೆ, ಇದು ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ React-first ಪ್ಯಾರಾಡೈಮ್‌ಗೆ ಸುಲಲಿತವಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ಇದರ ತಕ್ಷಣದ ಪ್ರಯೋಜನವೆಂದರೆ ಸುಗಮವಾದ ಬಳಕೆದಾರ ಅನುಭವ (user experience): ಲೈವ್ API ಅಗತ್ಯವಿರುವ ಬಟನ್‌ಗಳನ್ನು ಡಿಸೇಬಲ್ ಮಾಡಬಹುದು, ಫಾರ್ಮ್‌ಗಳನ್ನು ಬ್ಲಾಕ್ ಮಾಡಬಹುದು ಮತ್ತು ಸಂಪರ್ಕ ಕಳೆದುಗೊಂಡ ತಕ್ಷಣವೇ ಬಳಕೆದಾರರಿಗೆ ತಿಳುವಳಿಕಾತ್ಮಕ ನೋಟಿಸ್ ಅನ್ನು ತೋರಿಸಬಹುದು. ಇದು ಫೆಚ್ (fetch) ಫೇಲ್ ಆದ ನಂತರವಷ್ಟೇ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಮೌನ ದೋಷಗಳನ್ನು (silent errors) ತಡೆಯುತ್ತದೆ.

ಇದನ್ನು ಪೇಜ್‌ಗೆ ಸೇರಿಸುವುದು ಹೇಗೆ

import { useOffline } from 'next/navigation';

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

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

ಈ hook ರಿಯಲ್ ಟೈಮ್‌ನಲ್ಲಿ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಬೂಲಿಯನ್ (boolean) ಅನ್ನು ರಿಟರ್ನ್ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಯಾವುದೇ ಕಂಡೀಷನಲ್ ರೆಂಡರಿಂಗ್ ಅಥವಾ ಎಫೆಕ್ಟ್ ತಕ್ಷಣವೇ ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು. ಇದು next/navigation ಪ್ಯಾಕೇಜ್‌ನಲ್ಲಿ ಇರುವುದರಿಂದ, ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೆಂಡರ್ ಆಗುವ ಪೇಜ್‌ಗಳು ಮತ್ತು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಹೈಡ್ರೇಟ್ ಆಗುವ ಸರ್ವರ್-ಕಾಂಪೊನೆಂಟ್‌ಗಳೆರಡರ ಮೇಲೂ ಇದು ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ನೀವು ಯೋಜಿಸಬೇಕಾದ ಮಿತಿಗಳು

ಈ hook ಒಂದು ಸೈಟ್ ಅನ್ನು ಆಫ್‌ಲೈನ್-ಫಸ್ಟ್ ಆ್ಯಪ್ ಆಗಿ ಪರಿವರ್ತಿಸುವುದಿಲ್ಲ. ಇದು ಕೇವಲ ಕನೆಕ್ಟಿವಿಟಿ ಸ್ಥಿತಿಯನ್ನು ವರದಿ ಮಾಡುತ್ತದೆ. ನೆಟ್‌ವರ್ಕ್ ಇಲ್ಲದಿದ್ದಾಗ ಕಂಟೆಂಟ್ ಅನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಾಗುವಂತೆ ಮಾಡಲು ನೀವು ಇವುಗಳನ್ನು ಮಾಡಲೇಬೇಕು:

  • ಇನ್‌ಬಿಲ್ಟ್ Next.js ಅಸೆಟ್ ಆಪ್ಟಿಮೈಸರ್ ಅಥವಾ ಸರ್ವಿಸ್ ವರ್ಕರ್ ಬಳಸಿ ಸ್ಟ್ಯಾಟಿಕ್ ಅಸೆಟ್‌ಗಳನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ.
  • ಡೈನಾಮಿಕ್ ಡೇಟಾವನ್ನು IndexedDB ಅಥವಾ ಇನ್ನಾವುದೇ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೋರ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ.
  • ಫಾರ್ಮ್ ಸಬ್ಮಿಷನ್‌ಗಳಿಗಾಗಿ ಬ್ಯಾಕ್‌ಗ್ರೌಂಡ್ ಸಿಂಕ್ ಅಥವಾ ರಿಟ್ರೈ ಲಾಜಿಕ್ ಅನ್ನು ಅಳವಡಿಸಿ.

ಈ ಅಂಶಗಳಿಲ್ಲದೆ, UI ಬಳಕೆದಾರರು ಆಫ್‌ಲೈನ್‌ನಲ್ಲಿದ್ದಾರೆ ಎಂದು ತಿಳಿಸಬಹುದು, ಆದರೆ ಆ್ಯಪ್ ಹೊಸ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ.

ಪ್ರಯೋಗಾತ್ಮಕ API ಬಳಸುವ ಅಪಾಯಗಳು

useOffline ಅನ್ನು ಪ್ರಯೋಗಾತ್ಮಕ ಎಂದು ಗುರುತಿಸಲಾಗಿದ್ದರಿಂದ, ಭವಿಷ್ಯದ ಬಿಡುಗಡೆಗಳಲ್ಲಿ ಅದರ ಸಿಗ್ನೇಚರ್ ಅಥವಾ ವರ್ತನೆಯು ಬದಲಾಗಬಹುದು. ಈ hook ಅನ್ನು ಕೋರ್ ಬಿಸಿನೆಸ್ ಲಾಜಿಕ್‌ನಲ್ಲಿ ಬಳಸುವ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು, Next.js ಅಪ್‌ಡೇಟ್ ಆದಾಗ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಿಕೊಳ್ಳಬೇಕಾಗಬಹುದು. API ವಿಕಸನಗೊಂಡರೆ ಬದಲಾಯಿಸಬಹುದಾದ ಒಂದು ಇಂಟರ್ನಲ್ ಯುಟಿಲಿಟಿ (internal utility) ಮೂಲಕ ಈ hook ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು ಒಂದು ವಿವೇಕಯುತ ವಿಧಾನವಾಗಿದೆ.

ಮುಂದೆ ಏನನ್ನು ಗಮನಿಸಬೇಕು

Next.js ತನ್ನ ಮುಂದಿನ ಬಿಡುಗಡೆಗಳಲ್ಲಿ ವ್ಯಾಪಕವಾದ ಆಫ್‌ಲೈನ್ ಬೆಂಬಲವನ್ನು ನೀಡುವ ಬಗ್ಗೆ ಸೂಚನೆ ನೀಡಿದೆ, ಬಹುಶಃ ಕ್ಯಾಶಿಂಗ್ ಸ್ಟ್ರಾಟಜಿಗಳನ್ನು ನೇರವಾಗಿ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗೆ ಸಂಯೋಜಿಸಬಹುದು. ಇದು “experimental” ನಿಂದ “stable” ಸ್ಥಿತಿಗೆ ಬದಲಾಗುತ್ತದೆಯೇ ಎಂದು ಮತ್ತು ಆಟೋಮ್ಯಾಟಿಕ್ ಡೇಟಾ ಪರ್ಸಿಸ್ಟೆನ್ಸ್‌ನೊಂದಿಗೆ (data persistence) useOffline ಗೆ ಪೂರಕವಾಗಿ ಬರುವ ಹೊಸ APIಗಳಿಗಾಗಿ ರಿಲೀಸ್ ನೋಟ್ಸ್‌ಗಳನ್ನು ಗಮನಿಸುತ್ತಿರಿ.

ಸಾರಾಂಶ: useOffline ಡೆವಲಪರ್‌ಗಳಿಗೆ ಕನೆಕ್ಟಿವಿಟಿ ಕಳೆ//ದನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು UI ಅನ್ನು ಸರಿಹೊಂದಿಸಲು ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ, ಆದರೆ ಇದು ಮೊದಲ ಹೆಜ್ಜೆ ಮಾತ್ರ. ದೃಢವಾದ ಆಫ್‌ಲೈನ್ ಅನುಭವಗಳಿಗೆ ಇಂದಿಗೂ ಸ್ಪಷ್ಟವಾದ ಕ್ಯಾಶಿಂಗ್ ಮತ್ತು ಸಿಂಕ್ ಮೆಕ್ಯಾನಿಸಂಗಳು ಅಗತ್ಯವಿವೆ, ಮತ್ತು ಈ hook ನ ಪ್ರಯೋಗಾತ್ಮಕ ಸ್ಥಿತಿಯು ಭವಿಷ್ಯದ ರಿಫ್ಯಾಕ್ಟರಿಂಗ್ (refactoring) ತಲೆನೋವುಗಳನ್ನು ತಪ್ಪಿಸಲು ತಂಡಗಳು ಇದರ ಬಳಕೆಯನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಇರಿಸಿಕೊಳ್ಳಬೇಕು ಎಂದು ಸೂಚಿಸುತ್ತದೆ.