Consumiendo API Fake en tu proyecto frontend con Next.js v13

El uso de API Fake, también conocidas como API falsas, API simuladas o API mock, presenta varios beneficios en diferentes escenarios de desarrollo e integración de software, entre ellos, el desarrollo paralelo, donde diferentes equipos pueden trabajar de forma paralela e independiente. Los desarrolladores de frontend pueden comenzar a trabajar en la interfaz de usuario sin esperar a que las API reales estén listas. Esto acelera el desarrollo y reduce los cuellos de botella.

Otro beneficio de utilizar API falsas es que permiten realizar pruebas unitarias y de integración desde el inicio del proceso de desarrollo, incluso antes de que se implementen las API. Esto ayuda a identificar y solucionar problemas con antelación, ahorrando tiempo y recursos.

El aislamiento de componentes también puede considerarse una ventaja cuando se utilizan API falsas: puede aislar los componentes del sistema para probarlos individualmente y asegurarse de que funcionen correctamente antes de integrarlos por completo. Esto facilita la detección y resolución de problemas.

Reducción de Dependencias Externas es otro beneficio para evitar depender de API externas durante el desarrollo inicial, reduce la vulnerabilidad ante posibles inestabilidades o cambios en API reales. Esto mantiene el flujo de desarrollo incluso cuando las API reales están evolucionando.

Con API falsas puedes realizar simulaciones de diferentes escenarios, incluidas respuestas de error, latencia de red y situaciones excepcionales. Esto ayuda a validar cómo su sistema maneja diferentes condiciones, preparándolo para un funcionamiento más sólido en el mundo real.

Otro beneficio excelente durante el desarrollo y las pruebas iniciales utilizando API falsas es el ahorro de recursos: no es necesario consumir recursos de API reales, lo que puede implicar límites de uso, tarifas u otras restricciones. Esto ayuda a ahorrar recursos financieros y cuotas.

Cuando hablamos de documentación y diseño de interfaz utilizando API falsas tenemos la ventaja de crear la documentación y el diseño de interfaz de la API incluso antes de su implementación real. Esto ayuda a garantizar que la API esté bien diseñada, documentada y sea fácil de usar.

En resumen, el uso de API falsas es una práctica valiosa para acelerar el desarrollo, mejorar la calidad del software y reducir las dependencias externas, permitiendo a los equipos de desarrollo trabajar de manera más eficiente y efectiva.

A partir de ahí, sólo tenemos que elegir nuestro framework de interfaz para iniciar nuestro proyecto y comenzar la implementación. En este artículo, usaremos la versión 13 de Next.js, lanzada el 25 de octubre de 2022, durante NextConf 22. A continuación se muestra el comando si deseas actualizar su proyecto Next.js que tiene una versión inferior a la 13.0.0:

$ npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Principales recursos de Next.js

Optimización del empaquetador para JavaScript y TypeScript, Turbopack

Uno de los aspectos más destacados de Next.js 13 es la introducción de Turbopack, que representa la evolución de Webpack y está construido con base en el lenguaje de programación Rust. Desarrollado por Mozilla Research, Rust es reconocido por su enfoque multiparadigma y su compilación eficiente. A diferencia de otros lenguajes seguros, Rust no requiere el uso de un recolector de basura, ya que está diseñado para ofrecer seguridad, concurrencia y practicidad. Además, Rust tiene soporte nativo para WebAssembly. Vercel, la empresa detrás de Next.js, sostiene que las soluciones basadas en JavaScript han alcanzado su máximo rendimiento.

En versiones anteriores de Next.js, Vercel ya había comenzado a transformar sus herramientas internas de JavaScript a aquellas basadas en Rust. Este proceso comenzó con Babel y resultó en una transpilación 17 veces más rápida. Posteriormente, también se migró la herramienta de minificación, logrando una aceleración del rendimiento 6 veces mayor.

Turbopack demuestra un rendimiento excepcional y presenta las siguientes características:

• Supera al Webpack convencional hasta 700 veces en términos de velocidad.
• Es 10 veces más ágil que el Vite.
• Comienza 4 veces más rápido que Webpack.

La notable capacidad del Turbopack es particularmente evidente en aplicaciones a gran escala. Un ejemplo ilustrativo muestra una comparación entre una aplicación con 10 mil componentes: mientras Vite requiere 37,2 segundos para iniciar la aplicación, Turbopack es capaz de hacerlo en apenas 6,1 segundos. Además, Turbopack incluye solo funciones esenciales durante el desarrollo.

Actualmente, Turbopack solo está disponible para el entorno de desarrollo, pero Vercel se compromete a ampliar este soporte cuando se construya el proyecto (build). La versión alfa de Turbopack ahora se puede probar, siempre que tengas un proyecto que utilice Next.js 13. Simplemente ejecuta el comando correspondiente.

$ next dev --turbo

Directorio app/

Somos conscientes de que Next.js incluye inherentemente un sistema de enrutamiento basado en documentos en su repositorio. Con Next 13, ha habido mejoras en el sistema de enrutamiento y las estructuras de diseño mediante la introducción del directorio app/. Las funcionalidades incorporadas incluyeron:

Layouts: Comparte fácilmente la interfaz, manteniendo el estado intacto y evitando el reprocesamiento.

Componentes de servidor: considera al servidor como prioridad predeterminada para aplicaciones más dinámicas.

Streaming: Demuestra instantáneamente los estados de carga y emite actualizaciones.

Data fetching: un nuevo hook de uso que permite obtener datos a nivel de componente.

Layout

El directorio app simplifica la organización de estructuras de interfaz complejas que mantienen el estado durante la navegación, evitan el procesamiento excesivo y permiten patrones de orientación sofisticados. Además, ahora es posible generar disposiciones visuales utilizando el sistema de registros, las cuales comparten su interfaz en varias páginas. Mientras navega, las disposiciones mantienen su estado, permanecen interactivas y no se someten a renderizado adicional.

Componentes del servidor

El directorio app ahora admite un nuevo marco de componentes de servidor para React. Estos componentes de servidor aprovechan las capacidades tanto del servidor como del cliente, permitiendo la creación de aplicaciones con rendimiento optimizado e interactividad mejorada, todo a través de un único modelo de programación que ofrece una experiencia de desarrollo excepcional.

La adopción de componentes de servidor permite reducir la cantidad de código JavaScript enviado al cliente, lo que resulta en tiempos de carga de la página inicial más rápidos.

Al cargar una ruta, se solicitarán los tiempos de ejecución tanto de NextJS como de React, que pueden almacenarse en caché y tener un tamaño predecible. El tamaño de este tiempo de ejecución no aumenta a medida que crece la aplicación. Además de este aspecto, la carga del tiempo de ejecución se produce de forma asincrónica, lo que permite una mejora progresiva del HTML del lado del servidor en el lado del cliente.

Streaming

El directorio de la aplicación demuestra la capacidad de crear y enviar de forma incremental partes renderizadas de la interfaz de usuario al destinatario. Usando componentes de servidor y layouts anidados en Next.js, es posible generar inmediatamente partes de la página que no requieren datos específicos, mostrando un estado de carga para las áreas que están buscando información. A través de este enfoque, no es necesario esperar a que se cargue la página completa antes de interactuar con ella.

Data Fetching

También se ha introducido un nuevo enfoque para obtener información del directorio app. El nuevo hook reemplaza las API Next anteriores, como getStaticProps y getServerSideProps.

Ahora existe un enfoque versátil para adquirir, almacenar en caché y validar datos a nivel de componente. Esto implica que todas las ventajas de Static Site Generation (SSG), Server-Side Rendering (SSR) y Incremental Static Regeneration (ISR) ahora están disponibles a través del hook de React y la expansión de Web Search API, como veremos en la solicitud de ejemplo en la integración de API falsa con Next.js.

La capacidad de incrustar la recuperación de datos dentro de los componentes y pasar menos código JavaScript al destinatario fueron dos comentarios clave de la comunidad que el equipo de Vercel informó haber recibido.

Integrando la API Fake en Next.js

Ahora que hemos aprendido un poco sobre las características principales de Next.js 13, creemos nuestra estructura para ejecutar al mismo tiempo en nuestro frontend, un servicio frontend y un servicio backend, este último sirviendo a nuestra API Fake.

Para utilizar una API Fake, vamos a emplear el paquete json-server. Para esto, puedes instalarlo utilizando este comando:

$ npm i json-server

Después de eso, simplemente agregamos un comando a nuestro package.json que está en la raíz del proyecto, que ejecutará nuestra API Fake.

• port 8000 indica el puerto que empleará la API Fake.
• watch @fakeapis/index.js indica el directorio y el archivo que éste observa para ejecutar el servidor de la API Fake.
  

Una vez hecho esto, creamos una carpeta en la raíz llamada @fakeapis que contendrá nuestros archivos json que representan nuestra API falsa. En la Figura 1 puedes ver que existe el archivo index.js que crea nuestra API falsa y llama a los archivos que representan la API.

El archivo index.js que construyó estas APIs Fake, feeds.json y trainings.json, puede generarse con este código:

Ahora, solo necesitamos ejecutar nuestra API falsa y el servidor json mostrará los archivos json disponibles como API en el puerto 8000, como puedes ver en la Figura 2.

Si llamas a una de las URL enumeradas en Resources que el servidor API falso puso a disposición, verás el resultado en formato json, como puedes corroborar en la Figura 3.

Ahora que podemos visualizar el resultado de la API falsa, podemos, en nuestro frontend, crear un componente usando la biblioteca SWR que el propio Next.js indica para llamar a nuestra API y comenzar a manipular los datos.

Conclusión

Espero que hayas disfrutado la implementación de la Fake API y sus beneficios, de hecho nos ayuda mucho en el desarrollo, velocidad, pruebas sin interrupciones ni problemas de conexión a Internet o al servidor, además de brindarnos soporte para ayudar al personal de backend también. con mejoras en la propia API cuando no tiene una estructura tan buena para que la maneje la interfaz.