Basic Server Side Rendering mit Vue.js und Express - Server Side Rendering (SSR) ist eines der Dinge, die seit langem als eine der größten Stärken von React, Angular 2+ und Vue 2 angepriesen werden…
Es ermöglicht Ihnen, Ihre Apps auf dem Server zu rendern und sie nach dem Laden der Seite mit clientseitiger Reaktivität zu hydrieren, wodurch die Reaktionsfähigkeit erheblich erhöht und die Ladezeit Ihrer Seiten verbessert wird.
Leider ist es nicht die offensichtlichste Einrichtung, und die Dokumentation zum Rendern von Vue.js-Apps auf dem Server ist auf mehrere Orte verteilt. Hoffentlich sollte dieser Leitfaden helfen, die Dinge für Sie zu klären. :)
Installation
Delta leicht gegen schwer
Wir beginnen mit vue-clis webpack-einfach Vorlage, um uns eine gemeinsame Basis zu geben, mit der wir arbeiten können.
# Create the project $ vue init webpack-simple vue-ssr-example $ cd vue-ssr-example # Install dependencies $ yarn # (or npm install) Wir benötigen auch drei weitere Pakete, Express für den Server, vue-server-renderer, um das Bundle zu rendern, das von vue-ssr-webpack-plugin produziert wird.
# Install with yarn ... $ yarn add express vue-server-renderer $ yarn add vue-ssr-webpack-plugin -D # Add this as a development dependency as we don't need it in production. # ... or with NPM $ npm install express vue-server-renderer $ npm install vue-ssr-webpack-plugin -D Vorbereitung der App
Die webpack-einfache Vorlage wird nicht sofort mit SSR-Fähigkeit geliefert. Es gibt ein paar Dinge, die wir zuerst konfigurieren müssen.
Als erstes müssen Sie eine separate Eintragsdatei für den Server erstellen. Im Moment befindet sich der Client-Eintrag in main.js. Kopieren wir das und erstellen daraus main.server.js. Die Modifikationen sind relativ einfach. Wir müssen nur die el-Referenz entfernen und die App im Standardexport zurückgeben.
Plex Medienserver Debian
import Vue from 'vue'; import App from './App.vue'; // Receives the context of the render call, returning a Promise resolution to the root Vue instance. export default context => { return Promise.resolve( new Vue({ render: h => h(App) }) ); } Wir müssen auch index.html ein wenig modifizieren, um es für SSR vorzubereiten.
Ersetzen
mit , so: |_+_|Webpack-Konfiguration
Web Scraping Python Amazon
Jetzt benötigen wir eine separate Webpack-Konfigurationsdatei, um das Server-Bundle zu rendern. Kopieren Sie webpack.config.js in eine neue Datei, webpack.server.config.js.
Es gibt einige Änderungen, die wir vornehmen müssen:
const path = require('path') const webpack = require('webpack') // Laden Sie das Vue SSR-Plugin. Vergiss dies nicht. :P const VueSSRPlugin = require('vue-ssr-webpack-plugin') module.exports = { // Das Ziel sollte auf 'node' gesetzt werden, um integriertes Packen zu vermeiden. target: 'node', // Der Eintrag sollte unsere Server-Eintragsdatei sein, nicht die Standarddatei. Eintrag: './src/main.server.js', Ausgabe: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', Dateiname: 'build.js', // Gibt knotenkompatible Module statt browserkompatibel aus. libraryTarget: 'commonjs2' }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', options: { loaders: { } // andere vue-loader Optionen gehen hier } }, { test: /.js$/, loader: 'babel-loader', ausschließen: /node_modules/ }, { test: /..png'>http://localhost:8080 , alles sollte… gleich aussehen. Wenn Sie jedoch JavaScript deaktivieren, sieht alles immer noch gleich aus, da die App zuerst auf dem Server gerendert wird. Vorbehalte
Alle Module, die statt aus dem Bundle von node_modules geladen werden, können nicht über Anfragen hinweg geändert werden (dh sie haben einen globalen Status). Andernfalls erhalten Sie beim Rendern Ihrer Anwendung inkonsistente Ergebnisse.
Stellen Sie sicher, dass Sie Ihre Tabellen richtig schreiben (schließen Sie die Elemente thead und/oder tbodywrapper ein.) Die clientseitige Version kann diese Probleme erkennen, die serverseitige Version jedoch nicht, was zu Inkonsistenzen bei der Flüssigkeitszufuhr führen kann.
Bonusrunde
- Versuchen Sie, dass die App etwas anderes anzeigt, je nachdem, ob sie auf dem Client oder dem Server gerendert wurde. Hinweis: Sie können Requisiten von der Root-Renderfunktion an die App übergeben.
- Synchronisieren Sie den Vuex-Status vom Server zum Client. Es könnte einige globale Variablen beinhalten!
#vue-js #javascript
Reagieren Sie auf native In-App-Benachrichtigungen
alligator.io
Grundlegendes serverseitiges Rendering mit Vue.js und Express
Basic Server Side Rendering mit Vue.js und Express - Server Side Rendering (SSR) ist eines der Dinge, die seit langem als eine der größten Stärken von React, Angular 2+ und Vue 2 angepriesen werden...