1. Introducción al marco NUXT.JS

El PDF de este documento está disponible |AQUÍ|.

Los ejemplos de este documento están disponibles |AQUÍ|.

Este documento forma parte de una serie de cuatro artículos:

|Introducción al lenguaje PHP7 a través de ejemplos (2019)|;

|Introducción al lenguaje ECMAScript 6 a través de ejemplos (2019)|;
|Introducción al marco VUE.JS a través de ejemplos (2019)|;
|Introducción al marco NUXT.JS a través de ejemplos (2019)|. Este es el documento que estamos viendo;

Todos ellos son documentos para principiantes. Los artículos siguen una secuencia lógica, pero están poco interrelacionados:

el documento [1] presenta el lenguaje PHP 7. El lector que solo esté interesado en el lenguaje PHP y no en el lenguaje JavaScript de los artículos siguientes se detendrá aquí;
los documentos [2-4] tienen como objetivo crear un cliente de JavaScript para el servidor de cálculo de impuestos desarrollado en el documento [1];
los marcos de trabajo de JavaScript [vue.js] y [nuxt.js] de los artículos 3 y 4 requieren conocer el JavaScript de las últimas versiones de ECMASCRIPT, es decir, las de la versión 6. Por lo tanto, el documento [2] está destinado a quienes no conocen esta versión de JavaScript. Hace referencia al servidor de cálculo de impuestos creado en el documento [1]. El lector de [2] necesitará, en ocasiones, consultar el documento [1];
una vez dominado el documento ECMASCRIPT, se puede abordar el marco de trabajo VUE.JS, que permite crear clientes de JavaScript que se ejecutan en un navegador en modo SPA (aplicación de página única). Se trata del documento [3]. Hace referencia tanto al servidor de cálculo de impuestos creado en el documento [1] como al código del cliente JavaScript autónomo creado en [2]. El lector de [3] necesitará, en ocasiones, consultar los documentos [1] y [2];
una vez dominado VUE.JS, se puede abordar el marco NUXT.JS, que permite crear clientes de JavaScript que se ejecutan en un navegador en modo SSR (renderizado del lado del servidor). Hace referencia tanto al servidor de cálculo de impuestos creado en el documento [1], al código del cliente JavaScript autónomo creado en [2], así como a la aplicación [vue.js] desarrollada en el documento [3]. El lector de [4] necesitará, en ocasiones, consultar los documentos [1], [2] y [3];

Este documento continúa el trabajo realizado en el documento [3] con el marco VUE.JS.

Esta sección se centra en la siguiente arquitectura:

En [1], un navegador web muestra páginas web [5, 7] procedentes de un servidor [3] y destinadas a un usuario. Estas páginas contienen código JavaScript que implementa un cliente de un servicio web de datos [2], así como un cliente de un servidor de fragmentos de páginas web [3];
En [2], el servidor web es un servidor de datos. Puede estar escrito en cualquier lenguaje. No genera páginas web en el sentido clásico (HTML, CSS, JavaScript), salvo quizá la primera vez. Pero esta primera página se puede obtener de un servidor web clásico [3] (no un servidor de datos). El JavaScript de la página inicial generará entonces las diferentes páginas web de la aplicación obteniendo los datos [4] que se van a mostrar, del servidor web que actúa como un servidor de datos [2]. También puede obtener fragmentos de página web [5] para presentar dichos datos a través del servidor de páginas web [3];
en [4], el usuario inicia una acción;
en [6,7]: recibe datos maquetados mediante un fragmento de página web;

El marco [nuxt.js] |https://fr.nuxtjs.org/| nos permitirá implementar el siguiente funcionamiento:

la primera página de la aplicación es servida por el servidor [node.js] [3]. Además, el resto de páginas de la aplicación también se encuentran en este mismo servidor. Se sirven cuando el usuario escribe manualmente su URL en el navegador. Estas páginas incorporan una aplicación [vue.js] (aproximadamente);
una vez cargada la primera página en el navegador, la aplicación se comporta como una aplicación [vue.js] clásica. En nuestro esquema anterior, se comunicará entonces con el servidor de datos [2];

En definitiva, la aplicación se comporta como una aplicación [vue.js], salvo en la primera página y cuando el usuario escribe URL manualmente. En estos casos, la página se busca en el servidor [3]. Cuando un motor de búsqueda solicita las diferentes páginas de la aplicación, recibe las páginas del servidor [3]. Estas pueden haberse optimizado para el SEO (Search Engine Optimization). En una aplicación [vue.js], el motor de búsqueda recibe una página con poca relevancia, SEO. Por ejemplo, en la aplicación del cliente del servidor de cálculo de impuestos del documento [3], la página que recibía el navegador al iniciar la aplicación era la siguiente:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--se insertarán automáticamente -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Esta es la única página que carga el navegador. Todas las demás páginas de la aplicación se generan dinámicamente mediante JavaScript sin la intervención del navegador. Algunos motores de búsqueda se conforman con esta página. Otros van más allá y ejecutan el código JavaScript contenido en la página (línea 9 anterior). De este modo se obtiene otra página. Esta puede contener una operación asíncrona para recuperar los datos que la página va a mostrar. En este caso, los motores de búsqueda no esperan. Así pues, nos encontramos con una página incompleta. Quizá recordemos que este es el caso de nuestro cliente [vue.js] del servidor de cálculo de impuestos: de forma asíncrona, durante la carga de la primera página, inicializa una sesión jSON con el servidor de cálculo de impuestos. En este caso concreto, esto no afecta a la página recuperada por el motor de búsqueda. Para otras aplicaciones, esto podría resultar perjudicial en términos de SEO.

Con [nuxt.js] se puede ofrecer al motor de búsqueda una página más relevante para cada una de las páginas de la aplicación.

Los scripts de este documento están comentados y se reproduce su ejecución en la consola. En ocasiones se proporcionan explicaciones adicionales. El documento requiere una lectura activa: para comprender un script, hay que leer tanto su código como sus comentarios y los resultados de su ejecución.

Los ejemplos del documento están disponibles |aquí|.

La aplicación de servidor PHP 7 se puede probar |aquí|.

Serge Tahé, diciembre de 2019