preconnect

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

• Referencia
  • preconnect(href)
• Uso
  • Preconexión al renderizar
  • Preconexión en un controlador de eventos

Referencia

preconnect(href)

Para preconectarte a un host, llama a la función preconnect de react-dom.

import { preconnect } from 'react-dom';

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

Ver más ejemplos a continuación.

La función preconnect proporciona al navegador una sugerencia de que debería abrir una conexión al servidor dado. Si el navegador decide hacerlo, esto puede acelerar la carga de recursos desde ese servidor.

Parámetros

• href: una cadena. La URL del servidor al que deseas conectarte.

Devuelve

preconnect no devuelve nada.

Advertencias

• Múltiples llamadas a preconnect con el mismo servidor tienen el mismo efecto que una sola llamada.
• En el navegador, puedes llamar a preconnect en cualquier situación: mientras renderizas un componente, en un Efecto, en un controlador de eventos, y así sucesivamente.
• En el renderizado del lado del servidor o al renderizar Componentes de Servidor, preconnect solo tiene efecto si lo llamas mientras renderizas un componente o en un contexto asíncrono que se origina al renderizar un componente. Cualquier otra llamada será ignorada.
• Si conoces los recursos específicos que necesitarás, puedes llamar a otras funciones que comenzarán a cargar los recursos de inmediato.
• No hay beneficio en preconectarse al mismo servidor en el que está alojada la página web, porque ya se habrá conectado para cuando se dé la sugerencia.

Uso

Preconexión al renderizar

Llama a preconnect al renderizar un componente si sabes que sus hijos cargarán recursos externos desde ese host.

import { preconnect } from 'react-dom';

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

Preconexión en un controlador de eventos

Llama a preconnect en un controlador de eventos antes de hacer la transición a una página o estado donde se necesitarán recursos externos. Esto inicia el proceso antes que si lo llamas durante el renderizado de la nueva página o estado.

import { preconnect } from 'react-dom';

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