Hola, soy Ankita. ¿Alguna vez te has preguntado qué se necesita para construir un sitio web ultrarrápido? Bueno, te lo mostraré en esta presentación. Mi tema es: Construye un sitio ultrarrápido con Next.js, GraphQL y Tailwind.
Hola de nuevo, soy Ankita. He estado trabajando en la industria durante más de una década, como desarrolladora y arquitecta de muchas aplicaciones con millones de clientes, y actualmente soy creadora con más de 10,000 estudiantes en línea. Es extremadamente importante elegir las herramientas adecuadas para el trabajo, porque sin eso, ¿cómo construimos un sitio performance? Así que necesitas las herramientas adecuadas, al igual que la imagen de Bob Esponja aquí. Y con Next.js, GraphQL y Tailwind, es realmente una combinación poderosa, porque te ayudará a construir un sitio performance.
Primero, muy rápidamente, ¿qué es Next.js? Es un marco de trabajo de React para producción. Te proporciona muchas tooling listas para usar, por lo que no tienes que construir mucho desde cero, como enrutamiento y performance, todo está, Next.js es algo en lo que se piensa desde el principio. Veamos las técnicas de renderizado en Next.js. Y esta es una de las principales razones por las que Next.js agrega mucho performance, y ayuda con mucho performance en general. Esta es una imagen web muy simple, por ejemplo, y puedes ver que hay tres técnicas de renderizado diferentes, como regeneración estática del lado del servidor, regeneración incremental del lado del servidor y renderizado del lado del servidor. Todas estas técnicas específicas tienen diferentes formas de almacenar en caché data, por ejemplo, en estático, si tu sitio es completamente estático, puedes almacenar en caché todos esos data en el momento de la compilación y estarán disponibles para ti. Mientras que en ISR, que es regeneración incremental del lado del servidor, puedes especificar después de cuánto tiempo quieres que se almacene en caché el data, y en el renderizado del lado del servidor, estás solicitando ese data una y otra vez. También es muy bueno para el SEO, porque el HTML también estará disponible para ti justo antes, por lo que cuando el bot esté rastreando tu sitio, se clasificará más alto debido a eso también. Entonces, en la primera imagen, estamos almacenando en caché los tres países, pero no México. En la regeneración incremental del lado del servidor, queremos un requisito dinámico para México. Y por último, en el renderizado del lado del servidor, todas las páginas y todas las páginas de los países se vuelven a renderizar.
Muy bien, así que performance con Next.js. Estas son muy geniales y extremadamente importantes para que las revises. Encuentro que muchos desarrolladores no lo hacen, así que definitivamente revisa esto para construir realmente un sitio ultrarrápido. Por ejemplo, importaciones dinámicas. En este caso, tenemos un modelo aquí, ¿verdad? Y en el caso del modelo, estamos usando una importación dinámica. Por lo tanto, solo puedes elegir cargar el modelo cuando realmente se necesite, cuando no se necesite, no lo cargues. Segundo, aplazamiento de scripts no esenciales. Next.js nos proporciona un componente de script. Y puedes ver que aquí, solo estoy cargando convertKit, que es algo que uso para mi boletín, y solo lo cargo después de que la página se haya cargado completamente usando la propiedad after interactive. Es un componente de React, ¿verdad? Parece un componente de React. Por lo que nos facilita mucho porque, ¿por qué debería esperar a que se cargue mi script de boletín cuando todo mi sitio está listo para funcionar? Segundo, tercero es el componente de imagen de Next.js. Es posible que hayas oído hablar del componente de imagen en general.
Comments