flush when ready

packages/next/client/index.tsx

@@ -32,7 +32,7 @@ import PageLoader, { StyleSheetTuple } from './page-loader'
 import measureWebVitals from './performance-relayer'
 import { RouteAnnouncer } from './route-announcer'
 import { createRouter, makePublicRouterInstance } from './router'
-import { webVitalsCallbacks } from '../vitals/vitals'
+import { flushWebVitalsCallbacks } from '../vitals/vitals'
 
 /// <reference types="react-dom/experimental" />
 
@@ -310,7 +310,7 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
             : 'web-vital',
       }
       exportedReportWebVitals?.(webVitals)
-      webVitalsCallbacks.forEach((callback) => callback(webVitals))
+      flushWebVitalsCallbacks(webVitals)
     }
 
     const pageEntrypoint =

packages/next/vitals/vitals.ts

@@ -1,17 +1,23 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { NextWebVitalsMetric } from '../pages/_app'
 
 type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any
 export const webVitalsCallbacks = new Set<ReportWebVitalsCallback>()
-const isClient = typeof window !== 'undefined'
+let metric: NextWebVitalsMetric
 
-export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
-  // call on initial render, in a very early phase
-  useState(() => {
-    if (isClient) webVitalsCallbacks.add(callback)
-  })
+export function flushWebVitalsCallbacks(_metric: NextWebVitalsMetric) {
+  metric = _metric
+  webVitalsCallbacks.forEach((callback) => callback(metric))
+}
 
+export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
   useEffect(() => {
+    if (metric) {
+      callback(metric)
+      return
+    }
+
+    webVitalsCallbacks.add(callback)
     return () => {
       webVitalsCallbacks.delete(callback)
     }