Construyendo un Sitio Súper Rápido con Next.js, GraphQL y Tailwind ⚡️

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.

Te brinda muchos beneficios de rendimiento de manera predeterminada. No cambia tu diseño, por lo que obtienes una mejor puntuación en Lighthouse, pero también mejora el rendimiento. Al mismo tiempo, también se admite AVF y WebP, por lo que puedes obtener imágenes de rendimiento rápido de inmediato.

También se ofrece el renderizado del lado del servidor y la caché. Nuevamente, otra característica que no muchos desarrolladores aprovechan, así que te insto a que lo pruebes, que es la cabecera de control de caché que te permite decir, hey, solo almacena en caché el contenido específico de la página durante dos horas, 7,200 segundos son dos horas, y después de dos horas, la página seguirá siendo servida, por ejemplo, durante un período de gracia de 60 segundos, como mencioné aquí, mientras que con la propiedad stale, while revalidate, el siguiente usuario obtendrá datos actualizados. Esto es, nuevamente, extremadamente importante. Estamos agregando rendimiento a un marco de trabajo que ya es de alto rendimiento. Así que imagina lo rápido que será nuestro sitio.

GraphQL, todos amamos GraphQL. Solo obtienes los datos que solicitas. Además, solo estoy solicitando el nombre del héroe y la altura. Solo obtendré eso al final. Por lo tanto, eso es realmente eficiente por sí solo porque no tienes un objeto realmente enorme que descargas cada vez.

Con GraphQL y el rendimiento, obtienes una consulta persistente, por lo que puedes persistir tus consultas, puedes usar Apollo Client para almacenar en caché tus datos, puedes usar la caché en memoria con Apollo Client y almacenar los datos en tu navegador junto con almacenarlos en la CDN también. Por lo tanto, obtienes beneficios adicionales. Y nuevamente, no pidas datos, pero luego no los necesites, por lo que también te brinda rendimiento. Apollo Client hace el trabajo pesado por ti, como ya mencioné, por lo que es extremadamente importante usar Apollo Client también. Y es posible que te preguntes cómo se vería la API. Bueno, todos amamos los hooks, así que aquí tienes. Puedes ver que obtienes un gancho de consulta con Apollo Client y te brinda los tres estados, carga error y datos automáticamente. Por lo que no tienes que preocuparte por registrar eso en cada componente porque ya te lo proporciona de forma predeterminada. Y almacena todos esos datos en una caché en la caché en memoria de tu Apollo Client. Por lo que no tienes que volver a buscar, por ejemplo, la navegación que se utiliza en cada página.

Por último, Tailwind. Tailwind es uno de mis favoritos. Piénsalo como una caja gigante de Lego, lo tiras todo en el suelo y lo construyes desde cero y descartas lo que no necesitas. Y eso es exactamente lo que es Tailwind. Es una API para tu sistema de diseño cuando el CSS puede volverse complejo, por lo que Tailwind lo hace más fácil. ¿Por qué Tailwind? Los nombres de clase semánticos son más difíciles de mantener. Obtienes un sistema de diseño listo para usar y te convierte en un mejor desarrollador de CSS. Puedo asegurarte que después de reconstruir todo mi sitio con Tailwind, personalmente encontré una gran diferencia en mi productividad porque no estaba cambiando de un lado a otro. Y cuando hablamos de rendimiento, también estamos hablando del sistema de compilación, no solo de lo que ven los usuarios, porque eso también contribuye a nuestra productividad general como desarrolladores. Por lo tanto, obtienes estas diferentes clases de utilidad que te ayudan a trabajar con las limitaciones del sistema. Y en lugar de llenar tus hojas de estilo con diferentes nombres de estilo y demás, básicamente sigues el sistema de diseño. Por ejemplo, en este caso, nuevamente puedes usar un complemento de VS code también y te mostrará todos los diferentes colores. Y así es como podría verse el sistema de diseño de Tailwind y obtienes rendimiento, es realmente difícil obtener una compilación de rendimiento de menos de 10 KB con Tailwind. Y las pequeñas prácticas conducen a un mejor rendimiento general también. Y esto es por qué hablemos muy rápidamente de cómo se ve el futuro.

Bueno, nuestro objetivo futuro es hacer que el desarrollo de UI sea realmente fácil y rápido. Los componentes del servidor de React con suspense. Puedes cargar tus componentes en el servidor lo cual es enorme para nosotros. Tailwind admite la mayoría de los estilos de CSS lo cual es realmente increíble, por lo que no tienes que pensar en CSS como algo complejo, puedes usar clases de utilidad y también puedes escalar fácilmente.

Bueno, esto es prácticamente el final. Si tienes alguna pregunta, comentario, retroalimentación, por favor envíame un tweet a Kulkarni Ankita 9 también. Y por último, si estás buscando crecer como líder o eres un desarrollador y quieres llevar tu career más lejos, entonces también tengo un curso que se lanzará que te ayudará a crecer de desarrollador a líder. Puedes consultar este enlace y este práctico código de barras también.

Muy bien, lo lograste. Muchas gracias por escuchar y felicidades por escuchar esta presentación y espero que tengas un maravilloso día o noche. Muy bien, gracias.