Call Web Vitals reporting at correct time

packages/next/client/index.tsx

@@ -462,10 +462,6 @@ function renderReactElement(reactEl: JSX.Element, domEl: HTMLElement) {
     if (isInitialRender) {
       ReactDOM.hydrate(reactEl, domEl, markHydrateComplete)
       isInitialRender = false
-
-      if (onPerfEntry && ST) {
-        measureWebVitals(onPerfEntry)
-      }
     } else {
       ReactDOM.render(reactEl, domEl, markRenderComplete)
     }
@@ -744,5 +740,10 @@ function Root({
       }
     }, [])
   }
+  // We should ask to measure the Web Vitals after rendering completes so we
+  // don't cause any hydration delay:
+  React.useEffect(() => {
+    measureWebVitals(onPerfEntry)
+  }, [])
   return children as React.ReactElement
 }

packages/next/client/performance-relayer.ts

@@ -4,13 +4,32 @@ import {
   getFID,
   getLCP,
   getTTFB,
+  Metric,
   ReportHandler,
 } from 'web-vitals'
 
-export default (onPerfEntry: ReportHandler) => {
-  getCLS(onPerfEntry)
-  getFID(onPerfEntry)
-  getFCP(onPerfEntry)
-  getLCP(onPerfEntry)
-  getTTFB(onPerfEntry)
+let isRegistered = false
+let userReportHandler: ReportHandler | undefined
+
+function onReport(metric: Metric) {
+  if (userReportHandler) {
+    userReportHandler(metric)
+  }
+}
+
+export default (onPerfEntry?: ReportHandler) => {
+  // Update function if it changes:
+  userReportHandler = onPerfEntry
+
+  // Only register listeners once:
+  if (isRegistered) {
+    return
+  }
+  isRegistered = true
+
+  getCLS(onReport)
+  getFID(onReport)
+  getFCP(onReport)
+  getLCP(onReport)
+  getTTFB(onReport)
 }