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

Rate this content
Bookmark

Next.js ha ganado popularidad en los últimos años con características como renderizado en el lado del servidor, regeneración estática incremental, optimización de imágenes y más. Next.js es conocido como el framework listo para producción para React. En contraste, GraphQL se destaca por no solo devolver los datos que necesitas con buenas prácticas de diseño de esquemas, sino también por brindar una buena experiencia de desarrollo. En esta charla, hablaré sobre cómo se puede construir una aplicación que no solo escala, sino que también tiene un alto rendimiento con Next.js, GraphQL y Tailwind. Y por último, el futuro del desarrollo de CSS y Frontend consiste en construir utilidades, para que el CSS no se sienta como una ocurrencia tardía. Al final de esta charla, aprenderás cómo pasar de crear una aplicación de muestra a una aplicación lista para producción altamente eficiente.

9 min
24 Oct, 2022

Video Summary and Transcription

Ankita explica cómo construir un sitio súper rápido utilizando Next.js, GraphQL y Tailwind. Next.js ofrece técnicas de renderizado para mejorar el rendimiento y el SEO, así como soporte para importaciones dinámicas y aplazamiento de scripts no esenciales. Next.js también proporciona beneficios de rendimiento como estabilidad de diseño y una puntuación mejorada en Lighthouse, junto con renderizado en el lado del servidor y almacenamiento en caché. GraphQL permite una recuperación eficiente de datos, Apollo Client maneja el almacenamiento en caché y Tailwind simplifica CSS. El objetivo futuro es facilitar y acelerar el desarrollo de la interfaz de usuario con los componentes de servidor de React y Tailwind CSS.

Available in English

1. Introducción a la construcción de un sitio ultrarrápido

Short description:

Hola, soy Ankita. Te mostraré cómo construir un sitio ultrarrápido con Next.js, GraphQL y Tailwind. Next.js es un marco de trabajo de React para producción que proporciona herramientas listas para usar. Ofrece técnicas de renderizado como regeneración estática del lado del servidor, regeneración incremental del lado del servidor y renderizado del lado del servidor. Estas técnicas mejoran el rendimiento y el SEO. Next.js también admite importaciones dinámicas y aplazamiento de scripts no esenciales. El componente de imagen de Next.js vale la pena explorarlo.

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.

2. Next.js Performance and Caching

Short description:

Next.js ofrece beneficios de rendimiento, incluyendo estabilidad de diseño y una puntuación mejorada en Lighthouse. Admite AVF y WebP para imágenes de rendimiento rápido. El renderizado del lado del servidor y la caché, junto con las cabeceras de control de caché, mejoran aún más el rendimiento.

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.

3. GraphQL, Apollo Client, and Tailwind

Short description:

GraphQL te permite obtener solo los datos que necesitas, mejorando el rendimiento. Apollo Client maneja la caché y proporciona un gancho de consulta para facilitar la recuperación de datos. Tailwind simplifica CSS al proporcionar un sistema de diseño y clases de utilidad, mejorando la productividad y el rendimiento. El futuro ofrece emocionantes posibilidades.

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.

4. Future Goals and Conclusion

Short description:

Nuestro objetivo futuro es hacer que el desarrollo de UI sea más fácil y rápido. Los componentes del servidor de React y Tailwind CSS simplifican el desarrollo al permitir el renderizado en el lado del servidor y proporcionar clases de utilidad para facilitar la escalabilidad. Si tienes alguna pregunta o quieres avanzar en tu carrera, contáctame en Twitter o consulta mi próximo curso. ¡Gracias por escuchar!

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura