( Abbildung )

Es war einmal Vor einigen Jahren, als ich gerade anfing, mit dem Web in Java zu arbeiten, haben wir mit JSP gearbeitet. Die gesamte Seite wurde auf dem Server generiert und an den Client gesendet. Aber dann stellte sich die Frage, dass die Antwort zu lang kam ...

Wir haben begonnen, einen Ansatz zu verwenden, bei dem eine leere Seitenvorlage angegeben wird und alle Daten bereits schrittweise von Ajax geladen werden. Alle waren glücklich, zeigten die Seiten. Wir haben nicht realisiert, was wir für uns getan haben, da CSR die Suchmaschinenoptimierung und die Leistung auf Mobilgeräten negativ beeinflusst. Aber dann hörte ich wieder von SSR-Unterstützung mit JS-Frameworks.

Und was passiert, die Geschichte wiederholt sich?

Was sind die Funktionsprinzipien von SSR?

1. Vorrendern. Im einfachsten Fall werden N HTML-Dateien generiert, die auf dem Server abgelegt und unverändert zurückgegeben werden. Das heißt, statische Daten werden zurückgegeben. Während der Anforderung wird nichts generiert.



2. Wie bei JSP generiert der Server vollständigen HTML-Code mit dem gesamten Inhalt und gibt ihn an den Client zurück. Um jedoch nicht für jede Anforderung eine Seite zu generieren (es kann eine Million davon geben und unser Server wird sich verbiegen), fügen wir einen Proxy-Cache hinzu. Zum Beispiel Lack.



Wann kann jede dieser Methoden angewendet werden:

1. Wann ist es sinnvoll, eine Reihe von HTML-Dateien zu generieren? Offensichtlich, wenn sich die Daten auf der Website etwas weniger als nie ändern. Zum Beispiel die Unternehmenswebsite eines Schuhreparaturstandes, der sich um die Ecke befindet (ja, dieser Onkel, der in einem 2x2-Meter-Stand die Absätze wechselt, wollte auch die Website des Unternehmens - und natürlich die Missionsseite des Unternehmens). Für eine solche Site müssen Sie sich nicht einmal mit Frameworks, SSRs und anderen Pfeifen beschäftigen, aber dies ist ein sphärisches Beispiel. Was ist, wenn wir einen Blog mit 1k Posts haben? Manchmal aktualisieren wir sie, manchmal fügen wir neue hinzu. Generiere 1k + statische Dateien ... Irgendwas stimmt nicht. Und wenn wir den Beitrag ändern, müssen wir eine bestimmte Datei neu generieren. Hmm ...

2. Und hier passt die zweite Methode zu uns. Wo wir das erste Mal im laufenden Betrieb generieren und dann die Antwort im Proxy-Service zwischenspeichern. Die Caching-Zeit kann eine Stunde / zwei / Tag betragen - was auch immer. Wenn wir 10.000 Anrufe pro Stunde und Post haben (unglaublich, oder?), Dann erreicht nur die erste Anfrage den Server. Der Rest erhält als Antwort eine zwischengespeicherte Kopie, und unser Server lebt mit größerer Wahrscheinlichkeit. Wenn Sie einen Beitrag aktualisieren, müssen Sie nur den zwischengespeicherten Datensatz zurücksetzen, damit auf der nächsten Seite eine tatsächliche Seite generiert wird.

Von den Worten zur Tat:

Hallo Welt Repo.

0) Hallo Welt erzeugen

Für einen schnellen Start hat die Nuxt-Community grundlegende Vorlagen vorbereitet. Sie können jede davon mit dem folgenden Befehl installieren:

$ vue init <template-name> <project-name> 

Standardmäßig wird eine gestartete Vorlage vorgeschlagen, die wir als Beispiel verwenden. Obwohl wir in einer realen Anwendung Express-Template gewählt haben. Nennen wir das Projekt einfach:

 $ vue init nuxt-community/starter-template habr-nuxt-example $ cd habr-nuxt-example $ yarn #  npm install,    $ yarn dev 

Okay , wir haben Hallo Welt generiert. Wenn Sie die URL durchgehen, sehen Sie die generierte Seite:
1) Webpack und Flusen

Nuxt out of the box hat Webpacks mit Unterstützung für ES6 (Babel-Loader), Vue-Einzeldateikomponenten (Vue-Loader) sowie SCSS, JSX und mehr konfiguriert.

Wenn diese Funktionen nicht ausreichen, kann die Webpack-Konfiguration erweitert werden. Wir gehen zu nuxt.config.js und in build.extend können wir die Konfiguration ändern.

Zum Beispiel werden wir Style-Linting analog zum Code-Linting hinzufügen - ein wichtiger Punkt unserer Meinung nach für die Aufrechterhaltung einer einheitlichen Codebasis. Dies ist eine gute Angewohnheit, die dazu beiträgt, viele Fallstricke zu vermeiden.

Ein Beispiel für eine Konfigurationserweiterung (Verbinden einer Konfigurationsdatei für ein Dienstmädchen basierend auf einer Umgebungsvariablen):

 config.plugins.push( new StylelintPlugin({ files: [ '**/*.vue', 'assets/scss/**/*.scss' ], configFile: './.stylelintrc.dev.js' }) ) 

Andere Änderungen können im Repo nach Tag angezeigt werden. Diese Änderungen helfen uns, die Stile in Ordnung zu halten.

Und ein Beispiel für eine Linter-Konfigurationsdatei: Wir verwenden Standard JS als die in Vue / Nuxt allgemein akzeptierte Lösung:

 ... extends: [ - 'plugin:vue/essential' + 'standard', + 'plugin:vue/recommended' ], … 

2) Als Beispiel für die Arbeit mit Daten verwenden wir diese API :

Verbinden Sie Axios als Plugin und erstellen Sie eine neue Datei im Plugins-Verzeichnis:

 import * as axios from 'axios' let options = {} // The server-side needs a full url to works if (process.server) { options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}` } export default axios.create(options) 

Und ein Anwendungsbeispiel:

 import axios from '~/plugins/axios' export default { async asyncData ({ params }) { const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') return { data } } } 

Sonst in Rübe nach Tag .

Nummern herunterladen:

1) SSR + Lack

Erste Anfrage:



Zweitens:



2) No-ssr



Die zweite Anfrage von Fastley



Eine leere Seite kam schnell an, aber es dauerte 2 Sekunden, um Inhalte darauf zu generieren.

Fazit

Was ist das Ergebnis? Wir haben herausgefunden, wie man eine minimal konfigurierte SSR-Startanwendung erhält. Sie fügten Linting hinzu, um den Codestil von Beginn des Projektlebens an beizubehalten, und skizzierten auch die allgemeine Architektur. Sie können Ihr Googol schreiben.