Gestionar redirecciones permanentes con Nuxt

Introducción

Antes de entrar a la solución es buena idea repasar bien el problema. Cuando hacemos una petición get por HTTP a una dirección web como https://www.example.com el protocolo va a buscar un fichero con nombre index para servirlo. Esta petición puede definirse de 3 formas:

• Petición a https://www.example.com
• Petición a https://www.example.com/
• Petición a https://www.example.com/index.html (U otra extensión)

Las 3 formas son perfectamente válidas y podemos utilizar cualquiera de ellas para servir el contenido de nuestra web (Está lógica aplica a cualquier otro directorio de la web).

El problema viene cuando empezamos a analizar el tráfico de nuestra web ya que encontraremos el tráfico segmentado en las peticiones posibles, lo que puede dificultar sacar las métricas. Pero algo más problemático es que en algunos casos podemos encontrarnos con que nuestras páginas sean consideradas como contenido duplicado por los buscadores, cosa que puede penalizarnos mucho.

Por ello es importante definir una estrategia global en toda nuestra aplicación web para servir el contenido. Ahora vamos a ver cómo hacerlo de forma sencilla para tu aplicación de Nuxt.

Definiendo una estrategia de urls

El primer paso es elegir cómo quieres que las urls estén disponibles en tu web. Por ejemplo vamos a suponer que quieres que todas terminen con la barra inclinada (Slash) final.

Esto significará que todas tus urls canónicas van a estar definidas con la barra al final y tus enlaces internos deben incluir siempre el "/". Por ejemplo un push a una url sería de la siguiente forma: $router.push('/sample-page/') o de forma nativa window.location = '/sample-page/'.

Ahora que hemos definido cómo van a estar disponibles nuestras url pasamos a hacer las redirecciones automáticas.

Configurando las redirecciones

Como vamos a querer que toda url que no acabe en slash sea redireccionada siempre a la url que sí lo tiene, vamos a configurar una redirección permanente, de manera que nuestra aplicación al recibir peticiones en urls que no acaben en slash responderá con un código 301 y hará la redirección automática a la página con slash.

Afortunadamente tenemos un módulo de Nuxt con el que podemos configurar de forma sencilla todo tipo de redirecciones: https://github.com/nuxt-community/redirect-module#readme.

Lo podemos con npm o yarn:

npm install @nuxtjs/redirect-module

yarn add @nuxtjs/redirect-module

Una vez instalado el paquete añadimos el módulo a Nuxt. Dentro del fichero nuxt.config.js en el atributo modules:

modules: [
  '@nuxtjs/redirect-module'
]

Ya tenemos instalado el módulo por lo que vamos a aplicar la configuración para que todas las rutas acaben con slash. Para ello creamos el atributo redirect dentro de la configuración de Nuxt (Puedes ponerlo justo debajo de los módulos):

redirect: [
  { from: '^.*(?<!/)$', to: (from, req) => req.url + '/', statusCode: 301 }
]

Es importante que indiquemos que el código de redirección sea 301 ya que queremos que aparezca la redirección como permanente.

Probando las redirecciones

Tenemos todo listo y configurado por lo que vamos a probarlo. Al ejecutar nuestra aplicación en local y acceder a cualquier url, vamos a utilizar el inspector de nuestro navegador para comprobar que todo funciona como esperamos.

Para ello abrimos la pestaña Network y filtramos por peticiones a documentos (Subpestaña Doc). De esta forma vemos las peticiones a los documentos HTML que sirven nuestras url.

Si inspeccionamos por ejemplo las peticiones de esta página podremos comprobar que hemos aplicado los cambios de la redirección mirando las cabeceras de las peticiones HTTP.

• Petición terminada en slash:
  
• Petición sin slash redireccionada con 301:
  

Para terminar

Es muy sencillo gestionar las redirecciones permanentes con este módulo, pero igualmente te recomiendo echarle un vistazo porque tiene varias opciones interesantes y puedes configurar otro tipo de redirecciones como varias páginas a una sola u otros trucos más avanzados.