Asset Loading - Preload fonts, scripts, and stylesheets with React DOM APIs

import { prefetchDNS, preconnect, preload, preinit } from "react-dom";
 
function App() {
  // Eagerly load and execute a script
  preinit("https://cdn.example.com/analytics.js", { as: "script" });
 
  // Preload a font (download early, use later)
  preload("https://fonts.example.com/inter.woff2", {
    as: "font",
    type: "font/woff2",
    crossOrigin: "anonymous",
  });
 
  // Preload a stylesheet
  preload("https://cdn.example.com/theme.css", { as: "style" });
 
  // DNS prefetch for a domain you will request later
  prefetchDNS("https://api.example.com");
 
  // Preconnect (DNS + TCP + TLS) for a domain you will request soon
  preconnect("https://images.example.com");
 
  return <main>{/* ... */}</main>;
}

// A page that preloads all critical resources for optimal performance
import { Suspense } from "react";
import { preload, preinit, preconnect } from "react-dom";
 
// Preload critical resources at the module level (runs once on import)
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 and manages stylesheet loading order 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 a script needed by this widget
  preinit("/scripts/chart-library.js", { as: "script" });
 
  return (
    <div className="widget">
      <h2>Sales Dashboard</h2>
      <div id="chart-container" />
    </div>
  );
}
 
function ImageGallery({ images }: { images: { src: string; alt: string }[] }) {
  // Preload the first few images for instant display
  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>Loading widget...</p>}>
        <HeavyWidget />
      </Suspense>
 
      <Suspense fallback={<p>Loading gallery...</p>}>
        <ImageGallery
          images={[
            { src: "/images/product-1.jpg", alt: "Product 1" },
            { src: "/images/product-2.jpg", alt: "Product 2" },
            { src: "/images/product-3.jpg", alt: "Product 3" },
            { src: "/images/product-4.jpg", alt: "Product 4" },
            { src: "/images/product-5.jpg", alt: "Product 5" },
            { src: "/images/product-6.jpg", alt: "Product 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() {
    // Preload the page's CSS and hero image when user hovers
    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") {
      // Only preload heavy resources on fast connections
      preload("/videos/hero.mp4", { as: "video" });
      preload("/fonts/display.woff2", { as: "font", crossOrigin: "anonymous" });
    }
  }, []);
 
  return null;
}

import { preconnect, preload } from "react-dom";
 
// These execute when the module is imported, before any component renders
preconnect("https://cdn.example.com");
preload("https://cdn.example.com/critical.css", { as: "style" });
 
export default function Page() {
  return <div>Content that needs cdn.example.com resources</div>;
}