Carga de Recursos - Precarga de fuentes, scripts y hojas de estilos con APIs de React DOM

import { prefetchDNS, preconnect, preload, preinit } from "react-dom";
 
function App() {
  // Carga y ejecuta un script ansiosamente
  preinit("https://cdn.example.com/analytics.js", { as: "script" });
 
  // Precarga una fuente (descarga temprano, usa luego)
  preload("https://fonts.example.com/inter.woff2", {
    as: "font",
    type: "font/woff2",
    crossOrigin: "anonymous",
  });
 
  // Precarga una hoja de estilos
  preload("https://cdn.example.com/theme.css", { as: "style" });
 
  // Prefetch de DNS para un dominio que solicitarás luego
  prefetchDNS("https://api.example.com");
 
  // Preconnect (DNS + TCP + TLS) para un dominio que solicitarás pronto
  preconnect("https://images.example.com");
 
  return <main>{/* ... */}</main>;
}

// Una página que precarga todos los recursos críticos para un rendimiento óptimo
import { Suspense } from "react";
import { preload, preinit, preconnect } from "react-dom";
 
// Precarga recursos críticos a nivel de módulo (se ejecuta una vez al importar)
preconnect("https://api.myapp.com");
preload("/fonts/brand-bold.woff2", { as: "font", type: "font/woff2", crossOrigin: "anonymous" });
preload("/fonts/brand-regular.woff2", { as: "font", type: "font/woff2", crossOrigin: "anonymous" });
 
function CriticalCSS() {
  return (
    <>
      {/* React deduplicates y gestiona el ordenamiento de carga de hojas de estilos via precedence */}
      <link rel="stylesheet" href="/styles/reset.css" precedence="reset" />
      <link rel="stylesheet" href="/styles/base.css" precedence="default" />
      <link rel="stylesheet" href="/styles/theme.css" precedence="high" />
    </>
  );
}
 
function HeavyWidget() {
  // Preinit un script necesario por este widget
  preinit("/scripts/chart-library.js", { as: "script" });
 
  return (
    <div className="widget">
      <h2>Dashboard de Ventas</h2>
      <div id="chart-container" />
    </div>
  );
}
 
function ImageGallery({ images }: { images: { src: string; alt: string }[] }) {
  // Precarga las primeras imágenes para visualización instantánea
  images.slice(0, 3).forEach((img) => {
    preload(img.src, { as: "image" });
  });
 
  return (
    <div className="grid grid-cols-3 gap-4">
      {images.map((img, i) => (
        <img
          key={i}
          src={img.src}
          alt={img.alt}
          loading={i < 3 ? "eager" : "lazy"}
        />
      ))}
    </div>
  );
}
 
export default function DashboardPage() {
  return (
    <>
      <CriticalCSS />
      <title>Dashboard | MyApp</title>
 
      <header>
        <h1>Dashboard</h1>
      </header>
 
      <Suspense fallback={<p>Cargando widget...</p>}>
        <HeavyWidget />
      </Suspense>
 
      <Suspense fallback={<p>Cargando galería...</p>}>
        <ImageGallery
          images={[
            { src: "/images/product-1.jpg", alt: "Producto 1" },
            { src: "/images/product-2.jpg", alt: "Producto 2" },
            { src: "/images/product-3.jpg", alt: "Producto 3" },
            { src: "/images/product-4.jpg", alt: "Producto 4" },
            { src: "/images/product-5.jpg", alt: "Producto 5" },
            { src: "/images/product-6.jpg", alt: "Producto 6" },
          ]}
        />
      </Suspense>
    </>
  );
}

"use client";
 
import { preload } from "react-dom";
import Link from "next/link";
 
function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  function handleMouseEnter() {
    // Precarga el CSS y la imagen hero de la página cuando el usuario pasa el ratón
    preload(`/styles${href}.css`, { as: "style" });
    preload(`/images${href}-hero.jpg`, { as: "image" });
  }
 
  return (
    <Link href={href} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}

"use client";
 
import { useEffect } from "react";
import { preload } from "react-dom";
 
function AdaptiveLoader() {
  useEffect(() => {
    const connection = (navigator as any).connection;
    if (connection?.effectiveType === "4g") {
      // Solo precarga recursos pesados en conexiones rápidas
      preload("/videos/hero.mp4", { as: "video" });
      preload("/fonts/display.woff2", { as: "font", crossOrigin: "anonymous" });
    }
  }, []);
 
  return null;
}

import { preconnect, preload } from "react-dom";
 
// Estas se ejecutan cuando el módulo se importa, antes de que cualquier componente se renderice
preconnect("https://cdn.example.com");
preload("https://cdn.example.com/critical.css", { as: "style" });
 
export default function Page() {
  return <div>Contenido que necesita recursos de cdn.example.com</div>;
}