39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
/**
|
||
* Emits <link rel="preconnect"> + <link rel="dns-prefetch"> for the media CDN
|
||
* domain (R2_PUBLIC_URL), so the browser opens the TLS/DNS connection to the
|
||
* media host early — before it hits the first <img>. Saves ~150–300ms on the
|
||
* first image load.
|
||
*
|
||
* Reads the domain from R2_PUBLIC_URL (the same env var buildR2Storage uses),
|
||
* so there's ONE source of truth — no per-project hardcoded domain. Renders
|
||
* nothing when R2_PUBLIC_URL isn't set (local disk / no CDN → nothing to
|
||
* preconnect).
|
||
*
|
||
* Server Component — drop it in the <head> of your locale layout:
|
||
*
|
||
* import { MediaPreconnect } from '@intecion/ipal-kit/rsc'
|
||
* // in <head> (or top of <body> — Next hoists link tags):
|
||
* <MediaPreconnect />
|
||
*/
|
||
export function MediaPreconnect() {
|
||
const publicUrl = process.env.R2_PUBLIC_URL?.replace(/\/$/, '')
|
||
if (!publicUrl) {return null}
|
||
|
||
// Origin only (scheme + host) — preconnect targets an origin, not a path.
|
||
let origin: string
|
||
try {
|
||
origin = new URL(publicUrl).origin
|
||
} catch {
|
||
return null // malformed URL → skip rather than emit a broken tag
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<link crossOrigin="anonymous" href={origin} rel="preconnect" />
|
||
<link href={origin} rel="dns-prefetch" />
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default MediaPreconnect
|