Closed foucdeg closed 6 months ago
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?
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.
In vite's SSR documentation, the Generating Preload Directives section section says:
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?