preconnect

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

• Referensi
  • preconnect(href)
• Penggunaan
  • Preconnecting saat merender
  • Preconnecting pada 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.

Kembalian

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 pada event handler

Panggil preconnect dalam event handler sebelum bertransisi ke halaman atau state yang membutuhkan sumber daya eksternal. Hal ini akan memulai proses lebih awal dibandingkan jika Anda memanggilnya saat merender halaman atau state baru.

import { preconnect } from 'react-dom';

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