Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Mide Performance en NextJS

23/27
Recursos

Aportes 10

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¡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

📈 Performance

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>

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

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”

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?

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

que gran herramienta!

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
}

es muy importantes la performance

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