Why I don't use React-Query and tRPC anymore

Summary

El vídeo explica por qué el creador no utiliza React Query ni tRPC en Next.js. En aplicaciones de React FEAT, React Query es útil para cachear datos y evitar solicitudes de red innecesarias. En cambio, Next.js ofrece caché incorporado, lo que hace que React Query sea innecesario. TRPC mejora la comunicación cliente-servidor con tipado seguro, pero Next.js ofrece Server Actions que proporcionan similares beneficios de tipado seguro sin la sobrecarga de tRPC. Sin embargo, si se planea soporte para clientes fuera de Next.js, tRPC sigue siendo una opción.

Takeaways

• 🔧 React Query y tRPC son herramientas útiles fuera de Next.js, pero el creador del vídeo prefiere otros métodos en Next.js.
• 📱 En aplicaciones de Next.js, el caché incorporado hace que React Query sea menos necesario para la recuperación de datos.
• 🔄 Next.js automáticamente cachea las solicitudes de red, lo que mejora la eficiencia y evita solicitudes duplicadas.
• 🛠️ En Next.js, se pueden realizar operaciones de datos directamente en el componente de página sin utilizar useEffect.
• 🚀 Next.js ofrece tres tipos principales de caché: caché de resultados de llamadas, RSC payload y caché del lado del cliente.
• 🔗 El componente Link de Next.js permite la pre-obtención de datos, lo que puede eliminar el estado de carga al hacer clic en enlaces.
• 📝 TRPC proporciona una comunicación de cliente-servidor de tipo seguro, lo que ayuda a evitar errores de tipo y mejora la experiencia de desarrollo.
• 🔄 TRPC también ofrece una forma de hacer solicitudes de tipo seguro para mutaciones (POST, PUT, DELETE), proporcionando una alternativa a las llamadas fetch tradicionales.
• 💡 Next.js introduce Server Actions, que son una forma de realizar mutaciones de datos en el servidor con TypeScript IntelliSense y sin la necesidad de recordar URLs de endpoints.
• 🌐 Server Actions en Next.js pueden ser limitantes si se planea soportar clientes fuera de Next.js, como aplicaciones móviles de React Native.

Q & A

¿Por qué el presentador ya no utiliza React Query o tRPC en Next.js?

El presentador menciona que no utiliza React Query o tRPC en Next.js porque Next.js ofrece sus propias soluciones integradas y agresivamente cacheadas que hacen que estas herramientas sean menos necesarias para el manejo de datos y peticiones en aplicaciones Next.js.

¿Cuál es la función principal de React Query según el video?

La función principal de React Query, según el video, es el caching de datos para evitar solicitudes de red repetidas y mejorar la eficiencia al cargar datos que ya se han solicitado anteriormente.

¿Cómo se implementa el caching de datos en Next.js sin usar React Query?

En Next.js, se puede implementar el caching de datos directamente en la función del componente utilizando async/await, y Next.js se encarga automáticamente de cachear la solicitud de datos, evitando solicitudes de red adicionales para datos previamente cargados.

¿Qué es tRPC y para qué se usa?

tRPC es una herramienta para comunicarse de forma segura y tipada entre el cliente y el servidor, permitiendo una comunicación más robusta y segura al interactuar con endpoints de API sin tener que recordar URLs específicas y con la seguridad de tipos de TypeScript.

¿Cómo se puede lograr la misma funcionalidad que tRPC ofrece sin usarlo en Next.js?

En Next.js, se pueden lograr los mismos beneficios de tipado y comunicación segura con el backend utilizando operaciones de base de datos directas con ORMs como Prisma, que ya proveen tipado y validación de esquemas sin la necesidad de recordar URLs de endpoints.

¿Qué son las acciones del servidor en Next.js y para qué sirven?

Las acciones del servidor en Next.js son funciones que se ejecutan en el servidor y que se pueden invocar desde el cliente o el servidor. Sirven para mutar datos en el servidor, similar a cómo se haría una solicitud POST a un endpoint API, pero con la ventaja de la tipado y la seguridad de TypeScript.

¿Por qué podría uno todavía querer usar React Query en Next.js a pesar de las funcionalidades integradas?

Aún podrías querer usar React Query en Next.js para casos de borde donde se necesite hacer peticiones de datos del lado del cliente después de una acción del usuario, como en el caso de un scroll infinito, o para hacer polling y otras operaciones que requieran caching del lado del cliente.

¿Cuál es la ventaja de usar el componente Next.js Link para listas de enlaces?

El componente Next.js Link permite prefetching de las páginas a las que se accede mediante clic, lo que significa que Next.js prefetches las páginas en segundo plano cuando los enlaces entran en la ventana gráfica, lo que puede eliminar el estado de carga y hacer que los clics sean instantáneos.

¿Cuál es la principal limitación de las acciones del servidor en Next.js según el video?

Una de las principales limitaciones de las acciones del servidor en Next.js, según el video, es que no se pueden usar fácilmente fuera de Next.js, lo que significa que si planeas soportar clientes fuera de Next.js, como una aplicación móvil de React Native, podrías querer mantener el uso de tRPC.

¿Por qué el presentador recomienda aprender Next.js si ya se conoce React?

El presentador recomienda aprender Next.js porque ha cambiado significativamente el paisaje del desarrollo web, ofreciendo soluciones integradas y eficaces para el manejo de datos y peticiones, y porque Next.js puede ofrecer una experiencia de desarrollo más moderna y performante.