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:

|IIntroducción al lenguaje PHP7 con ejemplos (2019)|;

|Introducción al lenguaje ECMASCRIPT6 con ejemplos (2019)|;
|Introducción al marco VUE.JS con ejemplos (2019)|;
|Introducción al marco de trabajo NUXT.JS con ejemplos (2019)|. Este es el documento actual;

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

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á dirigido 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 que se domine 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]. Este hace referencia tanto al servidor de cálculo de impuestos creado en el documento [1] como al código del cliente JavaScript independiente creado en [2]. El lector de [3] necesitará, en ocasiones, consultar los documentos [1] y [2];
una vez que se domine 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 de JavaScript independiente 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] dirigidas a un usuario. Estas páginas contienen 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 tal vez la primera vez. Pero esta primera página se puede obtener de un servidor web convencional [3] (no un servidor de datos). El JavaScript de la página inicial generará entonces las diferentes páginas web de la aplicación al obtener los datos [4] que se deben 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 esos datos del servidor de páginas web [3];
en [4], el usuario inicia una acción;
en [6,7]: recibe datos presentados en 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, las demás páginas de la aplicación también se encuentran en este mismo servidor. Se entregan cuando el usuario escribe manualmente su URL en el navegador. Estas páginas incorporan una aplicación [vue.js] (aproximadamente);
una vez que se carga la primera página en el navegador, la aplicación se comporta como una aplicación [vue.js] convencional. En nuestro esquema anterior, se comunicará entonces con el servidor de datos [2];

Al final, la aplicación se comporta como una aplicación [vue.js], excepto en la primera página y cuando el usuario escribe URL manualmente. En esos 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 haber sido optimizadas para el SEO (optimización para motores de búsqueda). 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 son generadas dinámicamente por 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 arriba). De este modo se obtiene otra página. Esta puede contener una operación asíncrona para recuperar los datos que la página mostrará. En este caso, los motores de búsqueda no esperan. Por lo tanto, nos encontramos con una página incompleta. Quizás recordemos que este es el caso de nuestro cliente [vue.js] del servidor de cálculo de impuestos: de manera asincrónica, durante la carga de la primera página, inicia una sesión jSON con el servidor de cálculo de impuestos. En este caso específico, esto no afecta la página que recupera el motor de búsqueda. Para otras aplicaciones, esto podría ser perjudicial en términos de SEO.

Con [nuxt.js] se le puede presentar 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, es necesario leer tanto su código como sus comentarios y los resultados de su ejecución.

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

Serge Tahé, diciembre de 2019