Chi Thanh DangEste sitio web es estúpido rápido: cómo hacer que tu aplicación sea increíblemente rápida
Lo que estoy a punto de compartir con ustedes es el repositorio de código abierto más impresionante que he visto este año. No solo es el sitio web más rápido que he visto por sí mismo, sino que también está construido en Next.js. No uso el término "proyecto de código abierto del año" a la ligera, y en este caso, lo digo en serio.
El sitio web que vamos a explorar se llama Next Faster, un proyecto de código abierto creado por Ethan Niser, Ry Sullivan y Arman's code. Este proyecto es una plantilla de comercio electrónico de alta performance utilizando Next.js, lo que la hace aún más rápida que un sitio web de piezas de coche que la inspiró.
Cuando navegamos por el sitio web, dos cosas suceden: la navegación es absolutamente instantánea y las imágenes están instantáneamente allí. La forma en que lo logran es realmente ingeniosa.
Así que, ¿cómo lo hace? Hay cinco puntos clave para que este sitio web sea tan rápido. Primero, hay una prefetching extremadamente agresiva, donde los datos y las imágenes se precargan al hover. Esto significa que cuando haces clic en una entrada, los datos ya están allí, lo que hace que la navegación se sienta instantánea.
Segundo, hay una caché extremadamente agresiva utilizando React Query y una función de consulta para obtener los datos que tenemos en esa página. Esto se relaciona con el tercer punto, que es la caché agresiva servida desde una caché Redis de Upstash distribuida globalmente y rápida en cualquier lugar.
El cuarto punto es el uso de una clave de consulta para identificar los datos en la caché utilizando React Query. Finalmente, el quinto punto es el uso de una función de consulta para obtener los datos que tenemos en esa página, que esencialmente es solo datos provenientes de Upstash Redis.
Espero que hayan disfrutado de este video y lo tomen para su próximo proyecto. Adelante, les animo a explorar el repositorio y aprender por sí mismos. Esa es una de las mejores formas de aprender: simplemente ir a través de un repo y ver el código para sí mismos, experimentando con él. Si encuentran algo donde digan "Hey Josh, ¿por qué no hablaste de eso?", háganmelo saber en los comentarios de abajo.
