Add preconnect for CDN resources

Azure · Nov 15, 2023 · 95a957e · 95a957e
1 parent 1cfd5bd
commit 95a957e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import { PreloadResources } from './preload-resources'
 import { AppInsightsProvider } from '@/components/instrumentation/AppInsightsProvider'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -17,6 +18,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <PreloadResources />
       <body className={inter.className}>
         <AppInsightsProvider>{children}</AppInsightsProvider>
       </body>

diff --git a/src/app/preload-resources.tsx b/src/app/preload-resources.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import ReactDOM from 'react-dom'
+import { getCdnUrl } from '@/lib/url'
+
+function PreloadResources() {
+  const cdnUrl = getCdnUrl('', false)
+
+  if (cdnUrl.length > 0) {
+    // @ts-ignore
+    ReactDOM.preconnect(cdnUrl)
+  }
+
+  return null
+}
+
+export { PreloadResources }
diff --git a/src/lib/url.ts b/src/lib/url.ts
@@ -32,12 +32,20 @@ const getAbsoluteUrl = (path?: string) => {
   return joinUrlSegments([baseUrl, path])
 }
 
-const getCdnUrl = (path: string) => {
-  if (!baseCdnUrl || !buildId) {
-    return path
+const getCdnUrl = (path?: string, includeFingerprint = true) => {
+  if (!baseCdnUrl) {
+    return path ?? ''
   }
 
-  return joinUrlSegments([baseCdnUrl, buildId, path])
+  if (!path) {
+    return baseCdnUrl
+  }
+
+  if (includeFingerprint && buildId) {
+    return joinUrlSegments([baseCdnUrl, buildId, path])
+  }
+
+  return joinUrlSegments([baseCdnUrl, path])
 }
 
 export { getAbsoluteUrl, getCdnUrl }