No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/año

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

2D
2H
16M
54S
Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Mide Performance en NextJS

23/27
Recursos

Aportes 13

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

📈 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

¡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 !