preconnect

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

• Tham khảo
  • preconnect(href)
• Cách sử dụng
  • Preconnect khi render
  • Preconnect trong một trình xử lý sự kiện

Tham khảo

preconnect(href)

Để preconnect đến một host, gọi hàm preconnect từ react-dom.

import { preconnect } from 'react-dom';

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

Xem thêm các ví dụ bên dưới.

Hàm preconnect cung cấp cho trình duyệt một gợi ý rằng nó nên mở một kết nối đến máy chủ đã cho. Nếu trình duyệt chọn làm như vậy, điều này có thể tăng tốc độ tải tài nguyên từ máy chủ đó.

Tham số

• href: một chuỗi. URL của máy chủ bạn muốn kết nối đến.

Giá trị trả về

preconnect không trả về gì cả.

Lưu ý

• Nhiều lệnh gọi đến preconnect với cùng một máy chủ có cùng hiệu ứng như một lệnh gọi duy nhất.
• Trong trình duyệt, bạn có thể gọi preconnect trong bất kỳ tình huống nào: trong khi render một component, trong một Effect, trong một trình xử lý sự kiện, v.v.
• Trong quá trình render phía máy chủ hoặc khi render Server Components, preconnect chỉ có hiệu lực nếu bạn gọi nó trong khi render một component hoặc trong một ngữ cảnh không đồng bộ bắt nguồn từ việc render một component. Bất kỳ lệnh gọi nào khác sẽ bị bỏ qua.
• Nếu bạn biết các tài nguyên cụ thể bạn sẽ cần, bạn có thể gọi các hàm khác thay vào đó sẽ bắt đầu tải tài nguyên ngay lập tức.
• Không có lợi ích gì khi preconnect đến cùng một máy chủ mà trang web đang được lưu trữ vì nó đã được kết nối vào thời điểm gợi ý được đưa ra.

Cách sử dụng

Preconnect khi render

Gọi preconnect khi render một component nếu bạn biết rằng các component con của nó sẽ tải tài nguyên bên ngoài từ host đó.

import { preconnect } from 'react-dom';

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

Preconnect trong một trình xử lý sự kiện

Gọi preconnect trong một trình xử lý sự kiện trước khi chuyển sang một trang hoặc trạng thái nơi các tài nguyên bên ngoài sẽ cần thiết. Điều này giúp quá trình bắt đầu sớm hơn so với khi bạn gọi nó trong quá trình render trang hoặc trạng thái mới.

import { preconnect } from 'react-dom';

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