Vue JS es un framework que está creciendo cada vez más. En este artículo vamos a hablar de una herramienta que puede ayudarnos a evolucionar aún más nuestras aplicaciones en Vue. Estamos hablando de Nuxt JS. Pero, ¿qué es Nuxt? ¿Cuáles son las ventajas de usarlo? ¿Cómo puede ayudarnos? Vamos a responder estas preguntas en este artículo, además de crear nuestro primer proyecto con Nuxt.
¿Qué es Nuxt JS?
El Nuxt JS es un framework JavaScript creado por Sebastien Chopin y Alexander Chopin en 2016. Es mantenido por la comunidad, al igual que Vue JS. Ten en cuenta que es un framework desarrollado para otro framework. ¿Por qué es necesario esto?
¿Por qué es necesario Nuxt?
Una aplicación Vue por sí sola ya es muy poderosa. Sin embargo, cuando trabajamos en una aplicación muy grande, podemos sentir algunas dificultades. Por ejemplo: tal vez tengamos dificultades para mantener la productividad al crear las páginas de nuestro sitio.
Además, una aplicación Vue por defecto es una SPA (Single Page Application). Esto es bueno debido a la simplicidad. Sin embargo, este enfoque puede traernos algunos problemas dependiendo de la aplicación que estamos desarrollando.
El concepto de una SPA es tener solo un archivo HTML y, a medida que realizamos interacciones con la página, cambiamos su contenido. En el caso de Vue, cambiamos los componentes que se renderizan. Pero este concepto puede impactar en algunos aspectos importantes para que nuestro proyecto funcione bien. Una cuestión es la velocidad. Como toda la renderización se hace del lado del cliente (navegador), se realiza toda la solicitud de los archivos CSS y JavaScript antes de que nuestro sitio esté realmente disponible para el usuario final. Este proceso puede ser un poco lento, lo que hace que nuestro sitio pierda rendimiento. Esto puede perjudicar el posicionamiento de nuestro proyecto en los motores de búsqueda de los navegadores. Por ejemplo, Google recomienda que nuestro sitio se cargue en hasta 3 segundos para que tenga una buena posición en el ranking de búsqueda.
Y ya que estamos hablando de motores de búsqueda, no podemos dejar de hablar de SEO (Search Engine Optimization). Este conjunto de estrategias ayuda a que nuestro sitio sea bien visto por los motores de búsqueda. Y esta es otra cuestión que las SPAs pueden perjudicarnos. Al realizar la renderización completamente del lado del cliente, no podemos indexar nuestra página a través de las meta etiquetas, por ejemplo. En otras palabras, los motores de búsqueda no pueden identificar el objetivo de nuestras páginas y su contenido. Por lo tanto, no serán recomendadas para los usuarios.
Estas cuestiones pueden perjudicarnos. La buena noticia es que Nuxt puede ayudarnos a solucionar estos "problemas". Este framework utiliza el concepto de SSR (Server-Side Rendering). Este enfoque define que toda la renderización de nuestro sitio ocurrirá del lado del servidor. Esto significa que nuestro HTML, incluyendo las meta etiquetas, nuestro CSS y nuestro JavaScript serán montados en el servidor. De esta forma, cuando el navegador solicite una página de nuestro sitio, todo el contenido necesario ya estará listo y será enviado al usuario de una sola vez. El resultado será que nuestro sitio aumentará en velocidad y será amigable para el SEO, lo que facilitará su recomendación en los motores de búsqueda de los navegadores, exactamente lo que necesitamos.
Otras ventajas de Nuxt
Además de las ventajas que acabamos de mencionar, Nuxt puede ayudarnos en otras cuestiones también muy importantes. Pensemos, por ejemplo, en las varias herramientas que poseemos cuando trabajamos con una aplicación Vue. Contamos, por ejemplo, con Vue Router para crear las rutas de nuestro sitio y Vuex para el mantenimiento del estado en la aplicación. De hecho, hemos hablado sobre cada una de estas herramientas con detalles en nuestro Curso Completo de Vue JS.
Estos recursos son muy útiles. Sin embargo, imagina necesitar realizar la configuración de cada una de ellas en un proyecto que estamos iniciando. Esto puede demandar una cantidad de tiempo considerable. En este sentido, Nuxt también puede ayudarnos. Realiza toda esta configuración para nosotros automáticamente, ya que utiliza Vue Router y Vuex en su estructura, además de vue-meta para el SEO, como comentamos anteriormente. De esta forma, solo necesitamos preocuparnos por desarrollar nuestros archivos en Vue, aumentando nuestra rendimiento en el desarrollo.
La comunidad de Nuxt es muy activa y la documentación de este framework es excelente. Por lo tanto, si tenemos alguna duda o problema, no tendremos dificultades para encontrar la ayuda necesaria. El simple proceso de iniciar un proyecto en Nuxt es muy sencillo. Veamos cómo hacer esto ahora.
Creando el primer proyecto en Nuxt
Para iniciar un proyecto usando Nuxt, es necesario tener Node instalado en nuestra computadora. Además, es importante que npm o Yarn también estén instalados. Para crear nuestro primer proyecto, utilizaremos el siguiente comando:
npx create-nuxt-app first-project
Hemos nombrado nuestro proyecto como "first-project", pero podríamos informar cualquier otro nombre.
Después de ejecutar este comando, responderemos una serie de preguntas para la configuración del proyecto.
La primera pregunta es sobre el nombre del proyecto. Vamos a definir lo que ya fue digitado antes. Por lo tanto, presionaremos Enter.
Ahora elegiremos el lenguaje de programación que usaremos en el proyecto. Podemos cambiar la opción elegida usando las flechas del teclado. Elegiremos “JavaScript”.
A continuación, definiremos el Gestor de Paquetes que se utilizará para descargar los módulos en nuestra aplicación. Elegiremos npm.
El siguiente paso será definir si usaremos algún framework para una mejor experiencia del usuario, como Bootstrap o Vuetify. En este proyecto inicial no utilizaremos ninguno, así que simplemente presionaremos Enter.
Nuxt JS tiene algunos módulos que pueden ayudarnos en nuestro proyecto, como un módulo para Axios, utilizado para solicitudes AJAX, y un módulo para PWA, para convertir nuestra aplicación en una Progressive Web App. Si deseamos elegir alguna opción, simplemente presionamos Espacio. No usaremos ningún módulo, así que presionamos Enter nuevamente.
También podemos definir si vamos a usar alguna herramienta para análisis de código en nuestro proyecto, como ESLint. Presionaremos Enter una vez más.
Si deseamos usar algún framework para pruebas en nuestro proyecto, como Jest, podremos definirlo en este momento. En nuestro caso, presionaremos Enter.
El siguiente paso es definir el tipo de renderización que usaremos en nuestro proyecto. Podemos elegir “Universal”, que representa el SSR, o “Single Page App”, que es una SPA. Así que, a pesar de que Nuxt nos ayude a resolver los problemas de una SPA en Vue JS, también es posible crear una SPA con Nuxt. En este caso, elegiremos el modo “Universal”.
La próxima configuración es el tipo de despliegue que realizaremos. Tenemos la opción de crear un servidor en Node JS o realizar el despliegue del proyecto de forma estática, sin un servidor. En nuestro caso, elegiremos la primera opción, “Server”.
Por último, elegiremos las herramientas de desarrollo que deseamos. El archivo jsconfig.json se recomienda si estamos trabajando con Visual Studio Code. Si lo deseas, puedes seleccionarlo usando la tecla Espacio.
Solo recordando que estas configuraciones pueden cambiar con el tiempo, de acuerdo con la versión de Nuxt que estemos usando. Después de esto, se iniciará la creación y configuración del proyecto.
Al finalizar la instalación, se devolverá un mensaje de éxito:
Para iniciar nuestro proyecto, ejecutaremos los siguientes comandos:
cd first-project
npm run dev
Con este comando, Nuxt iniciará nuestro servidor de desarrollo:
Generalmente, Nuxt se disponibiliza en el puerto 3000. Así que, accediendo a http://localhost:3000 en el navegador, veremos el siguiente resultado en el navegador:
Observa que nuestro proyecto ya está siendo reconocido en el navegador. Ahora analicemos la estructura de carpetas que Nuxt nos ofrece:
En este momento podemos ver otra cuestión en la que Nuxt nos ayuda. Una duda que generalmente tenemos cuando trabajamos con Vue JS es dónde crear nuestros archivos. Vue no tiene una regla sobre dónde definir cada archivo, y esto muchas veces se deja a cargo del desarrollador. Sin embargo, puede que deseemos seguir un estándar de carpetas (aún más si somos indecisos al elegir el nombre de las carpetas ?). En este sentido, Nuxt también nos ayuda, ya que ya ofrece una estructura de carpetas que podemos seguir.
Vemos muchas carpetas en esta estructura y tal vez nos sintamos un poco perdidos con ellas. La buena noticia es que cada uno de estos directorios tiene un archivo README.md, que muestra la función del directorio. Así, si tenemos alguna duda, podemos resolverla leyendo este archivo.
Podemos decir que los directorios más importantes para iniciar un nuevo proyecto son las carpetas pages y components. La carpeta components almacena los componentes de nuestra aplicación. Así, si ya tienes algún conocimiento sobre este concepto de Vue JS, no tendrás dificultades en manipular esta carpeta.
Por su parte, el directorio pages almacena todas las páginas de nuestro proyecto. Podemos decir que es en este directorio donde agruparemos los varios componentes que creamos y también definiremos las meta etiquetas de cada página. Lo más increíble es que Nuxt convierte cada archivo en este directorio en una ruta de nuestra aplicación. Así que las rutas se crean automáticamente, no tenemos que preocuparnos por ello. Veamos esto sucediendo en la práctica.
Creando una ruta en nuestra aplicación
Vamos a crear un archivo about.vue en el directorio pages. Tendrá el siguiente contenido:
<template>
<h1>Conoce Hcode Entrenamientos</h1>
</template>
Ahora, al acceder a http://localhost:3000/about, vemos lo siguiente:
¡Excelente! La ruta “/about” fue creada dinámicamente y nuestro HTML se renderizó correctamente. Impresionante la simplicidad de Nuxt, ¿no es así?
Basta repetir este proceso para crear cualquier otra ruta en nuestro proyecto.
Conclusión
En este artículo vimos una introducción a Nuxt JS, el framework intuitivo para Vue JS. Esperamos que este framework pueda ayudarte a hacer lo que Gregg Pollack dijo en el video de introducción que está en el sitio de Nuxt: “Gastar menos tiempo en configuración y más tiempo en lo que realmente importa: resolver problemas y crear aplicaciones increíbles con Vue JS”.
Hasta el próximo artículo :)