1. Inleiding tot het framework NUXT.JS

De PDF van dit document is beschikbaar |HIER|.

De voorbeelden in dit document zijn beschikbaar |HIER|.

Dit document maakt deel uit van een reeks van vier artikelen:

|Inleiding tot de taal PHP7 aan de hand van voorbeelden| ;

|Inleiding tot de taal ECMASCRIPT 6 aan de hand van voorbeelden| ;
|Inleiding tot het VUE.JS-framework aan de hand van voorbeelden| ;
|Inleiding tot het NUXT.JS-framework aan de hand van voorbeelden|. Dit is het huidige document;

Dit zijn allemaal documenten voor beginners. De artikelen volgen elkaar logisch op, maar zijn los van elkaar te lezen:

het document [1] introduceert de taal PHP 7. De lezer die alleen geïnteresseerd is in de taal PHP en niet in de JavaScript-taal uit de volgende artikelen, kan hier stoppen;
de documenten [2-4] zijn bedoeld om een JavaScript-client te bouwen voor de belastingberekeningsserver die in document [1] is ontwikkeld;
voor de JavaScript-frameworks [vue.js] en [nuxt.js] uit de artikelen 3 en 4 is kennis van de JavaScript-taal uit de laatste versies van ECMASCRIPT vereist, namelijk die van versie 6. Het document [2] is daarom bedoeld voor degenen die deze versie van JavaScript niet kennen. Het verwijst naar de belastingberekeningsserver die in het document [1] is gebouwd. De lezer van [2] zal dan af en toe moeten teruggrijpen op het document [1];
zodra men ECMASCRIPT onder de knie heeft, kan men het framework VUE.JS gaan verkennen, waarmee JavaScript-clients kunnen worden gebouwd die in een browser in de modus SPA (Single Page Application) worden uitgevoerd. Dit is het document [3]. Het verwijst zowel naar de belastingberekeningsserver die in het document [1] is gebouwd als naar de code van de zelfstandige JavaScript-client die in [2] is gebouwd. Wie [3] doorneemt, zal dan af en toe moeten teruggrijpen op de documenten [1] en [2];
zodra men VUE.JS onder de knie heeft, kan men het framework NUXT.JS gaan gebruiken, waarmee JavaScript-clients kunnen worden gebouwd die in een browser in de modus SSR (Server Side Rendered) worden uitgevoerd. Het verwijst zowel naar de server voor belastingberekening die in het document [1] is gebouwd, de code van de zelfstandige JavaScript-client die is gebouwd in [2], en de applicatie [vue.js] die is ontwikkeld in het document [3]. De lezer van [4] zal dan af en toe moeten teruggrijpen op de documenten [1], [2] en [3];

Dit document bouwt voort op het werk dat is verricht in document [3] met het framework VUE.JS.

In dit hoofdstuk wordt ingegaan op de volgende architectuur:

In [1] geeft een webbrowser [5, 7]-webpagina’s weer die afkomstig zijn van een [3]-server en bestemd zijn voor een gebruiker. Deze pagina’s bevatten JavaScript waarmee een client voor een webdataservice [2] en een client voor een server voor webpaginafragmenten [3] worden geïmplementeerd;
In [2] is de webserver een gegevensserver. Deze kan in elke programmeertaal zijn geschreven. Hij genereert geen webpagina’s in de klassieke zin (HTML, CSS, JavaScript), behalve misschien de eerste keer. Maar die eerste pagina kan worden opgehaald van een klassieke webserver [3] (geen gegevensserver). Het JavaScript van de startpagina genereert vervolgens de verschillende webpagina’s van de applicatie door de weer te geven gegevens [4] op te halen bij de webserver, die fungeert als een gegevensserver [2]. Het kan ook webpaginafragmenten [5] ophalen om deze gegevens te presenteren via de webserver [3];
in [4] initieert de gebruiker een actie;
in [6,7]: hij ontvangt gegevens die zijn verpakt in een webpaginafragment;

Met het framework [nuxt.js] |https://fr.nuxtjs.org/| kunnen we de volgende werking implementeren:

de eerste pagina van de applicatie wordt geleverd door de server [node.js] [3]. Bovendien bevinden de overige pagina’s van de applicatie zich ook op dezelfde server. Deze worden geleverd wanneer de gebruiker de URL handmatig in de browser invoert. Deze pagina’s bevatten een applicatie (ongeveer) [vue.js];
zodra de eerste pagina in de browser is geladen, gedraagt de applicatie zich als een klassieke [vue.js]-applicatie. In ons bovenstaande schema zal deze vervolgens communiceren met de gegevensserver [2];

Uiteindelijk gedraagt de applicatie zich als een [vue.js]-applicatie, behalve voor de eerste pagina en wanneer de gebruiker URL handmatig invoert. In die gevallen wordt de pagina opgehaald van de server [3]. Wanneer een zoekmachine de verschillende pagina’s van de applicatie opvraagt, ontvangt deze de pagina’s van de server [3]. Deze kunnen geoptimaliseerd zijn voor de SEO (Search Engine Optimization). In een applicatie [vue.js] ontvangt de zoekmachine een pagina met weinig betekenis: SEO. Bijvoorbeeld, in de clienttoepassing van de server voor belastingberekening van document [3] was de pagina die de browser ontving bij het opstarten van de toepassing als volgt:


<!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>
    <!-- gebouwde bestanden worden automatisch ingevoegd -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Dit is de enige pagina die door de browser wordt geladen. Alle andere pagina’s van de applicatie worden dynamisch gegenereerd door JavaScript, zonder tussenkomst van de browser. Sommige zoekmachines nemen genoegen met deze pagina. Andere gaan een stap verder door het JavaScript op de pagina uit te voeren (regel 9 hierboven). Er wordt dan een andere pagina verkregen. Deze kan een asynchrone bewerking bevatten om de gegevens op te halen die de pagina gaat weergeven. In dat geval wachten de zoekmachines niet. We krijgen dan een onvolledige pagina te zien. Misschien herinneren we ons nog dat dit het geval is bij onze klant [vue.js] van de belastingberekeningsserver: asynchroon initialiseert hij tijdens het laden van de eerste pagina een sessie jSON met de belastingberekeningsserver. In dit specifieke geval heeft dit geen invloed op de pagina die door de zoekmachine wordt opgehaald. Voor andere toepassingen zou dit nadelig kunnen zijn in termen van SEO.

Met [nuxt.js] kan voor elke pagina van de applicatie een meer relevante pagina aan de zoekmachine worden aangeboden.

De scripts in dit document zijn van commentaar voorzien en de uitvoer in de console wordt weergegeven. Soms worden aanvullende uitleg gegeven. Het document vereist een actieve lezing: om een script te begrijpen, moet men zowel de code, de commentaren als de uitvoerresultaten lezen.

De voorbeelden uit het document zijn |hier| beschikbaar.

De serverapplicatie PHP 7 kan |hier| worden getest.

Serge Tahé, december 2019