7. Ejemplo [nuxt-04]: mantenimiento de una sesión cliente/servidor

El proyecto [nuxt-04] aborda el problema del mantenimiento de una sesión cliente/servidor. Retomamos el proyecto [nuxt-03] con las siguientes modificaciones:

• la página [index] tendrá un botón que permitirá incrementar el contador del almacén [Vuex];
• la página [page1] permanece sin cambios;
• se desea que, cuando se solicite una página manualmente al servidor, este devuelva la página solicitada con un almacén [Vuex] cuyo valor de contador sea el último valor que tenía en el lado del cliente;

El proyecto [nuxt-04] se crea inicialmente a partir de una copia del proyecto [nuxt-03]:

Solo cambia la página [index]:

<!-- página [index] -->
<template>
  <Layout :left="true" :right="true">
    <!-- navegación -->
    <Navigation slot="left" />
    <!-- mensaje-->
    <template slot="right">
      <b-alert show variant="warning"> Home - value= {{ value }} </b-alert>
      <!-- botón -->
      <b-button @click="incrementCounter" class="ml-3" variant="primary">Incrémenter</b-button>
    </template>
  </Layout>
</template>

<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */

import Layout from '@/components/layout'
import Navigation from '@/components/navigation'
export default {
  name: 'Home',
  // componentes utilizados
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      value: 0
    }
  },
  // ciclo de vida
  beforeCreate() {
    // cliente y servidor
    console.log('[home beforeCreate]')
  },
  created() {
    // cliente y servidor
    this.value = this.$store.state.counter
    console.log('[home created], value=', this.value)
  },
  beforeMount() {
    // solo cliente
    console.log('[home beforeMount]')
  },
  mounted() {
    // solo cliente
    console.log('[home mounted]')
  },
  // gestión de eventos
  methods: {
    incrementCounter() {
      console.log('incrementCounter')
      // incremento del contador en 1
      this.$store.commit('increment', 1)
      // cambio del valor mostrado
      this.value = this.$store.state.counter
    }
  }
}
</script>

• línea 10: se ha añadido un botón para incrementar el contador de la tienda [Vuex];
• línea 54: el método que gestiona el [clic] en el botón [Incrémenter];
• línea 57: el contador de la persiana se incrementa en 1;
• línea 59: el valor del contador se asigna a la propiedad [value] para que se muestre en la línea 8;

Se ejecuta el proyecto [nuxt-04] con el siguiente archivo [nuxt.config.js]:

// directorio del código fuente
  srcDir: 'nuxt-04',
  // enrutador
  router: {
    // raíz de los URL de la aplicación
    base: '/nuxt-04/'
  },
  // servidor
  server: {
    // puerto de servicio, 3000 por defecto
    port: 81,
    // direcciones de red a las que se escucha, por defecto localhost: 127.0.0.1
    // 0.0.0.0 = todas las direcciones de red del equipo
    host: 'localhost'
}

Al ejecutarlo, la primera página que se muestra es la siguiente:

Al pulsar varias veces el botón [3], aparece la siguiente página nueva:

Si se utiliza el enlace [3], aparece la siguiente página:

• En [2], la página [page1] [1] muestra correctamente el valor del contador;

Ahora, actualicemos la página con [3]. La nueva página es la siguiente:

• En [2], se ha perdido el valor actual del contador. Se ha vuelto a su valor inicial;

Este resultado es totalmente comprensible si consultamos los registros:

• en [1], el servidor ha vuelto a ejecutar la función [nuxtServerInit]. Ahora bien, esta es la siguiente:

/* eslint-disable no-console */
export const state = () => ({
   // contador
  counter: 0
})

export const mutations = {
   // incremento del contador en un valor [inc]
  increment(state, inc) {
    state.counter += inc
  }
}

export const actions = {
  async nuxtServerInit(store, context) {
     // ¿Quién ejecuta este código?
    console.log('nuxtServerInit, client=', process.client, 'serveur=', process.server)
     // se espera a que finalice una promesa
    await new Promise(function(resolve, reject) {
       // Normalmente, aquí hay una función asíncrona
       // la simulamos con una espera de un segundo
      setTimeout(() => {
         // Éxito
        resolve()
      }, 1000)
    })
     // Se modifica el almacén
    store.commit('increment', 53)
     // registro
    console.log('nuxtServerInit commit terminé')
  }
}

La línea 28 asigna el valor 53 al contador.

Analicemos la solicitud HTTP realizada por el navegador al actualizar la página [page1]:

Se observa que, además de las páginas [page1] y [1], el cliente solicita una serie de scripts al servidor. Cabe destacar los scripts [pages_index, pages_page1], que son los asociados a las páginas [index, page]. Estos scripts se envían al servidor en cada solicitud, independientemente de la página solicitada;

En [1], se solicita al servidor la página [page1] con la siguiente solicitud HTTP:

GET http://localhost:81/nuxt-04/page1
Host: localhost:81
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0,8
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Pragma: no-cache
Cache-Control: no-cache

Se observa que esta solicitud no transmite ninguna información al servidor. Por lo tanto, este no tiene forma alguna de conocer el estado de la tienda [Vuex] por parte del cliente. Para ello, habría sido necesario que el cliente le enviara dicha información.

En el siguiente proyecto, [nuxt-05], utilizamos una cookie para que el cliente pueda enviar información al servidor cuando este recibe una solicitud.