Does the React SSR template support generating preload directives?

[foucdeg]

In vite's SSR documentation, the Generating Preload Directives section section says:

To leverage the manifest, frameworks need to provide a way to collect the module IDs of the components that were used during a server render call.

In the React template, the ssrManifest variable seems to exist for that purpose, it is passed to the render function, but the argument is never used.

Is there a working implementation available?

[Ibadichan]

Generating Preload Directives section

Hi! Advice from developer, not maintainer)

1. If you need to preload images/fonts you can use react-helmet-async library. (or use react 19 instead of library)

import { Helmet } from 'react-helmet-async';

<Helmet>
   <link rel="preload" as="image" href={imgSrc} fetchpriority="high" />
 </Helmet>
 
 // on ssr render you can get it:
 helmet.link.toString()

2. About css. I would recommend to not preload css. Instead of this you can use used-styles library to extract critical css styles and make loading of css link async to get best PI score:

template = template.replace(
            '<link rel="stylesheet"',
            '<link rel="stylesheet" media="print" onload="this.media=\'all\'; this.onload=null;"',
          );

3. By default vite injects common files with modulepreload directive:

<link rel="modulepreload" as="script" crossorigin="" href="/dist/web/assets/DashboardToolbar-DCZ8f54j.js">

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload

What you need to achieve?

[bluwy]

The Generating Preload Directives section you linked also links to an example implementation for Vue. You should be able to mimic that and pass it down to the server in an agnostic way. At the moment, I'd like to keep the templates simple and because preloading can be business-logic-related.

@Ibadichan's advice may be helpful too.