¡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
Lo básico
Construir una web app con React no es fácil
Nuestro proyecto y lo que necesitaremos
Instalando NextJS
Routing
Rutas básicas
Rutas dinámicas
#UnderTheHood setup y páginas: optimizaciones ocultas
#UnderTheHood páginas: pre rendering de páginas
Enlazando páginas
#UnderTheHood enlazando páginas: prefetching automático
API y Debugging
¿Cómo crear API con NextJS?
Creando y consumiendo nuestra propia API
Extendiendo NextJS
Extendiendo el Document
Extendiendo el App
Path alias
Explora las soluciones de CSS en NextJS y su flexibilidad
Finalizando las páginas
Deployment en Vercel
Utilizando Vercel para hacer Deploy
Data Fetching y Pre-rendering
Introducción a los pre-render modes
#UnderTheHood Server Side Rendering: getServerSideProps
#UnderTheHood Static Generation: getStaticProps
#UnderTheHood Static Dynamic Static Generation: getStaticPaths
Deployment
Otras formas de hacer deploy de una app NextJS
Midiendo Performance
Mide Performance en NextJS
El futuro de NextJS
¿Qué será de NextJS en los próximos años?
Conclusiones
Continúa con el Curso de Next.js: Sitios Estáticos y Jamstack
Bonus Next.js 10
Next.js Image
Link y Proxy
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 10
Preguntas 2
¡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
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 !
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.