Ensure Web Vitals reporting is called

vercel · Oct 16, 2020 · 0466701 · 0466701
1 parent 245499a
commit 0466701
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/packages/next/client/index.tsx b/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,12 @@ function Root({
       }
     }, [])
   }
+  // We should ask to measure the Web Vitals after rendering completes so we
+  // don't cause any hydration delay:
+  React.useEffect(() => {
+    if (onPerfEntry) {
+      measureWebVitals(onPerfEntry)
+    }
+  }, [])
   return children as React.ReactElement
 }