Programmatic Resource Preloading with ReactDOM

Snippet

Programmatic Resource Preloading with ReactDOM

To achieve sub-second LCP (Largest Contentful Paint), experts use the `preload` function from `react-dom` within Server Components. This injects `<link rel="preload">` tags early in the document stream, signaling the browser to fetch high-priority assets like hero images or critical fonts before the main hydration bundle is even executed. This is a low-level optimization that bypasses the limitations of standard component-based discovery.

snippet.js

javascript

import { preload } from 'react-dom';
 
export default function BlogPost({ post }) {
  preload(post.coverImage, { as: 'image' });
  preload('/fonts/inter.woff2', { as: 'font', type: 'font/woff2' });
 
  return (
    <article>
      <h1>{post.title}</h1>
      {/* ... */}
    </article>
  );
}

nextjs

Breakdown

import { preload } from 'react-dom';

Imports the low-level preloading utility provided by React for resource optimization.

preload(post.coverImage, { as: 'image' });

Instructs the browser to prioritize the download of the cover image immediately.

as: 'font', type: 'font/woff2'

Specifies the resource type and MIME type to ensure the browser handles the preload correctly.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Programmatic Resource Preloading with ReactDOM

Related