Routing und Routenschutz in serverseitig gerenderten Vue-Apps mit Nuxt.js

Dieses Tutorial setzt grundlegende Kenntnisse von Vue voraus. Wenn Sie noch nicht damit gearbeitet haben, sollten Sie sich diesen Leitfaden von CSS-Tricks zum Einstieg ansehen.

Sie haben vielleicht bereits Erfahrungen mit dem Rendern einer mit Vue erstellten App auf einem Server gesammelt. Das Konzept und die Implementierungsdetails von Server-Side Rendering (SSR) sind sowohl für Anfänger als auch für erfahrene Entwickler eine Herausforderung. Die Herausforderungen werden noch größer, wenn Sie Aufgaben wie Datenabruf, Routing und den Schutz authentifizierter Routen erledigen müssen. Dieser Artikel führt Sie durch die Bewältigung dieser Herausforderungen mit Nuxt.js.

Was Sie lernen werden

Der Titel hat vielleicht den Umfang dieses Artikels begrenzt, denn Sie werden mehr als nur Routing und Routenschutz lernen. Hier ist eine zusammengefasste Liste dessen, was dieser Artikel behandelt:

• Warum serverseitiges Rendering?
• Serverseitiges Rendering und SEO
• Ein Nuxt.js-Projekt von Grund auf neu einrichten
• Benutzerdefinierte Layouts
• Webpacked und statische globale Assets
• Implizites Routing und automatische Codeaufteilung
• Verschachtelte und parametrisierte Routen
• Routen mit Middleware schützen

Die Codebeispiele finden Sie auf Github.

Warum sollte ich serverseitig rendern?

Wenn Sie bereits wissen, warum Sie serverseitig rendern sollten, und nur etwas über Routing oder Routenschutz lernen möchten, dann können Sie zum Abschnitt Ein Nuxt.js-App von Grund auf neu einrichten springen.

SSR, auch bekannt als Universal Rendering oder Isomorphic Rendering, ist ein Konzept, das kürzlich aus dem JavaScript-Ökosystem hervorgegangen ist, um die Nachteile von JavaScript-Frameworks zu mildern.

Als wir keine JS-Frameworks oder UI-Bibliotheken wie Angular, React und Vue hatten, bestand die Standardmethode zum Erstellen von Websites darin, eine HTML-Zeichenkette (zusammen mit einigen Stilen und JS) als Antwort von einem Server zu senden, die dann vom Browser geparst und gerendert wurde. Das bedeutet, dass Ihre Ansichten serverseitig gerendert wurden. Das meiste, was wir tun konnten, nachdem die Seite gerendert war, war, mit JavaScript oder jQuery mit der Manipulation ihres Inhalts zu beginnen.

Interaktive Benutzeroberflächen waren mit diesen Mustern ein Albtraum zu erstellen. Zusätzlich zu der Arbeit, die Sie mit dem DOM über JS erledigen mussten, mussten Sie immer noch die schmutzige Arbeit des Durchstechens des DOM, des Durchlaufens und des Erzwingens von Inhalten und Funktionen hinein erledigen. Schlimmer noch, dies führte zu viel schlechtem Code und schlecht performanten (langsamen) UIs.

Die JavaScript-Frameworks führten einige Konzepte wie Virtual DOM und deklarative APIs ein, die die Arbeit mit dem DOM schneller und unterhaltsamer machten. Das Problem bei ihnen ist, dass die Ansichten vollständig mit JavaScript gesteuert werden. Man kann sagen, sie sind JavaScript-gerendert. Die Konsequenz ist, dass im Gegensatz zur früheren Ära, in der Ansichten standardmäßig serverseitig gerendert wurden, JavaScript erforderlich ist und Sie warten müssen, bis Ihre Benutzer etwas sehen.

Hier ist, was Sie aus diesem langen Gespräch mitnehmen sollten:

1. Serverseitig gerenderte Apps sind schneller, da sie nicht auf JavaScript angewiesen sind, um den Browser mit Inhalt zu bemalen.
2. JavaScript-gerenderte Apps werden für eine bessere Benutzererfahrung bevorzugt. Dies geschieht jedoch nur, nachdem JavaScript geparst und kompiliert wurde.

Wir möchten die Geschwindigkeit des ersten Renderings einer serverseitig gerenderten App verbessern und eine bessere JavaScript-gerenderte Benutzererfahrung schaffen. Hier kommt das Konzept von SSR für JavaScript-Frameworks ins Spiel.

SEO-Probleme

Ein weiteres großes Problem, das Sie beim Erstellen von Apps mit Vue trifft, ist, wie Sie diese SEO-freundlich gestalten. Derzeit suchen Webcrawler nicht nach Inhalten, die in JavaScript indiziert werden sollen. Sie kennen nur HTML. Dies ist bei serverseitig gerenderten Apps nicht der Fall, da sie bereits die HTML-Antwort liefern, die der Crawler benötigt.

So kann es schiefgehen

Das obige Bild zeigt eine einfache Frontend-App mit etwas Text. Bei aller Einfachheit, inspizieren Sie die Seitenquelle und Sie werden enttäuscht feststellen, dass der Text nicht in der Seitenquelle steht.

Nuxt.js für serverseitig gerenderte Vue-Apps

Sarah Drasner schrieb einen großartigen Beitrag darüber, was Nuxt.js ist und warum Sie es verwenden sollten. Sie stellte auch einige der erstaunlichen Dinge vor, die Sie mit diesem Tool tun können, wie z. B. Seiten-Routing und Seitenübergänge. Nuxt.js ist ein Tool im Vue-Ökosystem, mit dem Sie serverseitig gerenderte Apps von Grund auf erstellen können, ohne sich mit den zugrunde liegenden Komplexitäten des Renderns einer JavaScript-App auf einem Server auseinandersetzen zu müssen.

Nuxt.js ist eine Option zu dem, was Vue bereits bietet. Es baut auf den Vue SSR- und Routing-Bibliotheken auf und stellt eine nahtlose Plattform für Ihre eigenen Apps bereit. Nuxt.js reduziert sich auf eines: die Vereinfachung Ihrer Erfahrung als Entwickler beim Erstellen von SSR-Apps mit Vue.

Wir haben bereits viel geredet (was bekanntlich billig ist); nun wollen wir praktisch werden.

Ein Nuxt.js-App von Grund auf neu einrichten

Sie können mit dem Tool Vue CLI schnell ein neues Projekt erstellen, indem Sie den folgenden Befehl ausführen:

vue init nuxt-community/starter-template <project-name>

Aber das ist nicht der Punkt, und wir wollen praktisch werden. So lernen Sie die zugrunde liegenden Prozesse kennen, die die Engine eines Nuxt-Projekts antreiben.

Beginnen Sie damit, einen leeren Ordner auf Ihrem Computer zu erstellen, öffnen Sie Ihr Terminal, um auf diesen Ordner zu zeigen, und führen Sie den folgenden Befehl aus, um ein neues Node-Projekt zu starten:

npm init -y

# OR

yarn init -y

Dies generiert eine Datei package.json, die wie folgt aussieht:

{
  "name": "nuxt-shop",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Die Eigenschaft name ist identisch mit dem Namen des Ordners, in dem Sie sich befinden.

Installieren Sie die Nuxt.js-Bibliothek über npm

npm install --save nuxt

# OR

yarn add nuxt

Konfigurieren Sie dann ein npm-Skript, um den Nuxt-Build-Prozess in der Datei package.json zu starten:

"scripts": {
  "dev": "nuxt"
}

Sie können dann starten, indem Sie den gerade erstellten Befehl ausführen:

npm run dev

# OR

yarn dev

Es ist in Ordnung, wenn der Build fehlschlägt. Das liegt daran, dass Nuxt.js nach einem Ordner namens pages für Inhalte sucht, die es dem Browser zur Verfügung stellen wird. Zu diesem Zeitpunkt existiert dieser Ordner nicht.

Beenden Sie den Build-Prozess, erstellen Sie dann einen Ordner namens pages im Stammverzeichnis Ihres Projekts und versuchen Sie es erneut. Diesmal sollten Sie einen erfolgreichen Build erhalten.

Die App startet auf Port 3000, aber Sie erhalten eine 404, wenn Sie versuchen, darauf zuzugreifen.

Nuxt.js ordnet Seitenrouten Dateinamen im Ordner pages zu. Das bedeutet, dass, wenn Sie eine Datei namens index.vue und eine weitere namens about.vue im Seitenordner hätten, diese den Routen / bzw. /about zugeordnet würden. Im Moment gibt / eine 404 aus, da index.vue nicht im Ordner pages existiert.

Erstellen Sie die Datei index.vue mit diesem kinderleichten Snippet:

<template>
  <h1>Greetings from Vue + Nuxt</h1>
</template>

Starten Sie nun den Server neu und die 404 sollte durch eine Index-Route ersetzt werden, die die Begrüßungsnachricht anzeigt.

Projektweites Layout und Assets

Bevor wir uns eingehend mit dem Routing beschäftigen, wollen wir kurz besprechen, wie Sie Ihr Projekt so strukturieren können, dass Sie ein wiederverwendbares Layout haben und globale Assets auf allen Seiten teilen. Beginnen wir mit den globalen Assets. Wir benötigen diese beiden Assets in unserem Projekt:

1. Favicon
2. Basisstile

Nuxt.js bietet zwei Stammordneroptionen (abhängig davon, was Sie tun) zur Verwaltung von Assets:

1. assets: Dateien hier werden webpacked (gebündelt und von webpack transformiert). Dateien wie Ihre CSS-, globale JS-, LESS-, SASS-, Bilder sollten hier sein.
2. static: Dateien hier durchlaufen kein webpack. Sie werden unverändert an den Browser geliefert. Das ist sinnvoll für robot.txt, Favicons, Github CNAME-Dateien usw.

In unserem Fall gehört unser Favicon zu static, während der Basisstil zum Ordner assets geht. Erstellen Sie daher die beiden Ordner und fügen Sie base.css unter /assets/css/base.css hinzu. Laden Sie auch diese Favicon-Datei herunter und legen Sie sie in den Ordner static. Wir benötigen normalize.css, können es aber über npm installieren, anstatt es in assets zu legen.

yarn add normalize.css

Teilen Sie Nuxt.js schließlich in einer Konfigurationsdatei alle diese Assets mit. Diese Konfigurationsdatei sollte sich im Stammverzeichnis Ihres Projekts als nuxt.config.js befinden:

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt Shop',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt online shop' }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Raleway'
      },
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css: ['normalize.css', '@/assets/css/base.css']
};

Wir haben gerade unsere Titelvorlage, Seiten-Metadaten, Schriftarten, Favicon und alle unsere Stile definiert. Nuxt.js wird sie automatisch in den Kopfzeilen unserer Seiten einfügen.

Fügen Sie dies in die Datei base.css ein und lassen Sie uns sehen, ob alles wie erwartet funktioniert:

html, body, #__nuxt {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Raleway', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222;
}

Sie sollten sehen, dass sich die Schriftart der Begrüßungsnachricht geändert hat, um das CSS widerzuspiegeln.

Nun können wir über Layout sprechen. Nuxt.js hat bereits ein Standardlayout, das Sie anpassen können. Erstellen Sie einen Ordner layouts im Stammverzeichnis und fügen Sie darin eine Datei default.vue mit folgendem Layout-Inhalt hinzu:

<template>
  <div class="main">
    <app-nav></app-nav>
    <!-- Mount the page content here -->
    <nuxt/>
    
  </div>
</template>
<style>
/* You can get the component styles from the Github repository for this demo */
</style>

<script>
import nav from '@/components/nav';
export default {
  components: {
    'app-nav': nav
  }
};
</script>

Ich lasse alle Stile im style-Tag weg, aber Sie können sie aus dem Code-Repository beziehen. Ich habe sie der Kürze halber weggelassen.

Die Layout-Datei ist ebenfalls eine Komponente, umschließt aber die nuxt-Komponente. Alles in dieser Datei wird auf allen anderen Seiten geteilt, während der Inhalt jeder Seite die nuxt-Komponente ersetzt. Apropos geteilte Inhalte: Die Komponente app-nav in der Datei sollte eine einfache Navigation anzeigen.

Fügen Sie die Komponente nav hinzu, indem Sie einen Ordner components erstellen und darin eine Datei nav.vue hinzufügen:

<template>
  <nav>
    <div class="logo">
      <app-h1 is-brand="true">Nuxt Shop</app-h1>
    </div>
    <div class="menu">
      <ul>
        <li>
           <nuxt-link to="/">Home</nuxt-link>
        </li>
        <li>
           <nuxt-link to="/about">About</nuxt-link>
        </li>
      </ul>
    </div>
  </nav>
</template>
<style>
/* You can get the component styles from the Github repository for this demo */
</style>
<script>
import h1 from './h1';
export default {
  components: {
    'app-h1': h1
  }
}
</script>

Die Komponente zeigt Markentext und zwei Links. Beachten Sie, dass wir für Nuxt, um das Routing korrekt zu handhaben, nicht das <a>-Tag verwenden, sondern die <nuxt-link>-Komponente. Der Markentext wird mit einer wiederverwendbaren <h1>-Komponente gerendert, die ein <h1>-Tag umschließt und erweitert. Diese Komponente befindet sich in components/h1.vue.

<template>
  <h1 :class="{brand: isBrand}">
    <slot></slot>
  </h1>
</template>
<style>
/* You can get the component styles 
from the Github repository for this demo
*/
</style>
<script>
export default {
  props: ['isBrand']
}
</script>

Dies ist die Ausgabe der Index-Seite mit dem Layout und den hinzugefügten Komponenten:

Wenn Sie die Ausgabe inspizieren, sollten Sie sehen, dass die Inhalte serverseitig gerendert werden.

Implizites Routing und automatische Codeaufteilung

Wie bereits erwähnt, nutzt Nuxt.js sein Dateisystem zur Generierung von Routen. Alle Dateien im Verzeichnis pages werden einer URL auf dem Server zugeordnet. Wenn ich also diese Art von Verzeichnisstruktur hätte:

pages/
--| product/
-----| index.vue
-----| new.vue
--| index.vue
--| about.vue

...dann würde ich automatisch ein Vue-Router-Objekt mit der folgenden Struktur erhalten:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'about',
      path: '/about',
      component: 'pages/about.vue'
    },
    {
      name: 'product',
      path: '/product',
      component: 'pages/product/index.vue'
    },
    {
      name: 'product-new',
      path: '/product/new',
      component: 'pages/product/new.vue'
    }
  ]
}

Dies nenne ich gerne implizites Routing.

Auf der anderen Seite sind jede dieser Seiten nicht in einer einzigen gebündelt
bundle.js. Das wäre die Erwartung, wenn man webpack verwendet. In reinen Vue-Projekten bekommen wir das und würden den Code für jede Route manuell in eigene Dateien aufteilen. Mit Nuxt.js erhalten Sie dies sofort und es wird als automatische Codeaufteilung bezeichnet.

Sie können das Ganze in Aktion sehen, wenn Sie eine weitere Datei im Ordner pages hinzufügen. Nennen Sie diese Datei about.vue mit folgendem Inhalt:

<template>
  <div>
    <app-h1>About our Shop</app-h1>
    <p class="about">Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
    <p class="about">Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
    <p class="about">Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
    <p class="about">Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
    ...
  </div>
</template>
<style>
...
</style>
<script>
import h1 from '@/components/h1';
export default {
  components: {
    'app-h1': h1
  }
};
</script>

Klicken Sie nun auf den Link About in der Navigationsleiste und es sollte Sie zu /about führen, wobei der Seiteninhalt wie folgt aussieht:

Ein Blick auf den Netzwerk-Tab in den DevTools zeigt, dass keine Datei pages/index.[hash].js geladen wurde, sondern stattdessen eine Datei pages/about.[hash].js.

Sie sollten daraus eine Sache mitnehmen: Routen === Seiten. Daher können Sie sie in der serverseitigen Welt austauschbar verwenden.

Datenabruf

Hier ändert sich das Spiel ein wenig. In reinen Vue-Apps warteten wir normalerweise, bis die Komponente geladen war, und machten dann eine HTTP-Anfrage in der created-Lifecycle-Methode. Leider, wenn Sie auch auf dem Server rendern, ist der Server lange bereit, bevor die Komponente bereit ist. Wenn Sie sich also an die created-Methode halten, können Sie abgerufene Daten nicht an den Server rendern, da es bereits zu spät ist.

Aus diesem Grund stellt Nuxt.js neben created eine weitere Instanzmethode namens asyncData bereit. Diese Methode hat Zugriff auf zwei Kontexte: den Client und den Server. Wenn Sie also in dieser Methode eine Anfrage stellen und eine Datenlast zurückgeben, wird die Last automatisch an die Vue-Instanz angehängt.

Schauen wir uns ein Beispiel an. Erstellen Sie einen Ordner services im Stammverzeichnis und fügen Sie eine Datei data.js hinzu. Wir werden das Abrufen von Daten simulieren, indem wir Daten aus dieser Datei anfordern:

export default [
  {
    id: 1,
    price: 4,
    title: 'Drinks',
    imgUrl: 'http://res.cloudinary.com/christekh/image/upload/v1515183358/pro3_tqlsyl.png'
  },
  {
    id: 2,
    price: 3,
    title: 'Home',
    imgUrl: 'http://res.cloudinary.com/christekh/image/upload/v1515183358/pro2_gpa4su.png'
  },
  // Truncated for brevity. See repo for full code.
]

Aktualisieren Sie dann die Index-Seite, um diese Datei zu verwenden:

<template>
  <div>
    <app-banner></app-banner>
    <div class="cta">
      <app-button>Start Shopping</app-button>
    </div>
    <app-product-list :products="products"></app-product-list>
  </div>
</template>
<style>
...
</style>
<script>
import h1 from '@/components/h1';
import banner from '@/components/banner';
import button from '@/components/button';
import productList from '@/components/product-list';
import data from '@/services/data';
export default {
  asyncData(ctx, callback) {
    setTimeout(() => {
      callback(null, { products: data });
    }, 2000);
  },
  components: {
    'app-h1': h1,
    'app-banner': banner,
    'app-button': button,
    'app-product-list': productList
  }
};
</script>

Ignorieren Sie vorerst die importierten Komponenten und konzentrieren Sie sich auf die Methode asyncData. Ich simuliere eine asynchrone Operation mit setTimeout und rufe die Daten nach zwei Sekunden ab. Die Callback-Methode wird mit den Daten aufgerufen, die Sie der Komponente zur Verfügung stellen möchten.

Nun zu den importierten Komponenten. Sie haben die <h1>-Komponente bereits gesehen. Ich habe ein paar weitere erstellt, die als UI-Komponenten für unsere App dienen. Alle diese Komponenten befinden sich im Verzeichnis components und Sie können den Code dafür aus dem Github-Repo beziehen. Seien Sie versichert, dass sie hauptsächlich HTML und CSS enthalten, sodass Sie gut verstehen werden, was sie tun.

Dies sollte die Ausgabe sein:

Raten Sie mal? Die abgerufenen Daten werden immer noch serverseitig gerendert!

Parametrisierte (dynamische) Routen

Manchmal werden die Daten, die Sie auf Ihren Seiten anzeigen, durch den Zustand der Routen bestimmt. Ein übliches Muster in Webanwendungen ist, einen dynamischen Parameter in einer URL zu haben. Dieser Parameter wird verwendet, um Daten oder eine Datenbank für eine bestimmte Ressource abzufragen. Die Parameter können in dieser Form vorliegen:

https://example.com/product/2

Der Wert 2 in der URL kann 3 oder 4 oder ein beliebiger Wert sein. Das Wichtigste ist, dass Ihre App diesen Wert abruft und eine Abfrage gegen einen Datensatz ausführt, um relative Informationen abzurufen.

In Nuxt.js haben Sie die folgende Struktur im Ordner pages:

pages/
--| product/
-----| _id.vue

Dies löst auf zu:

router: {
  routes: [
    {
      name: 'product-id',
      path: '/product/:id?',
      component: 'pages/product/_id.vue'
    }
  ]
}

Um zu sehen, wie das funktioniert, erstellen Sie einen Ordner product im
pages-Verzeichnis und fügen Sie eine Datei _id.vue hinzu:

<template>
  <div class="product-page">
    <app-h1>{{product.title}}</app-h1>
    <div class="product-sale">
      <div class="image">
        <img :src="product.imgUrl" :alt="product.title">
      </div>
      <div class="description">
        <app-h2>${{product.price}}</app-h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</template>
<style>

</style>
<script>
import h1 from '@/components/h1';
import h2 from '@/components/h2';
import data from '@/services/data';
export default {
  asyncData({ params }, callback) {
    setTimeout(() => {
       callback(null,{product: data.find(v => v.id === parseInt(params.id))})
    }, 2000)
  },
  components: {
    'app-h1': h1,
    'app-h2': h2
  },
};
</script>

Wichtig ist wieder die asyncData. Wir simulieren eine asynchrone Anfrage mit setTimeout. Die Anfrage verwendet die id, die über params im Kontextobjekt empfangen wird, um unseren Datensatz nach der ersten übereinstimmenden ID abzufragen. Der Rest ist nur die Komponente, die das product rendert.

Routen mit Middleware schützen

Es wird nicht lange dauern, bis Sie feststellen, dass Sie einige Inhalte Ihrer Website vor unbefugten Benutzern sichern müssen. Ja, die Datenquelle mag gesichert sein (was wichtig ist), aber die Benutzererfahrung verlangt, dass Sie Benutzer daran hindern, auf unbefugte Inhalte zuzugreifen. Dies können Sie tun, indem Sie eine freundliche Fehlermeldung anzeigen oder sie auf eine Anmeldeseite weiterleiten.

In Nuxt.js können Sie Middleware verwenden, um Ihre Seiten (und damit Ihre Inhalte) zu schützen. Middleware ist ein Logikteil, der ausgeführt wird, bevor auf eine Route zugegriffen wird. Diese Logik kann den Zugriff auf die Route vollständig verhindern (möglicherweise mit Weiterleitungen).

Erstellen Sie einen Ordner middleware im Stammverzeichnis des Projekts und fügen Sie eine Datei auth.js hinzu:

export default function (ctx) {
  if(!isAuth()) {
    return ctx.redirect('/login')
  }
}
function isAuth() {
  // Check if user session exists somehow
  return false;
}

Die Middleware prüft, ob eine Methode, isAuth, falsch zurückgibt. Wenn dies der Fall ist, bedeutet dies, dass der Benutzer nicht authentifiziert ist und zur Anmeldeseite weitergeleitet wird. Die Methode isAuth gibt zu Testzwecken standardmäßig falsch zurück. Normalerweise würden Sie eine Sitzung prüfen, um zu sehen, ob der Benutzer angemeldet ist.

Verlassen Sie sich nicht auf localStorage, da der Server nicht weiß, dass es existiert.

Sie können diese Middleware verwenden, um Seiten zu schützen, indem Sie sie als Wert der Instanzeigenschaft middleware hinzufügen. Sie können sie zur gerade erstellten Datei _id.vue hinzufügen:

export default {
  asyncData({ params }, callback) {
    setTimeout(() => {
       callback(null,{product: data.find(v => v.id === parseInt(params.id))})
    }, 2000)
  },
  components: {
   //...
  },
  middleware: 'auth'
};

Dies schaltet diese Seite jedes Mal ab, wenn wir darauf zugreifen. Das liegt daran, dass die Methode isAuth immer false zurückgibt.

Kurz gesagt

Ich kann mit Sicherheit davon ausgehen, dass Sie gelernt haben, was SSR ist und warum Sie daran interessiert sein sollten, es zu verwenden. Sie haben auch einige grundlegende Konzepte wie Routing, Layouts, Sicherheit und asynchronen Datenabruf kennengelernt. Es gibt jedoch noch mehr. Sie sollten die Nuxt.js-Anleitung für weitere Funktionen und Anwendungsfälle durchgehen. Wenn Sie an einem React-Projekt arbeiten und ein solches Tool benötigen, dann sollten Sie meiner Meinung nach Next.js ausprobieren.