preconnect

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

• Referensi
  • preconnect(href)
• Penggunaan
  • Preconnecting saat merender
  • Preconnecting in an event handler

Referensi

preconnect(href)

Untuk melakukan prakoneksi ke sebuah host, panggil fungsi preconnect dari react-dom.

import { preconnect } from 'react-dom';

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

Lihat lebih banyak contoh di bawah ini.

Fungsi preconnect memberikan petunjuk kepada browser untuk membuka koneksi ke server yang diberikan. Jika browser memilih untuk melakukannya, hal ini dapat mempercepat pemuatan sumber daya dari server tersebut.

Parameter

• href: sebuah string. URL server yang ingin Anda sambungkan.

Pengembalian

preconnect tidak mengembalikan apa pun.

Peringatan

• Beberapa panggilan ke preconnect dengan server yang sama memiliki efek yang sama dengan panggilan tunggal.
• Di browser, Anda dapat memanggil preconnect dalam situasi apa pun: saat merender komponen, di Effect, di event handler, dan sebagainya.
• Dalam rendering sisi server atau saat merender Komponen Server, preconnect hanya memiliki efek jika Anda memanggilnya saat merender komponen atau dalam konteks asinkronisasi yang berasal dari rendering komponen. Panggilan lain akan diabaikan.
• Jika Anda mengetahui sumber daya spesifik yang Anda perlukan, Anda dapat memanggil fungsi lain sebagai gantinya yang akan langsung memuat sumber daya.
• Tidak ada manfaatnya melakukan prakoneksi ke server yang sama dengan tempat halaman web dihosting karena server tersebut sudah tersambung pada saat petunjuk diberikan.

Penggunaan

Preconnecting saat merender

Panggil preconnect saat merender komponen jika Anda mengetahui bahwa anak komponen akan memuat sumber daya eksternal dari host tersebut.

import { preconnect } from 'react-dom';

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

Preconnecting in an event handler

Call preconnect in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

import { preconnect } from 'react-dom';

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