Vue.js ha tenido una presencia ejemplar en la comunidad de desarrolladores con sus increíbles funciones y su capacidad para crear aplicaciones progresivas e interfaces de usuario.

Nuxt.js es un marco frontend de JavaScript de alto nivel y código abierto que crea aplicaciones sobre Vue.js. Su objetivo es crear aplicaciones web potentes y renderizadas del lado del servidor mientras se utilizan bibliotecas Vue.js y herramientas de desarrollo como Babel, webpack, etc.

Se basa en el framework  ‘Next’ pero en Vue.

Si está familiarizado con Vue, no se sentirá fuera de lugar al tratar con Nuxt. De hecho, es demasiado similar a Vue.js, excepto por ciertas funciones actualizadas que permiten a los desarrolladores escribir código bien estructurado en muy poco tiempo.

Nuxt.js contra Vue.js

La diferencia clave entre Nuxt.js y Vue.js radica en el hecho de que Vue.js se ejecuta en el lado del cliente y crea aplicaciones de una sola página (SPA). Si bien todo este enfoque es ideal para mejorar la experiencia del usuario y mejora la velocidad de la aplicación, tiene algunas limitaciones.

Verá, el navegador tarda bastante tiempo durante la carga inicial del sitio web porque las aplicaciones SPA envían fragmentos o partes de HTML/CSS de las páginas web y el navegador necesita reunir todos estos fragmentos para crear contenido significativo para mostrar.

Significa que mientras el navegador obtiene su código JavaScript, los motores de búsqueda apenas obtienen contenido para rastrear. Deja su sitio web fuera de los motores de búsqueda, por lo tanto, no es compatible con el SEO. Y aunque su sitio web puede ser una adición maravillosa para los usuarios, no aparecerá a los usuarios potenciales en los resultados de búsqueda, lo que reduce las posibilidades de que obtenga más clics y visitantes.

¡Nuxt lleva a Vue al siguiente nivel! Se ocupa tanto del lado del cliente como del lado del servidor.

Para resolver el problema mencionado anteriormente, Nuxt pone sobre la mesa estas alternativas (además de SPA)

1. Server-side rendering / Representación del lado del servidor
2. Static-generated apps (Pre-rendered) / Aplicaciones generadas estáticas (preprocesadas)
3. Renderización del lado del servidor / Server-side Rendering (SSR)

Nuxt.js representa la aplicación vue.js en el lado del servidor de forma inmediata. Dado que nos enfrentamos a problemas de SEO con los SPA, Nuxt resuelve este problema mediante el desarrollo de aplicaciones de una sola página renderizadas en el lado del servidor (también llamadas aplicaciones universales).

Como sabemos, la representación del lado del servidor se refiere a la carga previa del sitio web en un servidor que, a su vez, genera una página lista para mostrar en cada solicitud. Esta página se utiliza luego para la indexación de los motores de búsqueda durante el rastreo. Todo este proceso mejora en gran medida el rendimiento del sitio web y el SEO.

Sin embargo, Nuxt.js no se trata solo de SSR. De hecho, se promueve como un marco para construir aplicaciones universales. ¿Qué significa eso? 

Generación de sitios estáticos / Static Site Generation

Nuxt también funciona como un generador de sitios estáticos, es decir, presenta su aplicación de forma estática y le brinda los beneficios de una aplicación universal sin servidor.

El renderizado estático es un tipo de renderizado previo en el que Nuxt renderiza su aplicación en el momento de la compilación al convertir las páginas web en archivos HTML y JavaScript estáticos.

Nuxt.js está preconfigurado para generar aplicaciones Vue universales en el servidor a través del comando:

nuxt generate. 

Cuando implementa su sitio web en Nuxt con target:static, genera archivos HTML y JavaScript para todas las páginas .vue y los almacena dentro de un directorio separado. La red de entrega de contenido (CDN) luego envía estos archivos estáticos generados al navegador para mostrarlos cuando se solicite.

Además, Nuxt.js hace que la página se cargue aún más rápido al aplicar la división automática de código para navegar entre páginas y mejora el SEO al agregar metaetiquetas con cada página.

Así es como Nuxt se convierte en una excelente alternativa sobre Vue.js, ya que no está obligado a usar SSR solo (ya que puede ser tedioso), siempre puede elegir la generación estática. Además, tiene la opción de crear SPA aprovechando las características de Nuxt si eso es lo que exige el requisito.

¿Por qué elegir Nuxt.js para el desarrollo de aplicaciones web?

Hay muchas otras características que hacen de Nuxt.js un marco de referencia para el desarrollo web sobre Vue.js que mencionaremos aquí:

Estructura de carpetas estandarizada

Aunque Vue.js proporciona un directorio de activos y componentes lo suficientemente bueno para aplicaciones más pequeñas y simples, cuando la complejidad de la aplicación entra en juego, no ofrece nada para ayudar.

Por otro lado, Nuxt.js le permite crear directorios separados para organizar el código de la forma que mejor le parezca, tanto para aplicaciones pequeñas como grandes, como:

1. Directorio de diseños para el diseño de plantillas
2. Páginas para rutas y vistas de aplicaciones
3. Directorio de almacenamiento para archivos de almacenamiento Vuex
4. Directorio de complementos para contener los complementos de JavaScript
5. @nuxt/content/ module para obtener contenido en los lados del cliente y del servidor y mostrar la página
6. package.jsonfile que contiene todas las dependencias y scripts relacionados
7. staticdirectory para almacenar archivos estáticos

Estos son solo algunos ejemplos comunes, hay muchos más directorios y módulos configurables disponibles en Nuxt para administrar mejor el código de su aplicación. ¡Es como jugar a una velocidad superrápida para los desarrolladores!

Enrutamiento automático

Un sitio web consta de muchas páginas y necesitamos un enrutador para navegar y mostrar estas páginas. Vue.js requiere que configure la configuración del archivo router.js y coloque su enrutador allí, todo lo cual debe hacer manualmente.

Nuxt.js lo libera de todo este trabajo al generar una configuración de enrutador automática, es decir, vue-router según los archivos .vue provistos dentro de la carpeta de páginas. Esto, a su vez, significa que ya no tiene que escribir configuraciones de enrutamiento. Para navegar entre páginas, puede usar el componente <NuxtLink>.

Fácil configuración de la aplicación

Las aplicaciones de Nuxt son demasiado fáciles de configurar y se pueden configurar según sus necesidades.

Simplemente puede comenzar con:

npm instalar nuxt
npm init nuxt-app <nombre-del-proyecto>

Nuxt.js viene con una configuración predeterminada para la mayoría de los casos de uso, pero no lo bloquea con ellos y brinda la flexibilidad de reconfigurar para satisfacer sus necesidades.

Siempre que desee modificar cualquiera de las configuraciones predeterminadas, simplemente sobreescríbalo con el archivo nuxt.config.js.

Gestión de metaetiquetas

¡Otra característica maravillosa de Nuxt es su capacidad para incrustar etiquetas meta con su aplicación!

Nuxt le permite definir etiquetas <meta> predeterminadas para su aplicación dentro del archivo nuxt.config.js. Es útil cuando desea que sus páginas sean fácilmente reconocibles en los motores de búsqueda, ya que puede agregar meta títulos específicos y etiquetas de descripción para mejorar el SEO.

Estas son las características más publicitadas de Nuxt.js, pero hay muchas otras en la lista, como:

1. Recarga de código caliente
2. División de código para cada página/
3. Agrupación automática
4. software intermedio

Aunque Nuxt ofrece todas estas características increíbles, en última instancia, todo depende de sus requisitos explícitos para decidir con cuál de los dos, Vue o Nuxt, terminará.

¡¡Nuxt.js 3 ya está aquí!!

¡El equipo de Vue.js reescribió Nuxt después de años para crear un Nuxt 3 nuevo, más ligero y más rápido!

La versión más nueva de Nuxt.js trae un montón de nuevas capacidades como el renderizado híbrido, el kit Nuxt con compatibilidad con TypeScript, la migración fluida desde Nuxt 2 junto con un nuevo motor de servidor en la imagen: Nitro.

Este sería el primer servidor de aplicaciones de JavaScript que es portátil entre muchos proveedores de servicios de alojamiento en la nube.

Nuxt 3 es compatible con Vite.js y Vue 3 y aún se encuentra en la fase beta, pero crucé los dedos ya que el equipo de Vue está a punto de terminarlo pronto.

 

Articulo traducido