SSR: wann, warum und wofür. Am Beispiel von Vue

  • Tutorial

( Illustration ) Es war

einmal Als ich vor einigen Jahren mit dem Web in Java anfing, haben wir mit JSP gearbeitet. Die gesamte Seite wurde auf dem Server generiert und an den Client gesendet. Dann stellte sich jedoch die Frage, dass die Antwort zu lang war ...

Wir begannen einen Ansatz zu verwenden, bei dem eine leere Seitenvorlage angegeben wurde und alle Daten schrittweise von Ajax geladen wurden. Alle waren glücklich, die Seiten wurden gezeigt. Bisher haben wir nicht verstanden, was wir für den Kragen getan haben, da CSR die Optimierung von Suchmaschinen und die Leistung auf mobilen Geräten beeinträchtigt. Aber dann hörte ich wieder von der Unterstützung für SSR JS-Frameworks.

Und was passiert, wiederholt sich die Geschichte?

Was sind die Prinzipien von SSR?

1. Prerendering Im einfachsten Fall werden N HTML-Dateien generiert, die auf dem Server abgelegt und so zurückgegeben werden, dass statisch zurückgegeben wird. Während der Anforderung wird nichts generiert.



2. Wie im Fall von JSP wird vollständiger HTML-Code mit sämtlichen Inhalten auf dem Server generiert und an den Client zurückgegeben. Fügen Sie jedoch einen Proxy-Cache hinzu, um nicht für jede Anforderung eine Seite zu generieren (von der möglicherweise eine Million vorhanden ist und unser Server verbogen ist). Zum Beispiel Lack.



Wann kann jede dieser Methoden angewendet werden:

1. Wann ist es sinnvoll, ein Paket von HTML-Dateien zu generieren? Offensichtlich in dem Fall, in dem sich die Daten auf der Website seltener als nie ändern. Zum Beispiel der Firmensitz eines Schuhreparaturstandes, der um die Ecke ist (ja, der Onkel, der die Anschlüsse eines 2x2-Meter-Standes wechselt, wollte auch den Firmenstandort - und natürlich die Missionsseite des Unternehmens). Für eine solche Site müssen Sie sich nicht um Frameworks, SSR und andere Pfeifen kümmern, aber dies ist ein sphärisches Beispiel. Was ist, wenn wir einen Blog haben, in dem 1k Beiträge veröffentlicht werden? Manchmal aktualisieren wir sie, manchmal fügen wir neue hinzu. 1k + statische Dateien erzeugen ... Etwas stimmt nicht. Und wenn wir den Beitrag ändern, müssen wir eine bestimmte Datei neu generieren. Hmm ...

2. Und hier haben wir die zweite Methode. Wo wir das erste Mal on the fly generieren und dann die Antwort im Proxy-Service zwischenspeichern. Die Caching-Zeit kann eine Stunde / zwei / Tag sein - was auch immer. Wenn wir 10.000 Besuche pro Stunde für die Post haben (unglaublich, richtig?), Dann wird nur die erste Anfrage den Server erreichen. Der Rest erhält im Gegenzug eine zwischengespeicherte Kopie, und unser Server wird wahrscheinlich länger leben. Wenn Sie einen Beitrag aktualisieren, müssen Sie nur den zwischengespeicherten Eintrag zurücksetzen, damit die nächste Seite bei der nächsten Anforderung generiert wird.

Von Worten zu Taten:


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 Befehl installieren:

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

Standardmäßig ist die vorgeschlagene Startvorlage für unser Beispiel vorgesehen. Obwohl in der realen Anwendung haben wir Express-Vorlage gewählt. Nennen wir das Projekt einfach:

$ vue init nuxt-community/starter-template habr-nuxt-example
$ cd habr-nuxt-example
$ yarn # или npm install, как будет угодно
$ yarn dev

Wessen , wir haben Hallo Welt generiert. Wenn Sie die URL
einschalten , können Sie die generierte Seite sehen: 1) Webpack und Linting

Nuxt enthält standardmäßig angepasste Webpacks mit Unterstützung für ES6 (Babel-Loader), Vue-Einzeldateikomponenten (Vue-Loader) sowie SCSS, JSX usw.

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

Fügen wir beispielsweise Flusenarten analog zum Flusencode hinzu - ein wichtiger Punkt 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 eine Jungfrau basierend auf einer Umgebungsvariablen):

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

Die verbleibenden Änderungen können im Repo- Tag angezeigt werden. Diese Änderungen helfen uns, die Stile in der richtigen Reihenfolge zu halten.

Und ein Beispiel für einen Konfigurationsdateilber: Verwenden Sie Standard JS als Lösung, die üblicherweise in Vue / Nuxt verwendet wird:

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

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

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

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

Und ein Anwendungsbeispiel:

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

Der Rest der Rüben auf dem Tag .

Download-Abbildungen:

1) SSR + Lack

Erste Anfrage:



Zweite:



2) Nein- SSR



Zweite Anfrage von Fast Die



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

Fazit


Was ist das ergebnis Wir haben herausgefunden, wie man eine minimal konfigurierte SSR-Anwendung erhält. Sie fügten Linting hinzu, um den Stil des Codes von Anfang des Projektlebens an zu erhalten, und umriss die Gesamtarchitektur. Sie können Ihr Googol schreiben.

Jetzt auch beliebt: