Cómo utilizar la representación del lado del servidor con Nuxt.js

El autor seleccionó Open Sourcing Mental Illness para recibir una donación como parte del programa Write for DOnations .

Introducción

Las aplicaciones de página única (SPA) son aplicaciones que se procesan como una sola index.htmlpágina en el lado del cliente. Tradicionalmente, las SPA contienen muy poco HTML al cargarse; en cambio, un marco como Vue.js le permite inyectar contenido en un contenedor HTML a través de JavaScript cuando se cumplen ciertas condiciones. Si bien esto hace que la aplicación sea dinámica y personalizable, también causa problemas para la optimización de motores de búsqueda (SEO) porque los rastreadores web solo pueden analizar archivos que provienen del servidor y nunca se analiza todo el HTML importante en las rutas generadas dinámicamente.

Nuxt.js es un marco para aplicaciones Vue.js que puede resolver este problema con la representación del lado del servidor , una estrategia que representa la aplicación en el servidor y luego la envía al cliente. Con Nuxt, todas sus rutas se generan a partir de .vuearchivos en el pagesdirectorio. Dentro de estas páginas, puede obtener datos de una API REST e inyectarlos en el templatede su componente. Todos los datos y el HTML dentro del templateson representados por el servidor Nuxt, que envía un .htmlarchivo generado al cliente. Dado que lo .htmlproporciona el servidor, los rastreadores web pueden analizar todo el HTML importante en cualquier ruta.

En este tutorial, configurará una aplicación web de muestra con información sobre aeropuertos. La aplicación mostrará una página Acerca de y una página generada dinámicamente para cada aeropuerto del conjunto de datos. Luego, utilizará Nuxt.js para generar rutas de páginas, crear componentes de diseño y configurar metadatos específicos de la página.

Prerrequisitos

• La versión 16.14.0 o posterior de Node.js está instalada en tu computadora. Para instalarlo en macOS o Ubuntu 20.04, sigue los pasos que se indican en Cómo instalar Node.js y crear un entorno de desarrollo local en macOS o en la sección Instalación mediante un PPA de Cómo instalar Node.js en Ubuntu 20.04 .
• También necesitarás conocimientos básicos de JavaScript, HTML y CSS, que puedes encontrar en nuestras series Cómo crear un sitio web con HTML , Cómo crear un sitio web con CSS y en Cómo codificar en JavaScript .

Paso 1: Instalación de Nuxt en la aplicación de ejemplo

En este paso, creará un proyecto Nuxt mediante un comando en la terminal de su computadora. Este npxcomando ejecutará un script externo que generará su nuevo proyecto Vue.js según la información que proporcione en las indicaciones. Esto es similar al vue createcomando que se usa para generar un nuevo proyecto Vue con la CLI de Vue. Luego, configurará su aplicación de ejemplo, que usará para probar las características de Nuxt más adelante en el tutorial.

En su terminal, ejecute el siguiente npxcomando. Este comando generará un proyecto en el directorio en el que está trabajando actualmente:

npx create-nuxt-app favorite-airports

Si es la primera vez que ejecuta create-nuxt-app, aparecerá un mensaje con una lista de los paquetes necesarios para instalar primero. Escriba yy presione ENTERpara continuar:

OutputNeed to install the following packages:  create-nuxt-appOk to proceed? (y) y

Una vez instalados los paquetes necesarios, aparecerá el primer mensaje:

Outputcreate-nuxt-app v4.0.0✨  Generating Nuxt.js project in favorite-airports? Project name: (favorite-airports)

Escriba el nombre que prefiera para su aplicación o presione ENTERpara seleccionar el nombre predeterminado. Continúe trabajando con las indicaciones individualmente, seleccionando las opciones resaltadas en el siguiente bloque:

Output✨  Generating Nuxt.js project in favorite-airports? Project name: favorite-airports? Programming language: JavaScript? Package manager: Npm? UI framework: None? Nuxt.js modules: Axios - Promise based HTTP client? Linting tools: None? Testing framework: None? Rendering mode: Universal (SSR / SSG)? Deployment target: Server (Node.js hosting)? Development tools: None? What is your Github username?? Version control system: Git

Cuando esto esté completo, cambie el directorio favorite-airportse inicie el servidor de desarrollo local:

cd favorite-airports
npm run dev

Esto iniciará un servidor local que puedes visitar en la dirección proporcionada. En tu navegador, ve a http://localhost:3000/. Verás lo siguiente:

Ahora que su proyecto está en ejecución, puede configurar la aplicación de ejemplo agregando una matriz de objetos que usará como datos en este tutorial.

Abra su terminal y ejecute el siguiente comando en el directorio raíz del proyecto ( favorite-airports):

mkdir data

Esto creará el datadirectorio. En el editor de texto que prefiera, cree y abra un archivo con el nombre airports.jsdel datadirectorio y agregue lo siguiente:

aeropuertos-favoritos/datos/aeropuertos.js

export default [  {    name: 'Cincinnati/Northern Kentucky International Airport',    abbreviation: 'CVG',    city: 'Hebron',    state: 'KY'  },  {    name: 'Seattle-Tacoma International Airport',    abbreviation: 'SEA',    city: 'Seattle',    state: 'WA'  },  {    name: 'Minneapolis-Saint Paul International Airport',    abbreviation: 'MSP',    city: 'Bloomington',    state: 'MN'  },  {    name: 'Louis Armstrong New Orleans International Airport',    abbreviation: 'MSY',    city: 'New Orleans',    state: 'LA'  },  {    name: 'Chicago O'hare International Airport',    abbreviation: 'ORD',    city: 'Chicago',    state: 'IL'  },  {    name: 'Miami International Airport',    abbreviation: 'MIA',    city: 'Miami',    state: 'FL'  }]

Se trata de una matriz de objetos que consta de algunos aeropuertos de Estados Unidos. Utilizarás estos datos para generar páginas dinámicas para tu aplicación.

Guarde y cierre este archivo.

A continuación, importará el marco CSS Tailwind para agregar estilos a su aplicación. Para ello, abra el archivo de configuración de Nuxt nuxt.config.jsen su editor y agregue el siguiente código resaltado:

aeropuertos-favoritos/nuxt.config.js

export default {  // Global page headers: https://go.nuxtjs.dev/config-head  head: {    title: 'favorite-airports',    htmlAttrs: {      lang: 'en'    },    meta: [      { charset: 'utf-8' },      { name: 'viewport', content: 'width=device-width, initial-scale=1' },      { hid: 'description', name: 'description', content: '' },      { name: 'format-detection', content: 'telephone=no' }    ],    link: [      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },      { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css' }    ]  },...}

Guarde y cierre el archivo de configuración.

Ya ha instalado Nuxt, ha generado su proyecto y lo ha configurado para probar las funciones de Nuxt. En el siguiente paso, creará distintos tipos de rutas automáticamente colocando .vuearchivos dentro del pagesdirectorio.

Paso 2: Generar rutas a través del pagesdirectorio

A diferencia de una aplicación tradicional de Vue.js, las rutas en Nuxt no se generan a través de un archivo de enrutador, sino que se generan desde el pagesdirectorio. Cada .vuearchivo de este directorio generará una ruta. En este paso, probará esta funcionalidad creando una página Acerca de y generando páginas dinámicamente para cada aeropuerto.

Eche un vistazo a su pagesdirectorio. Ya hay una página allí: . Esto es equivalente a tener una página index.vueestática . Esta página contiene un solo componente que contiene el HTML que se representó en su navegador cuando ejecutó el servidor de desarrollo local. Aparece de la siguiente manera:index.htmlindex.vueTutorial /

aeropuertos-favoritos/paginas/index.vue

template  Tutorial //templatescriptexport default {  name: 'IndexPage'}/script

A continuación, ampliará esto creando su propia ruta estática de Nuxt. En su terminal, cree y abra un archivo llamado about.vueen el directorio de páginas. El nombre del archivo antes de la extensión será la ruta URL, por lo que la URL en este caso sería your_site/about. Dentro de este about.vuearchivo, agregue lo siguiente:

aeropuertos-favoritos/paginas/about.vue

template  div    h1This is the About Page/h1    pThis page contains the about information of this application. This is a static route created by Nuxt via the `about.vue` file in the pages directory/p  /div/templatescriptexport default {  name: 'AboutPage'}/script

En esta página, creaste un h1encabezado y un pelemento dentro de un archivo div. Luego, agregaste estilo a cada elemento con clases Tailwind y configuraste la fuente y los márgenes. En el scriptelemento, agregaste una namepropiedad para identificar esta página en tu aplicación Vue.

Guarde este archivo y navegue hasta http://localhost:3000/about. Verá el HTML que escribió representado en el navegador:

Ahora que ha creado una ruta estática, puede pasar a crear una ruta dinámica. Esta ruta tendrá parámetros que podrá aprovechar más adelante en el .vuearchivo. La estructura de la URL será , y se reemplazará por el código del aeropuerto en el conjunto de datos./airport/:code:code

En Vue Router , es posible que tengas un objeto como este en tu matriz de rutas:

const routes = [  { path: '/airport/:code', component: AirportDetail }]

Pero como se ilustró anteriormente, las rutas en Nuxt se generan a través del pagesdirectorio. Para crear una ruta dinámica, el .vuearchivo debe comenzar con un guión bajo ( _). El nombre del archivo que sigue al guión bajo será el nombre del parámetro. Esto es comparable a :codeen /airports/:code.

En su terminal, cree un nuevo directorio airportllamado pages:

mkdir pages/airport

En el airportdirectorio, crea un archivo con el nombre _code.vueen tu editor de texto y agrega lo siguiente:

aeropuertos-favoritos/paginas/aeropuerto/_code.vue

template  div    h1This is the Airport Detail Page/h1    pThis page contains the specific information about an airport./p  /div/templatescriptexport default {  name: 'AirportDetailPage'}/script

En este archivo, vuelve a agregar un estilo h1a pla página, pero esta vez contiene información de marcador de posición específica de un aeropuerto. Guarde y cierre el archivo.

Abra su navegador http://localhost:3000/airport/cvgy encontrará lo siguiente:

Una vez creada esta página, puede obtener datos en los que la airport.abbreviationpropiedad coincida con el codeparámetro de su pagesdirectorio. En Nuxt, hay dos métodos de ciclo de vida o ganchos adicionales que son relevantes aquí: fetchy asyncData. Puede utilizar el fetchmétodo para realizar llamadas de red antes de que se represente la página. El asyncDatamétodo se utiliza para dar forma a los datos reactivos antes de que se represente la página.

Todos los datos reactivos que se encuentren dentro de asyncDatase fusionarán dataen esa página. Como ejemplo, tomemos el siguiente código:

export default {  data() {    return {      lastName: 'Grohl'    }  },  asyncData() {    const firstName = 'Dave'  }}

Esto sería lo mismo que escribir lo siguiente:

export default {  data() {    return {      firstName: 'Dave',      lastName: 'Grohl'    }  },}

La única diferencia es que asyncDatase procesa en el servidor, mientras que datase procesa en el cliente.

Para probarlo asyncData, cree un filterbucle que devuelva un objeto del airports.jsconjunto de datos:

aeropuertos-favoritos/paginas/aeropuerto/_code.vue

...scriptimport airports from '~/data/airports.js'export default {  name: 'AirportDetailPage',  asyncData ({ route }) {    const airport = airports.filter(airport = airport.abbreviation === route.params.code.toUpperCase())[0]    return {      airport    }  }}/script

En este código, estás importando los airports.jsdatos a la página y luego filtrando todos los objetos excepto donde coinciden con abbreviationy route.params.code. Dado que esto se hace en el asyncDatagancho, airportahora es una propiedad de datos que puedes usar en tu template.

Para utilizar los datos, agregue la siguiente línea resaltada a la templatesección del mismo archivo:

aeropuertos-favoritos/paginas/aeropuerto/_code.vue

template  div    h1This is the Airport Detail Page/h1    pThis page contains the specific information about the strong{{ airport.abbreviation }}/strong airport./p  /div/template...

Guarde este archivo para mostrar la abreviatura del aeropuerto de forma dinámica. Si abre la ventana de su navegador para http://localhost:3000/airport/cvgver el código del aeropuerto en la plantilla, intente visitar una ruta de aeropuerto con un código diferente como /airport/seapara ver los datos actualizados.

Ahora que ha creado rutas estáticas y dinámicas en Nuxt, puede pasar a mostrar más propiedades de datos para estos airports.jsobjetos. En la siguiente sección, los creará layoutsen Nuxt y los asignará a una página. Una vez hecho esto, aprovechará lo que ha hecho en este paso para agregar más datos útiles al diseño.

Paso 3: creación de diseños Nuxt

En Nuxt, puedes crear diseños para tus páginas para que tu aplicación sea más modular. Este es un proceso similar a la creación de componentes de diseño en una aplicación tradicional de Vue.js , excepto que en Nuxt, asignas un diseño a través de la layoutpropiedad en el nivel de página. En este paso, crearás un diseño para reutilizar en cada una de tus páginas de detalles de aeropuertos generadas dinámicamente.

Para crear un diseño, primero crea un layoutsdirectorio en tu proyecto:

mkdir layouts

Cree y abra un archivo con el nombre AirportDetail.vueen este directorio. En este diseño, agregará automáticamente una barra lateral con información sobre el aeropuerto. Para ello, agregue el siguiente código al archivo:

aeropuertos-favoritos/diseños/AirportDetail.vue

template  div    Nuxt /  /div/templatescriptimport airports from '~/data/airports.js'export default {  computed: {    airport() {      return airports.filter(airport = airport.abbreviation === this.$route.params.code.toUpperCase())[0]    }  }}/script

En este código, estás importando el airports.jsarchivo al diseño y agregando una computedpropiedad para obtener el objeto del aeropuerto a través del codeparámetro en el enrutador. El Nuxt /elemento en la plantilla es donde se inyecta el contenido de la página. Esto actúa de manera similar a una ranura de Vue.

A continuación, aprovechará algunas clases de Tailwind . Agregue lo siguiente para configurar el diseño y el estilo:

aeropuertos-favoritos/diseños/AirportDetail.vue

template  div class="container mx-auto grid grid-cols-9 mt-5 gap-5"    aside      !-- sidebar --    /aside    main      !-- main content --      Nuxt /    /main  /div/template...

En este fragmento, estás envolviendo todo en un containerarchivo que también tiene 3 columnas de ancho grid. El asideelemento es la barra lateral y el mainelemento es tu contenido principal.

Con esta cuadrícula creada, agregue la barra lateral con algunas clases de Tailwind:

aeropuertos-favoritos/diseños/AirportDetail.vue

template  div    aside      !-- sidebar --      div              /div    /aside    main      !-- main content --      Nuxt /    /main  /div/template...

Esto agregará algunos estilos, incluidos box-shadow, border, border-radius, paddingymargin-top . Dentro de esta barra lateral, complete la siguiente información:

aeropuertos-favoritos/diseños/AirportDetail.vue

template  div    aside      !-- sidebar --      div        p{{ airport.abbreviation }}/p        pAn airport located in {{ airport.city }}, {{ airport.state }}/p      /div    /aside    main      !-- main content --      Nuxt /    /main  /div/template...

Este código agrega algunos detalles específicos del aeropuerto a la página y centra el texto.

Antes de continuar, agrega un h1con el airport.namecomo valor. Este estará sobre el Nuxt /elemento, ya que se mostrará en todas las páginas con este diseño:

aeropuertos-favoritos/diseños/AirportDetail.vue

template  div    aside.../aside    main      !-- main content --      h1{{ airport.name }}/h1      Nuxt /    /main  div/template...

Ahora tienes un diseño completo para tus AirportDetailpáginas. Guarda y cierra el archivo de diseño.

Para utilizar este diseño, deberá asignar la layout: AirportDetailpropiedad a la página en la que desea utilizarla. Abra pages/airport/_code.vueel editor de texto y agregue las siguientes líneas resaltadas:

aeropuertos-favoritos/paginas/aeropuerto/_code.vue

...scriptimport airports from '~/data/airports.js'export default {  name: 'AirportDetailPage',  asyncData ({ route }) {    const airport = airports.filter(airport = airport.abbreviation === route.params.code.toUpperCase())[0]    return {      airport    }  },  layout: 'AirportDetail'}/script

Una vez que hayas terminado, guarda este archivo y abre tu navegador en http://localhost:3000/airport/cvg. Ahora encontrarás lo siguiente:

Nota: La recarga en caliente no siempre implementa este cambio automáticamente. Si el diseño no se muestra en su navegador, detenga el servidor de desarrollo con CTRL+ Cy luego vuelva a ejecutarlo npm run devpara reiniciarlo.

Una vez completado esto, la barra lateral aparecerá automáticamente con información cuando visites una ruta con un código de aeropuerto adecuado.

En este paso, creaste un diseño y lo asignaste a una página, lo que te permite mantener tu aplicación DRY . A continuación, usarás el contextobjeto para proporcionar propiedades específicas de la página.

Paso 4: Uso del servidor contextcon propiedades específicas de la página

Dado que las aplicaciones Nuxt se procesan en el servidor, habrá ocasiones en las que no resulte obvio cómo acceder a los archivos route, params, e incluso a los archivos Vuexstore de una página . Dado que no tiene acceso a toda la instancia de Vue a través thisdel lado del servidor, Nuxt proporciona un contextobjeto que puede usar para estas diversas propiedades en los ganchos fetchy asyncData. En este paso, usará contextpara agregar una descripción de página dinámica a sus páginas de aeropuerto.

En una sección anterior de este tutorial, ya usaste el contextobjeto en el _code.vuearchivo:

aeropuertos-favoritos/paginas/aeropuerto/_code.vue

script  export default {    asyncData ({ route }) {      const airport = airports.filter(airport = airport.abbreviation === route.params.code.toUpperCase())[0]      return {        airport      }    },    layout: 'AirportDetail'  }/script

Aquí deconstruiste la routepropiedad del contextobjeto porque era la única propiedad que necesitabas. Pero también podrías darle un nombre estándar, como contexto ctx:

aeropuertos-favoritos/paginas/aeropuerto/_code.vue

script  export default {    asyncData (context) {      const airport = airports.filter(airport = airport.abbreviation === context.route.params.code.toUpperCase())[0]      return {        airport      }    },    layout: 'AirportDetail'  }/script

Además del contextobjeto, el fetchmétodo y el asyncDatamétodo, las páginas también tienen propiedades adicionales a las que solo se puede acceder en el nivel de página, en particular la headpropiedad . Con esta propiedad, puede inyectar metainformación en headel DOM (modelo de objetos del documento) cuando se renderiza la página. La información de esta propiedad será legible por el servidor web.

Para configurar el descriptionde su página, abra el _code.vuearchivo en su editor de texto:

aeropuertos-favoritos/paginas/aeropuerto/_code.vue

script  export default {    ...,    head() {      return {        title: 'Airport Information | Aiport App',        meta: [          {            hid: 'description',            name: 'description',            content: 'Detailed information about the specific airport.'          }        ]      }    }  }/script

En este código, headhay una función que devuelve un objeto. titleA este objeto se le agregó una propiedad y una metapropiedad con una matriz de objetos que definen la descriptionpropiedad. Esto equivale a escribir lo siguiente en una .htmlpágina estática:

head  titleAirport Information | Aiport App/title  meta hid="description" name="description" content="Detailed information about the specific airport."/head

Guarde el _code.vuearchivo y ábralo en su navegador. El DOM generado tendrá ahora la información que agregó:

También puedes hacer que el titley descriptionsea dinámico mediante la interpolación de cadenas para inyectar la información actual del aeropuerto en el headelemento:

script  export default {    head () {    return {      title: `${this.airport.name} Information | Aiport App`,        meta: [          {            hid: 'description',            name: 'description',            content: `Detailed information about the ${this.airport.name} (${this.airport.abbreviation}) airport.`          }        ]      }    }  }/script

Ahora, cuando guarde y actualice la ventana de su navegador, encontrará información específica del aeropuerto inyectada en el archivo head, que será útil para la optimización del motor de búsqueda (SEO) de su aplicación.

Conclusión

Como se demuestra en este tutorial, Nuxt le proporciona las herramientas para representar dinámicamente una página en el lado del servidor, configurar su SEO con la headpropiedad y modularizar su código con la layoutpropiedad. También le permite definir qué datos se representan en el servidor con asyncDatay fetch, o en el cliente con data.

Para obtener más información sobre la funcionalidad de Nuxt, visite la documentación oficial de Nuxt . Para obtener más tutoriales sobre Vue, consulte la página de la serie Cómo desarrollar sitios web con Vue.js.