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 鈥淵our 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 鈥渕etric鈥 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 !