Nuxt.js: Una pieza más del ecosistema Vue.js (Introducción)

hace 3 semanas

Uno de los problemas que nos podemos encontrar a la hora de desarrollar un front usando un frameworks reactivo como Vue.js, o Angular, o React o Ember o.... es que las páginas son generadas en el lado cliente y por lo tanto, su indexación en por parte de los buscadores es cuando menos, poco óptima.

Vue.js dispone de un paquete oficial llamado, vue-server-renderer, simplemente Server-Side Rendering o SSR. El SSR consiste básicamente en ejecutar nuestra aplicación vue.js en el servidor (con node.js) para devolver el html ya renderizado, por lo que la parte de la indexación del contenido queda resuelta, pero nos quedan detalles como la gestión simple de metatags. seguir ofreciendo al usuario un entorno "reactivo", etc. Para resolver esto nace nuxt.js.

Traduciendo libremente la explicación que aparece en la página de nuxt.js: 

El 25 de octubre de 2016, el equipo detrás de zelt.co, anuncia Next.js, un framework para aplicaciones React renderizadas en el lado servidor. Pocas horas después de ese anuncio, la idea de crear aplicaciones renderizadas del lado servidor en Vue.js de la misma forma que Next.js era obvia. Nuxt.js había nacido.

El objetivo de Nuxt.js es crear aplicaciones Vue.js universales (entendiendo por universo, tanto lado cliente como servidor) y esto lo consiguen abstrayendo tanto cliente como servidor, de forma que nuestra programación es independiente de donde se este ejecutando.

Un ejemplo de la magia de nuxt.js es el siguiente, imaginemos que tenemos la típica página de ToDo, como esta http://todomvc.com/examples/vue/, en una app toda de lado cliente cagaríamos los datos de la lsita desde un endpoint y el componente correspondiente de Vue.js se encargaría de modificar el DOM de la página para mostrar esos datos.

Que aporta aquí nuxt.js, haciendo correr el mismo, si has leído bien, el mismo código en el lado servidor nuxt.js este nos devolverá la misma página renderizada, se conectará a los mismos endpoints para recuperar los datos, generará un DOM con ellos que devolverá en forma de HTML al navegador.

Pero la magia de Nuxt.js no acaba aquí, nuestra aplicación tal y como la hemos recibido sigue siendo reactiva, es decir podemos añadir una nueva tarea, cargar una nueva página, todo ello de la forma tradicional del lado cliente, todo sin que tengamos que hacer modificaciones en el código ni el usuario note nada extraño.

Nuxt.js además permite generar páginas completamente estáticas al estilo Hugo o JeckyllRb a partir de datos dinámicos.

De este potencial y mucho más hablaremos en próximas entradas del blog, esta solo era una pequeña toma de contacto, pero os invito a pasaros por https://nuxtjs.org/ y empezar a jugar.