Ein etwas wortreicher Titel, oder? Was ist Server Side Rendering? Was hat es mit Routing und Seitenübergängen zu tun? Was zum Teufel ist Nuxt.js? Lustigerweise, auch wenn es komplex klingt, ist die Arbeit mit Nuxt.js und das Erkunden seiner Vorteile nicht allzu schwierig. Fangen wir an!
Server Side Rendering
Sie haben vielleicht in letzter Zeit Leute über Server Side Rendering reden hören. Wir haben uns kürzlich eine Methode dafür mit React angesehen. Ein besonders überzeugender Aspekt sind die Performance-Vorteile. Wenn wir unseren HTML, CSS und JavaScript auf dem Server rendern, haben wir oft weniger JavaScript zu parsen, sowohl anfänglich als auch bei nachfolgenden Updates. Dieser Artikel geht wirklich gut auf das Thema ein. Meine Lieblingseinsicht ist:
Durch das Rendern auf dem Server können Sie die endgültige Form Ihrer Daten cachen.
Anstatt JSON oder andere Informationen vom Server abzurufen, diese zu parsen und dann mit JavaScript Layouts aus diesen Informationen zu erstellen, führen wir viele dieser Berechnungen im Voraus durch und senden nur das eigentliche HTML, CSS und JavaScript herunter, das wir benötigen. Dies kann viele Vorteile bei Caching, SEO und der Beschleunigung unserer Apps und Websites bringen.
Was ist Nuxt.js?
Server Side Rendering klingt ziemlich gut, aber Sie fragen sich wahrscheinlich, ob die Einrichtung schwierig ist. Ich benutze in letzter Zeit Nuxt.js für meine Vue-Anwendungen und fand es überraschend einfach zu handhaben. Um es klarzustellen: Sie müssen Nuxt.js nicht unbedingt verwenden, um Server Side Rendering zu betreiben. Ich bin aus vielen Gründen ein Fan dieses Tools. Ich habe letzten Monat einige Tests durchgeführt und festgestellt, dass Nuxt.js von Anfang an höhere Lighthouse-Scores erzielte als das PWA-Template von Vue, was ich beeindruckend fand.
Nuxt.js ist ein Framework der höheren Ebene, das Sie mit einem CLI-Befehl verwenden können, um universelle Vue-Anwendungen zu erstellen. Hier sind einige, nicht alle, der Vorteile:
- Server-Side Rendering
- Automatische Code-Aufteilung
- Leistungsstarkes Routing-System
- Großartige Lighthouse-Scores von Anfang an 🐎
- Bereitstellung statischer Dateien
- ES6/ES7-Transpilierung
- Hot Reloading in der Entwicklung
- Präprozessoren: SASS, LESS, Stylus, etc.
- Schreiben Sie Vue-Dateien, um Ihre Seiten und Layouts zu erstellen!
- Mein persönlicher Favorit: einfach Übergänge zu Ihren Seiten hinzufügen
Lassen Sie uns eine einfache Anwendung mit etwas Routing einrichten, um die Vorteile selbst zu sehen.
Einrichtung
Als Erstes müssen wir, falls noch nicht geschehen, die Vue CLI herunterladen. Sie können dies global mit diesem Befehl tun:
npm install -g vue-cli
# ... or ...
yarn add global vue-cliDies müssen Sie nur einmal tun, nicht jedes Mal, wenn Sie es verwenden.
Als Nächstes verwenden wir die CLI, um ein neues Projekt zu erstellen, aber wir verwenden Nuxt.js als Vorlage:
vue init nuxt/starter my-project
cd my-project
yarn # or... npm install
npm run devSie sehen den Fortschritt beim Erstellen der Anwendung und erhalten einen dedizierten Entwicklungsserver zur Überprüfung: http://127.0.0.1:3000/. Dies sehen Sie sofort (mit einer ziemlich coolen kleinen Animation).
Werfen wir einen Blick darauf, was diese anfängliche Ansicht unserer Anwendung zu diesem Zeitpunkt erzeugt. Wir können zum Verzeichnis `pages` gehen und darin sehen, dass wir eine Seite `index.vue` haben. Wenn wir diese öffnen, sehen wir den gesamten Markup, der für die Erstellung dieser Seite erforderlich war. Wir werden auch sehen, dass es sich um eine `.vue`-Datei handelt, die Single-File-Komponenten wie jede gewöhnliche `vue`-Datei verwendet, mit einem `template`-Tag für das HTML, einem `script`-Tag für unsere Skripte, wo wir eine Komponente importieren, und etwas Styling in einem `style`-Tag. (Wenn Sie damit nicht vertraut sind, gibt es weitere Informationen dazu hier.) Das Coolste an der ganzen Sache ist, dass diese `.vue`-Datei keine spezielle Einrichtung erfordert. Sie wird im Verzeichnis `pages` platziert, und Nuxt.js macht diese Seite automatisch server-gerendert!
Erstellen wir eine neue Seite und richten wir einige Routen dazwischen ein. In `pages/index.vue` löschen Sie den vorhandenen Inhalt und ersetzen ihn durch:
<template>
<div class="container">
<h1>Welcome!</h1>
<p><nuxt-link to="/product">Product page</nuxt-link></p>
</div>
</template>
<style>
.container {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
padding: 60px;
}
</style>Dann erstellen wir eine weitere Seite im Verzeichnis `pages`, wir nennen sie `product.vue` und fügen diesen Inhalt hinein:
<template>
<div class="container">
<h1>This is the product page</h1>
<p><nuxt-link to="/">Home page</nuxt-link></p>
</div>
</template>Sofort sehen Sie Folgendes:
Tadaa! 🏆
Sofort haben wir Server Side Rendering, Routing zwischen Seiten (wenn Sie sich die URL ansehen, können Sie sehen, dass sie zwischen der Indexseite und der Produktseite wechselt) und wir haben sogar einen süßen kleinen grünen Lader, der oben entlang saust. Wir mussten nicht viel tun, um das zum Laufen zu bringen.
Sie haben vielleicht hier drin etwas bemerkt, ein besonderes kleines Element: `<nuxt-link to="/">`. Dieses Tag kann wie ein `a`-Tag verwendet werden, wo es einen Teil des Inhalts umschließt und eine interne Routing-Verknüpfung zwischen unseren Seiten herstellt. Wir verwenden `to="/seitentitel-hier"` anstelle eines `href`.
Fügen wir nun einige Übergänge hinzu. Wir werden dies in mehreren Schritten tun: einfach bis komplex.
Erstellung von Seitenübergängen
Wir haben bereits eine wirklich coole Fortschrittsanzeige, die beim Routing über den Bildschirm läuft und das Ganze sehr zügig wirken lässt. (Das ist ein technischer Begriff). Obwohl ich sie sehr mag, passt sie nicht wirklich zu der Richtung, in die wir gehen, also entfernen wir sie vorerst.
Wir werden in unsere `nuxt.config.js`-Datei gehen und die Zeilen ändern:
/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },zu
loading: false,Sie werden auch einige andere Dinge in dieser `nuxt.config.js`-Datei bemerken. Sie sehen unsere Meta- und Head-Tags sowie den Inhalt, der darin gerendert wird. Das liegt daran, dass wir keine traditionelle `index.html`-Datei wie bei unserem normalen CLI-Build haben werden. Nuxt.js wird unsere `index.vue`-Datei zusammen mit diesen Tags parsen und erstellen und dann den Inhalt für uns auf dem Server rendern. Wenn Sie CSS-Dateien, Schriftarten oder ähnliches hinzufügen müssen, würden wir diese Nuxt.js-Konfigurationsdatei dafür verwenden.
Nachdem wir das alles erledigt haben, wollen wir verstehen, was uns zur Erstellung von Seitenübergängen zur Verfügung steht. Um zu verstehen, was auf der Seite passiert, in die wir uns einklinken, müssen wir überprüfen, wie die Transition-Komponente in Vue funktioniert. Ich habe einen Artikel darüber geschrieben. Wenn Sie also tiefergehende Kenntnisse zu diesem Thema wünschen, können Sie sich diesen ansehen. Aber was Sie wirklich wissen müssen, ist Folgendes: Im Grunde integriert sich Nuxt.js in die Funktionalität der `transition`-Komponente von Vue und bietet uns einige Standardeinstellungen und Hooks zur Verfügung.
Sie sehen hier, dass wir einen Hook für das haben, was passieren soll, **unmittelbar bevor** die Animation beginnt (`enter`), **während** der Animation/des Übergangs (`enter-active`) und wenn sie **endet** (`enter-to`). Wir haben dieselben Hooks für das Verlassen, mit `leave` davor. Wir können einfache Übergänge erstellen, die nur zwischen Zuständen interpolieren, oder wir könnten eine vollständige CSS- oder JavaScript-Animation darin einbinden.
Normalerweise würden wir in einer Vue-Anwendung eine Komponente oder ein Element in `
.page-enter-active, .page-leave-active {
transition: all .25s ease-out;
}
.page-enter, .page-leave-active {
opacity: 0;
transform-origin: 50% 50%;
}Ich werde hier auch ein zusätzliches Stück Styling hinzufügen, damit Sie die Seitenübergänge leichter sehen können.
html, body {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
background: #222;
color: white;
width: 100vw;
height: 100vh;
}
a, a:visited {
color: #3edada;
text-decoration: none;
}
.container {
padding: 60px;
width: 100vw;
height: 100vh;
background: #444;
}Wir verwenden jetzt einen CSS-Übergang. Dies gibt uns nur die Möglichkeit, festzulegen, was in der Mitte von zwei Zuständen geschehen soll. Wir könnten etwas Interessanteres tun, indem wir eine Animation so anpassen, dass sie angibt, woher etwas kommt und wohin es geht. Dazu könnten wir Übergänge für `page-enter` und `page-leave-active`-Klassen trennen, aber es ist etwas DRYer, eine CSS-Animation zu verwenden und anzugeben, woher Dinge kommen und wohin sie gehen, und uns für `.page-enter-active` und `.page-leave-active` einzuklinken.
.page-enter-active {
animation: acrossIn .45s ease-out both;
}
.page-leave-active {
animation: acrossOut .65s ease-in both;
}
@keyframes acrossIn {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes acrossOut {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}Fügen wir auch ein wenig spezielles Styling zur Produktseite hinzu, damit wir den Unterschied zwischen diesen beiden Seiten sehen können.
<style scoped>
.container {
background: #222;
}
</style>Dieses gescopt-Tag ist ziemlich cool, weil es die Stile nur für diese Seite/Vue-Datei anwendet. Wenn Sie von CSS-Modulen gehört haben, sind Sie mit diesem Konzept vertraut.
Wir würden dies sehen (diese Seite dient nur zu Demozwecken, das ist wahrscheinlich zu viel Bewegung für einen typischen Seitenübergang).
Nun, sagen wir, wir haben eine Seite mit einer völlig anderen Interaktion. Für diese Seite war die Auf- und Abwärtsbewegung zu viel, wir wollen nur ein einfaches Ausblenden. In diesem Fall müssten wir unseren Transition-Hook umbenennen, um ihn zu trennen.
Lassen Sie uns eine weitere Seite erstellen, wir nennen sie die Kontaktseite und erstellen sie im Verzeichnis `pages`.
<template>
<div class="container">
<h1>This is the contact page</h1>
<p><nuxt-link to="/">Home page</nuxt-link></p>
</div>
</template>
<script>
export default {
transition: 'fadeOpacity'
}
</script>
<style>
.fadeOpacity-enter-active, .fadeOpacity-leave-active {
transition: opacity .35s ease-out;
}
.fadeOpacity-enter, .fadeOpacity-leave-active {
opacity: 0;
}
</style>Jetzt können wir zwei Seitenübergänge haben.
Sie sehen, wie wir darauf aufbauen und immer mehr optimierte CSS-Animationen pro Seite erstellen könnten. Aber von hier aus tauchen wir in mein Lieblingsthema ein: JavaScript-Animationen, und erstellen Seitenübergänge mit etwas mehr Power.
JavaScript-Hooks
Die `
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-Leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false">
</transition>Das andere, was uns zur Verfügung steht, sind Übergangsmodi. Ich bin ein großer Fan davon, da Sie angeben können, dass eine Animation darauf wartet, dass die andere Animation vollständig ausblendet, bevor sie einblendet. Der Übergangsmodus, mit dem wir arbeiten werden, heißt `out-in`.
Wir können mit JavaScript und dem Übergangsmodus etwas wirklich Wildes machen, wieder, wir drehen hier ein wenig durch zu Demozwecken, normalerweise würden wir etwas Subtileres tun.
Um so etwas zu tun, habe ich `yarn add gsap` ausgeführt, weil ich GreenSock für diese Animation verwende. In meiner `index.vue`-Seite kann ich die vorhandene CSS-Animation entfernen und dies in die `