Este artículo trata el problema de realizar una redirección 301 en una aplicación frontend que está ejecutándose en un servidor Node.Js.
Es por ello que realizar una redirección permanente, como se suele hacer en un Apache mediante el fichero htaccess, no es tan fácil o puede no estar funcionando como nosotros deseamos en una aplicación que está ejecutándose en un servidor Node.Js. Todo esto puede ser debido al enrutamiento interno que realiza una aplicación SPA como en el caso de Vue.Js entre otros frameworks.
Introducción
Para comprender mejor que está ocurriendo en una aplicación Vue.Js, es necesario aclarar el término Single Page Application (SPA). Una SPA carga en primera instancia todo el contenido que necesita, como el HTML, el CSS, Javascript, etc. Una vez que la página web ha cargado, a medida que el usuario realiza interacciones con la aplicación, el DOM se va actualizando en función de las necesidades. Sin embargo, la página web ya no vuelve a renderizarse por completo, el DOM se va modificando por partes.
Las SPA suelen tener un sistema de enrutamiento interno, de tal forma que se simula la navegación entre diferentes páginas de la aplicación. En el caso particular de Vue.JS, el módulo que se encarga de este comportamiento es vue-router. Por lo tanto, aunque el usuario esté en en el home de la aplicación (www.midominio.com) y vaya a la página de contacto (www.midominio.com/contacto), no se realiza una nueva petición al servidor apache como se suele hacer antiguamente. En el caso de Vue.Js el que responde a estos cambios de dominio es vue-router y por tanto no se puede hacer un control mediante un fichero htaccess.
Debido a los problemas nombrados anteriormente, es necesario realizar una programación en la configuración de la aplicación. Sin esta programación no se podrán realizar redirecciones permanentes (301) a páginas las cuales has dejado de dar soporte, o quieres redirigir todo el tráfico de una web a otra.
Es importante destacar que uno de los problemas que te puedes encontrar si no realizas una redirección permanente de páginas a las cuales has dejado de dar soporte, es que Google te ponga en la lista negra y tu SEO se vea afectado, ya que anteriormente tenías un contenido disponible que ahora ya no ofreces a los usuarios.
Código
El código que se presenta en esta sección cabe destacar que está optimizado para una aplicación diseñada mediante Nuxt.Js. Sin embargo la mayoría del código expuesto es reutilizable para implementar una solución con Vue.Js sin la ayuda o capa de abstracción que ofrece Nuxt.Js.
1. Lista de redirecciones
En primer lugar, se crea un fichero con formato .json en la raíz del proyecto. En él se añade una lista de las redirecciones que quieres realizar en tu aplicación.
// 301.json
[
{ "from": "/old", "to": "/new" },
{ "from": "/veryold", "to": "/verynew" },
{ "from": "/too-old", "to": "/new" }
]2. Crear un middleware
En segundo lugar, se crea un fichero Javascript en la carpeta middleware que se encargará de realizar la redirección entre rutas.
// middleware/seo.js
const redirects = require('../301.json')
module.exports = function (req, res, next) {
const redirect = redirects.find(r => r.from === req.url)
if (redirect) {
console.log(`Redirect: ${redirect.from} => ${redirect.to}`)
res.writeHead(301, { Location: redirect.to })
res.end()
} else {
next()
}
}3. Middleware en el fichero de configuración
Por último, en el fichero de configuración (nuxt.config.js) que proporciona Nuxt.Js, se debe de añadir la configuración que se visualiza a continuación.
// nuxt.config.js
module.exports = {
...
serverMiddleware: [
'~/middleware/seo.js'
],
...
}Después de realizar los tres pasos anteriores, solo necesitas arrancar tu aplicación y debería de estar funcionando todo correctamente.
Conclusión
La solución propuesta en este artículo está enfocada hacia un proyecto que trabaja con Nuxt.Js como capa de abstracción sobre Vue.Js. En caso de no conocer este framework puedes consultar este artículo para saber más sobre él.
