להתחבר מראש

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

• הפניה
  • preconnect(href)
• שימוש
  • התחבר מראש בזמן רינדור
  • התחבר מראש בתוך מטפל באירועים

הפניה

preconnect(href)

כדי לבצע חיבור מראש למארח, קראו לפעולה preconnect מתוך react-dom.

import { preconnect } from 'react-dom';

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

עוד דוגמאות נוספות.

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

פרמטרים

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

מחזירה

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

אזהרות

• כמה קריאות ל-preconnect עם אותו שרת משפיעות כמו קריאה אחת.
• בדפדפן אפשר לקרוא ל-preconnect בכל מצב: בזמן רינדור קומפונטה, בתוך אפקט, בתוך מטפל באירועים, וכן הלאה.
• ברינדור צד שרת או ברינדור רכיבי שרת, ל-preconnect יש רק רק אם קוראים לה בזמן רינדור קומפוננטה או בהקשר אסינכרון שמקורו ברינדור קומפוננטה. קריאות אחרות ייחסמו.
• אם אתם יודעים אילו משאבים ספציפיים תצטרכו, אפשר לקרוא לפונקציות אחרות שמתחילות לטעון את המשאבים מיד.
• אין תועלת ב-preconnect לאותו שרת שעליו מתארח דף הווב עצמו, כי החיבור אליו כבר פתוח עד לרגע שבו היה ניתן הרמז.

שימוש

התחבר מראש בזמן רינדור

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

import { preconnect } from 'react-dom';

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

התחבר מראש בתוך מטפל באירועים

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

import { preconnect } from 'react-dom';

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