Mide Performance en NextJS

📈 Performance

Hydration.- tiempo en que el JS de React comienza a funcionar

FCP.- First Content Paint

TTFB.- Time to first bite, indicador del tiempo en requerir cosas de otro servidor

Next.js nos ayuda bastante con herramientas de performance.

Para ello dentro de _app.js agregamos y exportamos la función reportWebVitals, este recibe un parámetro llamado metric.

export function reportWebVitals(metric) {
  console.log(metric)
  // analytics - calibre
  // serverAnulicts.log(metric)
}

Esto nos imprime parámetros los cuales lo podemos enviar a servidores de análisis

RESUMEN: Next.js nos da herramientas de desarrollo para métricas de carga de sitios

¡Esto está genial! Muchas gracias por este gran aporte. De igual forma anexo la documentación de Next donde mencionan algunas métricas adicionales que se pueden agregar.
Measuring performance

Hace un par de días salió Next.js 10 y uno de sus flagship features es una herramienta mucho más robusta de analytics. 😄 https://nextjs.org/analytics

Next.js Analytics “Your True Lighthouse”

TypeScript

import type { AppProps, NextWebVitalsMetric } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric)
}

export default MyApp

Muy buena info! Supongo que estaré usándola a menudo! Alguien tiene idea si también podemos usar Google Lighthouse para medir la performance? En caso afirmativo, con cuál herramienta consideran mejor medir?

que gran herramienta!

Recursos interesantes para ver:

useReportWebVitals
Web Vitals

Aparte de Vercel Web Analytics, puedes ver más integraciones de Vercel para agregar a tu proyecto.

Si alguien tiene problemas con el tipo de datos de “metric” puede solucionarlo creando el tipo y asingnadolo así:

type NextWebVitalsMetrics = {
  id: string;
  label: string;
  name: string;
  startTime: number;
  value: number;
}

export const reportWebVitals = (metric: NextWebVitalsMetrics) => {
  // analitic - calibre
  // here you should send information to your server
}

export function reportWebVitals(metric){
    console.log(metric)
}

es muy importantes la performance

Noo!! que buena herramienta ! no la conocía ! Muy útil !