Site Loader
Nuxt.Js

Cualquiera que ha programado con la amalgama de nuevos framworks reactivos como Vue.js, Angular o React entre otros, sabe que se caracterizan por renderizar la aplicación en la parte del cliente. Esta funcionalidad hace que sea complicado posicionar estas aplicaciones en los buscadores, por esa necesidad aparece Nuxt.Js.

Introducción

Nuxt.Js nace con la intención de crear aplicaciones que sean server side rendering (SSR). Por defecto, las aplicaciones se ejecutan y renderizan en el lado del cliente (nevagador), pero hay ciertos momentos en los que se requiere que estas aplicaciones sean renderizadas en el lado del servidor, simplemente porque el demandante no tiene un navegador para cargar la página web.

Un ejemplo sencillo de ello son los crawlers o arañas de la web. El crawler de Google inspecciona tu página web y accede a todo tu contenido, por lo tanto de él depende la posición que aparece tu página web en los resultados de búsqueda. Por lo tanto, es muy importante que el crawler de Google pueda acceder a todo tu contenido, en caso contrario el SEO de tu página web se puede ver seriamente perjudicado.

Sin embargo, aunque Nuxt.Js nace con la finalidad de crear aplicaciones SSR, también añade una capa de abstracción sobre Vue.Js y crea una nueva estructura de ficheros y una forma de programación intuitiva basada en convenciones.

¿Por qué utilizar Nuxt.Js?

Nuxt.Js se presenta como una seria alternativa a la librería oficial vue-server-renderer. El problema principal de la librería oficial, es que necesita una serie de configuraciones engorrosas para crear una aplicación Vue.Js en modo SSR. Por lo tanto, Nuxt.Js permite al programador 
centrarse en desarrollar las aplicaciones sin realizar configuraciones complejas y engorrosas.

Además, vue-server-renderer no permite de una forma sencilla realizar la configuración de los atributos <head>, <title>, <meta>, etc. Por lo tanto, la ausencia de los metatags, es un problema para realizar un buen SEO.

¿Qué aporta Nux.Js?

Renderizar páginas en el servidor: Nuxt.Js se encarga de realizar todas las configuraciones necesarias para que cada una de tus páginas sean renderizadas en el servidor y por lo tanto la página web sea SEO friendly. Todo esta funcionalidad se hace por defecto, sin que tengas que preocuparte de nada.

Administrar los elementos <head>, <title>, <meta>, etc.: Nuxt.Js permite la configuración de forma sencilla de estos atributos necesarios para realizar un SEO optimizado.

Sistema de rutas automático: En función de cómo estructures tus vistas en el proyecto, Nuxt.Js se va a encargar de generar el fichero de vue-router para crear las rutas se nuestra single page application (SPA).

Servir ficheros estáticos: Si ubicas los ficheros en la carpeta de static, Nuxt.Js es capaz servir dichos ficheros en un servidor integrado. Puedes incluir todo tipo de contenido como imágenes, PDFs, vistas HTML, etc.

Configuración intuitiva del store: Como en otros aspectos, el store también tiene una convención para generar todo lo relativo al vue-store, de tal forma que el uso y configuración de esta funcionalidad sea intuitiva y fácil al programar las vistas. 

Preprocesamiento de SASS/LESS/Stylus, empaquetado/minificado de JS y CSS y Transpilación de ES6/ES7: Nuxt se encarga de configurar Webpack para que no tengamos que preocuparnos de ello y optimizar el código generado.

Recarga de la aplicación en caliente en entorno de desarrollo: En el entorno de desarrollo, el programador puede ver al instante cada uno de los cambios que va haciendo sobre ela aplicación. Esto conlleva una optimización del tiempo de desarrollo.

Generar la aplicación a formato estático: Nuxt.Js permite generar todo el proyecto a código estático. Esta funcionalidad es importante para poder alojar la aplicación en cualquier servidor y que la aplicación sea servida rápidamente, sin necesidad de necesitar un servidor Node.Js que ejecute la aplicación.

Conclusión

El uso de este framwork cambia por completo la estructura de ficheros que propone Vue.Js por defecto con una finalidad clara, crear una serie de convenciones para la estructura de ficheros. Esta funcionalidad es muy interesante porque permite crear una aplicación bien estructurada e intuitiva, de tal forma que cualquier programador sabe ubicarse rápidamente. Por lo tanto esto es un gran punto a favor.

Además, ligado a estas convenciones y a la ubicación y nombre de los ficheros creados, se generan una serie de configuraciones y código por defecto que hace las delicias del programador si lo que quiere es empezar a generar lógica de negocio cuanto antes y alejarse de distracciones.

Es cierto que toda esta ‘magia‘ tiene un peligro, ya que si Nuxt.Js no funciona como debería, es importante saber como se comporta por debajo y qué está ocurriendo. Afortunadamente, por experiencia propia, puedo decir que rara vez ocurre este escenario.

Por lo tanto, aunque no vayas a necesitar de la funcionalidad SSR en tu proyecto, recomiendo totalmente el uso de este framework, ya que no solo te proporciona configuraciones sobre SSR, sino que tiene mucha más funcionalidad interesante que hace que Vue.Js tenga un potencial mucho mayor.

Compartir en redes sociales:

Post Author: Vicente Javier González Llobet

3 Replies to “Nuxt.Js y Vue.Js: Aplicaciones SSR sin penalizar el SEO”

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

LinkedIn
Share