Skip to content

10. Voorbeeld [nuxt-07]: de client- en servercontexten

10.1. Présentation

Het voorbeeld [nuxt-07] is bedoeld om het object [context] zowel aan de serverzijde als aan de clientzijde te verkennen. Vergeet niet dat deze twee actoren in de [nuxt]-toepassingen gescheiden zijn: ze delen niets, behalve:

  • wat de server bereid is naar de client te sturen (in het antwoord HTTP en de verzonden pagina);
  • wat de client bereid is naar de server te sturen (in zijn verzoek HTTP);

Als dus, zoals we zullen zien, de objecten die door de server worden beheerd en die welke door de client worden beheerd dezelfde naam dragen, zijn ze niet identiek: ze kunnen soms kopieën van elkaar zijn, maar hebben nooit dezelfde referentie. Het wijzigen van een clientobject heeft geen enkel effect op het object met dezelfde naam aan de serverzijde, en vice versa.

Het voorbeeld [nuxt-07] wordt aanvankelijk verkregen door het voorbeeld [nuxt-01] te kopiëren:

Image

  • in [2] voegen we een plug-in toe die zowel op de client als op de server wordt gebruikt;
  • in [3] gaan we de pagina [index] enigszins aanpassen;

10.2. De plug-in [common / main.js]

De plug-in [common / main.js] wordt zowel door de client als door de server uitgevoerd: dit komt door de volgende configuratie [nuxt.config.js]:


/*
   ** Plugins to load before mounting the App
   */
plugins: [{ src: '~/plugins/common/main.js' }],
  • regel 4: doordat de eigenschap [mode] ontbreekt, wordt de plug-in [~/plugins/common/main.js] zowel door de client als door de server uitgevoerd: eerst door de server, daarna door de client;

Deze plug-in is de volgende:


/* eslint-disable no-undef */
/* eslint-disable no-console */
export default function(...args) {
  // wie voert deze code uit?
  console.log('[main server], process.server=', process.server, 'process.client=', process.client)
  const who = process.server ? 'server' : 'client'
  const main = '[main ' + who + ']'
  // aantal argumenten
  console.log(main + ', il y a', args.length, 'arguments')

  // eerste argument
  const context = args[0]
  // context-sleutels
  dumpkeys(main + ', context', context)
  // de applicatie
  dumpkeys(main + ', context.app', context.app)
  // de route
  dumpkeys(main + ', context.route', context.route)
  console.log(main + ', context.route=', context.route)
  // de router
  dumpkeys(main + ', context.app.router', context.app.router)
  // de router.options.routes
  dumpkeys(main + ', context.app.router.options.routes', context.app.router.options.routes)
  console.log(main + ', context.app.router.options.routes=', context.app.router.options.routes)

  // tweede argument
  const inject = args[1]
  console.log('inject=', typeof inject)
}

function dumpkeys(message, object) {
  // lijst met sleutels van [object]
  const ligne = 'Liste des clés [' + message + ']'
  console.log(ligne)
  // lijst met sleutels
  if (object) {
    console.log(Object.keys(object))
  }
}
  • regels 31-39: de functie [dumpkeys] somt de eigenschappen op van het object dat als tweede parameter wordt doorgegeven. Deze lijst wordt voorafgegaan door het bericht dat als eerste parameter wordt doorgegeven;
  • regel 3: we willen weten hoeveel argumenten de functie ontvangt. Hiervoor gebruiken we de notatie [...args], waardoor de daadwerkelijke parameters van de functie in de array [args] worden geplaatst. We zullen ontdekken dat er twee argumenten zijn;
  • regel 5: we geven weer wie de code uitvoert, de server of de client;
  • regel 6: de uitvoerder van de code, client of server;
  • regel 7: een constante tekenreeks die in de logbestanden wordt gebruikt;
  • regel 12: we zullen zien dat het eerste argument dat de plug-in ontvangt de context van de uitvoerder is;
  • regel 14: lijst met sleutels van het object [context];
  • regel 16: we zullen ontdekken dat het object [context] een eigenschap [app] heeft die de applicatie [nuxt] vertegenwoordigt;
  • regel 18: we zullen ontdekken dat het object [context] een eigenschap [route] heeft die het huidige pad van de router vertegenwoordigt;
  • regel 21: we zullen zien dat het object [app] een eigenschap [router] heeft die de router vertegenwoordigt;
  • regel 23: het object [router.options.routes] vertegenwoordigt de verschillende routes van de applicatie;
  • regels 27-28: het tweede argument van de plug-in is de functie [inject] die we in het voorbeeld [nuxt-06] hebben gebruikt;

10.3. De door de server uitgevoerde plug-in

Bij uitvoering geeft de server het volgende weer:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[main server], process.server= true process.client= false
[main server], il y a 2 arguments
Liste des clés [[main server], context]
[
  'isStatic',
  'isDev',
  'isHMR',
  'app',
  'payload',
  'error',
  'base',
  'env',
  'req',
  'res',
  'ssrContext',
  'redirect',
  'beforeNuxtRender',
  'route',
  'next',
  '_redirected',
  '_errored',
  'params',
  'query',
   '$axios'
]
  • regels 11-12: we hebben al eerder gebruikgemaakt van de eigenschappen [base] en [env], waarvan de waarden afkomstig zijn uit het bestand [nuxt.config.js];
  • regel 8: de eigenschap [app] verwijst naar de toepassing [nuxt];
  • regel 18: de eigenschap [route] verwijst naar de huidige route van de router, d.w.z. de pagina die de server gaat verzenden;
  • regel 13: het verzoek HTTP van de clientbrowser;
  • regel 14: het antwoord HTTP van de server;

De lijst met eigenschappen van [context.app] is als volgt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
Liste des clés [[main server], context.app]
[
  'router',
  'nuxt',
  'head',
  'render',
  'data',
  'beforeCreate',
  'created',
  'mounted',
  'watch',
  'computed',
  'methods',
  'components',
  'context',
   '$axios'
]
  • regel 3: de eigenschap [router] geeft ons toegang tot de router van de applicatie. Dit is belangrijk onder [nuxt], aangezien de router wordt gedefinieerd door [nuxt] zelf en niet door de ontwikkelaar. Deze eigenschap biedt de ontwikkelaar de mogelijkheid om de router aan te passen;

De lijst met eigenschappen van [context.route] is als volgt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
Liste des clés [[main server], context.route]
[
  'name',
  'meta',
  'path',
  'hash',
  'query',
  'params',
  'fullPath',
   'matched'
]

De route [context.route] bij het opstarten van de server is als volgt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[main server], context.route= {
  name: 'index',
  meta: [
    {}
  ],
  path: '/',
  hash: '',
  query: {},
  params: {},
  fullPath: '/',
  matched: [
    {
      path: '',
      regex: /^(?:\/(?=$))?$/i,
      components: [Object],
      instances: {},
      name: 'index',
      parent: undefined,
      matchAs: undefined,
      redirect: undefined,
      beforeEnter: undefined,
      meta: {},
      props: {}
    }
  ]
}
  • regel 2: we zien dat de volgende pagina van de server [index] is en dat het pad ervan [/] is (regel 10);
  • regel 22: met de eigenschap [meta] kunnen eigenschappen aan routes worden toegevoegd;

De eigenschappen van de router [context.app.router] van de server zijn als volgt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
Liste des clés [[main server], context.app.router]
[
  'app',
  'apps',
  'options',
  'beforeHooks',
  'resolveHooks',
  'afterHooks',
  'matcher',
  'fallback',
  'mode',
   'geschiedenis'
]

In de eigenschap [context.app.router.options.routes] zijn de verschillende routes van de applicatie te vinden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Liste des clés [[main server], context.app.router.options.routes]
[
  '0',
  '1',
  '2'
]
[main server], context.app.router.options.routes= [
  {
    path: '/page1',
    component: [Function: _d7b6c762],
    name: 'page1'
  },
  {
    path: '/page2',
    component: [Function: _d79a9860],
    name: 'page2'
  },
  {
    path: '/',
    component: [Function: _31eaad9f],
    name: 'index'
  }
]

Tot slot het tweede argument:

inject= function

10.4. De pagina [index] op de server

De pagina [index] ziet er als volgt uit:


<!-- hoofdpagina -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigatie -->
    <Navigation slot="left" />
    <!-- bericht-->
    <b-alert slot="right" show variant="warning">
      Home
    </b-alert>
  </Layout>
</template>

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

import Navigation from '@/components/navigation'
import Layout from '@/components/layout'

export default {
  name: 'Home',
  // gebruikte componenten
  components: {
    Layout,
    Navigation
  },
  data() {
    return {
      who: process.server ? 'server' : 'client'
    }
  },

  // levenscyclus
  beforeCreate() {
    // client en server
    console.log('[home beforeCreate]')
  },
  created() {
    // client en server
    console.log('[home ' + this.who + ' created]')
    this.dumpkeys('[home ' + this.who + ' created], this.$nuxt', this.$nuxt)
    this.dumpkeys('[home ' + this.who + ' created], this.$nuxt.context', this.$nuxt.context)
  },
  beforeMount() {
    // alleen client
    console.log('[home ' + this.who + ' beforeMount]')
  },
  mounted() {
    // alleen client
    console.log('[home ' + this.who + ' mounted]')
  },
  methods: {
    dumpkeys(message, object) {
      // lijst met sleutels van [object]
      const ligne = 'Liste des clés [' + message + ']'
      console.log(ligne)
      if (object) {
        console.log(Object.keys(object))
      }
    }
  }
}
</script>
  • regel 43: we hebben al gezien dat de context van een pagina te vinden is in [this.$nuxt.context];
  • regel 42: ook de eigenschappen van het object [this.$nuxt] worden weergegeven;

Deze pagina wordt door de server uitgevoerd en genereert de volgende logbestanden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
[home beforeCreate]
[home server created]
Liste des clés [[home server created], this.$nuxt]
[
  '_uid',
  '_isVue',
   '$options',
  '_renderProxy',
  '_self',
   '$parent',
   '$root',
   '$children',
   '$refs',
  '_watcher',
  '_inactive',
  '_directInactive',
  '_isMounted',
  '_isDestroyed',
  '_isBeingDestroyed',
  '_events',
  '_hasHookEvent',
  '_vnode',
  '_staticTrees',
   '$vnode',
   '$slots',
   '$scopedSlots',
  '_c',
   '$createElement',
   '$attrs',
   '$listeners',
  '_routerRoot',
  '_router',
  '_route',
  '_bv__modal',
  '_bv__toast',
  '_vueMeta',
  'nuxt',
  '_watchers',
  'refreshOnlineStatus',
  'refresh',
  'errorChanged',
  'setLayout',
  'loadLayout',
  '_data',
  'layoutName',
  'layout',
  'isOnline',
  '_computedWatchers',
  'isOffline',
  'error',
   'context'
]

De eigenschappen van de servercontext in de pagina [index] zijn als volgt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Liste des clés [[home server created], this.$nuxt.context]
[
  'isStatic',
  'isDev',
  'isHMR',
  'app',
  'payload',
  'error',
  'base',
  'env',
  'req',
  'res',
  'ssrContext',
  'redirect',
  'beforeNuxtRender',
  'route',
  'next',
  '_redirected',
  '_errored',
  'params',
  'query',
   '$axios'
]

Dit zijn dezelfde eigenschappen als in het object [context] van de plug-in.

10.5. De door de client uitgevoerde plug-in

Zodra de server de pagina [index] naar de browser van de klant heeft verzonden, nemen de clientscripts het over. De plug-in [main.js] wordt dan uitgevoerd. Dit zijn de logbestanden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
[main server], process.server= false process.client= true
[main client], il y a 2 arguments
Liste des clés [[main client], context]
Array(17)0: "isStatic"1: "isDev"2: "isHMR"3: "app"4: "payload"5: "error"6: "base"7: "env"8: "redirect"9: "nuxtState"10: "route"11: "next"12: "_redirected"13: "_errored"14: "params"15: "query"16: "$axios"length: 17__proto__: Array(0)
Liste des clés [[main client], context.app]
Array(14)0: "router"1: "nuxt"2: "head"3: "render"4: "data"5: "beforeCreate"6: "created"7: "mounted"8: "watch"9: "computed"10: "methods"11: "components"12: "context"13: "$axios"length: 14__proto__: Array(0)
Liste des clés [[main client], context.route]
Array(8)0: "name"1: "meta"2: "path"3: "hash"4: "query"5: "params"6: "fullPath"7: "matched"length: 8__proto__: Array(0)
[main client], context.route= ObjectfullPath: "/"hash: ""matched: [{…}]meta: [{…}]name: "index"params: {}path: "/"query: {}__proto__: Object
Liste des clés [[main client], context.app.router]
Array(10)0: "app"1: "apps"2: "options"3: "beforeHooks"4: "resolveHooks"5: "afterHooks"6: "matcher"7: "fallback"8: "mode"9: "history"length: 10__proto__: Array(0)
Liste des clés [[main client], context.app.router.options.routes]
Array(3)0: "0"1: "1"2: "2"length: 3__proto__: Array(0)
[main client], context.app.router.options.routes= Array(3)0: {path: "/page1", name: "page1", component: ƒ}1: {path: "/page2", name: "page2", component: ƒ}2: {path: "/", name: "index", component: ƒ}length: 3__proto__: Array(0)
inject= function

We zien eigenschappen die vergelijkbaar zijn met die aan de serverzijde, waarbij sommige eigenschappen zijn verdwenen en andere zijn bijgekomen. Zo ontbreken in regel 4 de eigenschappen [req, res], die de verzoeken HTTP van de clientbrowser en het antwoord HTTP van de server waren.

10.6. De pagina [index] van de client

De pagina [index] van de client genereert de volgende logbestanden:

1
2
3
4
5
6
7
8
[home beforeCreate]
[home client created]
Liste des clés [[home client created], this.$nuxt]
(51) ["_uid", "_isVue", "$options", "_renderProxy", "_self", "$parent", "$root", "$children", "$refs", "_watcher", "_inactive", "_directInactive", "_isMounted", "_isDestroyed", "_isBeingDestroyed", "_events", "_hasHookEvent", "_vnode", "_staticTrees", "$vnode", "$slots", "$scopedSlots", "_c", "$createElement", "$attrs", "$listeners", "_routerRoot", "_router", "_route", "_bv__modal", "_bv__toast", "_vueMeta", "nuxt", "_watchers", "refreshOnlineStatus", "refresh", "errorChanged", "setLayout", "loadLayout", "_data", "layoutName", "layout", "isOnline", "_computedWatchers", "isOffline", "error", "context", "_name", "setTransitions", "$loading", "$el"]
Liste des clés [[home client created], this.$nuxt.context]
(17) ["isStatic", "isDev", "isHMR", "app", "payload", "error", "base", "env", "redirect", "nuxtState", "route", "next", "_redirected", "_errored", "params", "query", "$axios"]
[home client beforeMount]
[home client mounted]
  • regel 4: de eigenschappen van het object [this.$nuxt]. Dit is een uitgebreid object met 51 eigenschappen;
  • regel 6: de eigenschappen van het object [this.$nuxt.context]. We zien hier dezelfde eigenschappen als in het object [context] van de client-plugin;
https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld volgens de voorwaarden van de Creative Commons-licentie Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 ongewijzigd.