prefetchDNS

prefetchDNS("https://example.com");

• Reference
  • prefetchDNS(href)
• שימוש
  • DNS Prefetch בזמן רינדור
  • DNS Prefetch בתוך event handler

Reference

prefetchDNS(href)

כדי לבצע lookup ל-host, קראו לפונקציה prefetchDNS מתוך react-dom.

import { prefetchDNS } from 'react-dom';

function AppRoot() {
  prefetchDNS("https://example.com");
  // ...
}

ראו דוגמאות נוספות בהמשך.

הפונקציה prefetchDNS מספקת לדפדפן רמז שכדאי לו לבצע lookup לכתובת ה-IP של שרת נתון. אם הדפדפן בוחר לעשות זאת, זה יכול להאיץ טעינה של משאבים מהשרת הזה.

Parameters

• href: מחרוזת. ה-URL של השרת שאליו רוצים להתחבר.

Returns

prefetchDNS לא מחזירה דבר.

Caveats

• כמה קריאות ל-prefetchDNS עם אותו שרת משפיעות כמו קריאה אחת.
• בדפדפן אפשר לקרוא ל-prefetchDNS בכל מצב: בזמן רינדור קומפוננטה, בתוך effect, בתוך event handler, וכן הלאה.
• ברינדור צד שרת או ברינדור Server Components, ל-prefetchDNS יש השפעה רק אם קוראים לה בזמן רינדור קומפוננטה או בהקשר async שמקורו ברינדור קומפוננטה. קריאות אחרות ייחסמו.
• אם אתם יודעים אילו משאבים ספציפיים תצטרכו, אפשר לקרוא לפונקציות אחרות שמתחילות לטעון את המשאבים מיד.
• אין תועלת ב-prefetch לאותו שרת שעליו מתארח דף הווב עצמו, כי lookup אליו כבר בוצע עד לזמן שבו היה ניתן הרמז.
• בהשוואה ל-preconnect, ייתכן ש-prefetchDNS עדיף אם אתם מתחברים ספקולטיבית למספר גדול של דומיינים, מצב שבו העלות של preconnections עלולה לעלות על התועלת.

שימוש

DNS Prefetch בזמן רינדור

קראו ל-prefetchDNS בזמן רינדור קומפוננטה אם אתם יודעים שהילדים שלה יטענו משאבים חיצוניים מאותו host.

import { prefetchDNS } from 'react-dom';

function AppRoot() {
  prefetchDNS("https://example.com");
  return ...;
}

DNS Prefetch בתוך event handler

קראו ל-prefetchDNS בתוך event handler לפני מעבר לעמוד או מצב שבהם יידרשו משאבים חיצוניים. כך התהליך מתחיל מוקדם יותר לעומת קריאה בזמן רינדור העמוד או המצב החדש.

import { prefetchDNS } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    prefetchDNS('http://example.com');
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}