Was ist SSR? Wie implementiert man serverseitiges SSR-Rendering in Vue?

Was ist SSR? Der folgende Artikel stellt Ihnen vor, wie Sie das serverseitige SSR-Rendering in vue implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

1. Die Seitenverarbeitungstechnologie zum Zusammenfügen der HTML-Struktur der Seite wird an den Browser gesendet, und dann werden der Status und die Ereignisse daran gebunden vollständig interaktive Seite. [Verwandte Empfehlungen: vuejs Video-Tutorial]

Lass uns einen nehmen Schauen Sie sich zuerst die Entwicklungsgeschichte von Web in drei Phasen an: Server-Side Rendering 我们称其为SSR，意为服务端渲染

指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。【相关推荐：vuejs视频教程】

先来看看Web3个阶段的发展史：

• 传统服务端渲染SSR
• 单页面应用SPA
• 服务端渲染SSR

传统web开发

网页内容在服务端渲染完成，⼀次性传输到浏览器

打开页面查看源码，浏览器拿到的是全部的dom结构

单页应用SPA

单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染

打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容

服务端渲染SSR

SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行

看完前端发展，我们再看看Vue官方对SSR的解释：

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行

我们从上门解释得到以下结论：

• Vue SSR是一个在SPA上进行改良的服务端渲染
• 通过Vue SSR渲染的页面，需要在客户端激活才能实现交互
• Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA

二、解决了什么

SSR主要解决了以下两种问题：

• seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
• 首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）

但是使用SSR同样存在以下的缺点：

• 复杂度：整个项目的复杂度

• 库的支持性，代码兼容

• 性能问题

  • 每个请求都是n个实例的创建，不然会污染，消耗会变得很大
  • 缓存 node serve 、 nginx判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。
  • 降级：监控cpu、内存占用过多，就spa，返回单个的壳

• 服务器负载变大，相对于前后端分离务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用

所以在我们选择是否使用SSR前，我们需要慎重问问自己这些问题：

• 需要SEO的页面是否只是少数几个，这些是否可以使用预渲染（Prerender SPA Plugin）实现

• 首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢

三、如何实现

对于同构开发，我们依然使用webpack

• Traditionelles serverseitiges Rendering SSR
• Einzelseitige Anwendungs-SPA
• Serverseitiges Rendering SSR

Traditionelle Webentwicklung🎜

🎜Der Webseiteninhalt wird serverseitig gerendert und an den übertragen Browser auf einmal🎜🎜🎜🎜Öffnen Sie die Seite, um den Quellcode anzuzeigen und zu durchsuchen. Der Server erhält die gesamte dom-Struktur🎜

🎜Einzelseitige Anwendungs-SPA🎜 h3>🎜Eine Einzelseitenanwendung bietet eine hervorragende Benutzererfahrung und wird nach und nach zum Mainstream. Der Seiteninhalt wird von JS gerendert. Diese Methode wird als clientseitiges Rendering bezeichnet🎜🎜🎜🎜Öffnen Sie die Seite, um den Quellcode anzuzeigen. Nur im Browser Ruft das Hostelement #app ab und keinen Inhalt🎜

🎜Serverseitiges Rendering SSR🎜

🎜SSR Lösung: Das Backend rendert die vollständige dom-Struktur des ersten Bildschirms. Der vom Frontend erhaltene Inhalt umfasst den ersten Bildschirm und die vollständige spa-Struktur , es läuft weiterhin im spa-Modus🎜🎜🎜🎜Nachdem wir die Front-End-Entwicklung gelesen haben, werfen wir einen Blick auf Vue Offizielle Erklärung von SSR: 🎜

🎜Vue.js ist ein Framework zum Erstellen von Clientanwendungen. Standardmäßig können Vue-Komponenten im Browser ausgegeben werden, um DOM zu generieren und DOM zu manipulieren. Es ist jedoch auch möglich, dieselben Komponenten als HTML-Strings auf der Serverseite zu rendern, sie direkt an den Browser zu senden und diese statischen Tags schließlich als vollständig interaktive Anwendung auf dem Client zu „aktivieren“ 🎜🎜Vue.js vom Server gerendert Die Anwendung kann auch als „isomorph“ oder „universal“ betrachtet werden, da der Großteil des Anwendungscodes sowohl auf dem Server als auch auf dem Client ausgeführt werden kann 🎜

🎜Aus der Tür-zu-Tür-Erklärung ziehen wir folgende Schlussfolgerungen: 🎜

• Vue SSR ist ein verbessertes serverseitiges Rendering auf SPA
• Seiten, die über Vue SSR gerendert werden , muss auf dem Client aktiviert werden, um eine Interaktion zu erreichen
• Vue SSR besteht aus zwei Teilen: dem ersten vom Server gerenderten Bildschirm und dem interaktiven SPA li>

🎜2. Was gelöst wird🎜🎜🎜SSR löst hauptsächlich die folgenden zwei Probleme: 🎜

• seo: Suchmaschinenpriorität Beim Crawlen der HTML-Struktur der Seite hat der Server bei Verwendung von ssr bereits HTML generiert, das mit dem Unternehmen verknüpft ist, was für seo
• Rendering auf dem ersten Bildschirm: Benutzer können die Seitenansicht sehen, ohne darauf warten zu müssen, dass alle js auf der Seite geladen sind (der Druck geht auf den Server über, also ist es so Es muss abgewogen werden, was auf der Serverseite gerendert werden soll und was auf der Serverseite gerendert werden soll) Übergeben Sie es an den Client)

🎜Aber die Verwendung von SSR hat auch das Folgende Nachteile: 🎜

• 🎜Komplexität: die Komplexität des gesamten Projekts🎜
• 🎜Bibliotheksunterstützung, Codekompatibilität🎜
• 🎜Leistungsprobleme🎜
  • Jede Anfrage ist die Erstellung von n Instanzen, andernfalls kommt es zu Verschmutzung und der Verbrauch wird sehr groß
  • Cache node dienen , ngin x, um festzustellen, ob der aktuelle Benutzer abgelaufen ist. Wenn nicht, speichern Sie ihn im Cache und verwenden Sie nur das Ergebnis.
  • Downgrade: Überwachen Sie cpu und übermäßige Speichernutzung, dann spa und geben Sie eine einzelne Shell zurück
🎜Die Serverlast steigt. Im Vergleich zu den Front-End- und Back-End-Servern, die nur statische Ressourcen bereitstellen müssen, ist die Serverlast größer, daher müssen wir sie mit Vorsicht verwenden🎜

🎜Wenn wir uns also entscheiden, ob wir esSSR verwenden möchten, müssen wir uns sorgfältig die folgenden Fragen stellen: 🎜

• 🎜Tut das Seite, die SEO erfordert. Nur einige: Können diese mithilfe von Prerender (Prerender SPA Plugin) implementiert werden?🎜
• 🎜Ob die Anforderungs- und Antwortlogik des ersten Bildschirms komplex ist und ob Die Datenrückgabe ist groß und langsam🎜

🎜3 So implementieren Sie 🎜🎜🎜Für die isomorphe Entwicklung verwenden wir immer noch webpackCode> für die Verpackung. Wir müssen zwei Probleme lösen: serverseitiges Rendern des ersten Bildschirms und Client-Aktivierung🎜<p>Hier müssen Sie eine Server-<code>Bundle-Datei für die Darstellung des ersten Serverbildschirms und eine Client-Bundle-Datei für die Client-Aktivierung generierenbundle文件用于服务端首屏渲染和一个客户端bundle文件用于客户端激活

代码结构 除了两个不同入口之外，其他结构和之前vue应用完全相同

src 
├── router 
├────── index.js # 路由声明 
├── store 
├────── index.js # 全局状态 
├── main.js # ⽤于创建vue实例 
├── entry-client.js # 客户端⼊⼝，⽤于静态内容“激活” 
└── entry-server.js # 服务端⼊⼝，⽤于⾸屏内容渲染

路由配置

import Vue from "vue"; import Router from "vue-router"; Vue.use(Router);
//导出⼯⼚函数
export function createRouter(){
    return new Router({
    mode: 'history',
    routes: [ 
       // 客户端没有编译器，这⾥要写成渲染函数 
        { path: "/", component: { render: h => h('div', 'index page') } }, 
        { path: "/detail", component: { render: h => h('div', 'detail page') }} 
    ] 
  });
 }

主文件main.js

跟之前不同，主文件是负责创建vue实例的工厂，每次请求均会有独立的vue实例创建

import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "./router"; 
// 导出Vue实例⼯⼚函数，为每次请求创建独⽴实例 
// 上下⽂⽤于给vue实例传递参数
export function createApp(context) {
    const router = createRouter();
    const app = new Vue({ router, context, render: h => h(App) });
    return { app, router };
  }

编写服务端入口src/entry-server.js

它的任务是创建Vue实例并根据传入url指定首屏

import { createApp } from "./main";
// 返回⼀个函数，接收请求上下⽂，返回创建的vue实例
export default context => {
// 这⾥返回⼀个Promise，确保路由或组件准备就绪
    return new Promise((resolve, reject) => {
        const { app, router } = createApp(context);
        // 跳转到⾸屏的地址
        router.push(context.url);
        // 路由就绪，返回结果
        router.onReady(() => {
        resolve(app);
        }, reject);
    }); 
};

编写客户端入口entry-client.js

客户端入口只需创建vue实例并执行挂载，这⼀步称为激活

import { createApp } from "./main"; 
// 创建vue、router实例
const { app, router } = createApp();
// 路由就绪，执⾏挂载
router.onReady(() => { app.$mount("#app"); });

对webpack进行配置

安装依赖

npm install webpack-node-externals lodash.merge -D

对vue.config.js进行配置

// 两个插件分别负责打包客户端和服务端
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
// 根据传⼊环境变量决定⼊⼝⽂件和相应配置项
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
    css: {
        extract: false
    },
    outputDir: './dist/'+target,
    configureWebpack: () => ({
        // 将 entry 指向应⽤程序的 server / client ⽂件
        entry: `./src/entry-${target}.js`,
        // 对 bundle renderer 提供 source map ⽀持
        devtool: 'source-map',
        // target设置为node使webpack以Node适⽤的⽅式处理动态导⼊，
        // 并且还会在编译Vue组件时告知`vue-loader`输出⾯向服务器代码。
        target: TARGET_NODE ? "node" : "web",
        // 是否模拟node全局变量
        node: TARGET_NODE ? undefined : false,
        output: {
            // 此处使⽤Node⻛格导出模块
            libraryTarget: TARGET_NODE ? "commonjs2" : undefined
        },
        // https://webpack.js.org/configuration/externals/#function
        // https://github.com/liady/webpack-node-externals
        // 外置化应⽤程序依赖模块。可以使服务器构建速度更快，并⽣成较⼩的打包⽂件。
        externals: TARGET_NODE
        ? nodeExternals({
            // 不要外置化webpack需要处理的依赖模块。
            // 可以在这⾥添加更多的⽂件类型。例如，未处理 *.vue 原始⽂件，
            // 还应该将修改`global`（例如polyfill）的依赖模块列⼊⽩名单
            whitelist: [/\.css$/]
        })
        : undefined,
        optimization: {
            splitChunks: undefined
        },
        // 这是将服务器的整个输出构建为单个 JSON ⽂件的插件。
        // 服务端默认⽂件名为 `vue-ssr-server-bundle.json`
        // 客户端默认⽂件名为 `vue-ssr-client-manifest.json`。
        plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new
                  VueSSRClientPlugin()]
    }),
    chainWebpack: config => {
        // cli4项⽬添加
        if (TARGET_NODE) {
            config.optimization.delete('splitChunks')
        }

        config.module
            .rule("vue")
            .use("vue-loader")
            .tap(options => {
            merge(options, {
                optimizeSSR: false
            });
        });
    }
};

对脚本进行配置，安装依赖

npm i cross-env -D

"scripts": {
 "build:client": "vue-cli-service build",
 "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
 "build": "npm run build:server && npm run build:client"
}

执行打包：npm run build

最后修改宿主文件/public/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!--vue-ssr-outlet-->
    </body>
</html>

是服务端渲染入口位置，注意不能为了好看而在前后加空格

安装vuex

npm install -S vuex

创建vuex工厂函数

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export function createStore () {
    return new Vuex.Store({
        state: {
            count:108
        },
        mutations: {
            add(state){
                state.count += 1;
            }
        }
    })
}

在main.js文件中挂载store

import { createStore } from './store'
export function createApp (context) {
    // 创建实例
    const store = createStore()
    const app = new Vue({
        store, // 挂载
        render: h => h(App)
    })
    return { app, router, store }
}

服务器端渲染的是应用程序的"快照"，如果应用依赖于⼀些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据

在store进行一步数据获取

export function createStore() {
    return new Vuex.Store({
        mutations: {
            // 加⼀个初始化
            init(state, count) {
                state.count = count;
            },
        },
        actions: {
            // 加⼀个异步请求count的action
            getCount({ commit }) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        commit("init", Math.random() * 100);
                        resolve();
                    }, 1000);
                });
            },
        },
    });
}

组件中的数据预取逻辑

export default {
    asyncData({ store, route }) { // 约定预取逻辑编写在预取钩⼦asyncData中
        // 触发 action 后，返回 Promise 以便确定请求结果
        return store.dispatch("getCount");
    }
};

服务端数据预取，entry-server.js

import { createApp } from "./app";
export default context => {
    return new Promise((resolve, reject) => {
        // 拿出store和router实例
        const { app, router, store } = createApp(context);
        router.push(context.url);
        router.onReady(() => {
            // 获取匹配的路由组件数组
            const matchedComponents = router.getMatchedComponents();

            // 若⽆匹配则抛出异常
            if (!matchedComponents.length) {
                return reject({ code: 404 });
            }

            // 对所有匹配的路由组件调⽤可能存在的`asyncData()`
            Promise.all(
                matchedComponents.map(Component => {
                    if (Component.asyncData) {
                        return Component.asyncData({
                            store,
                            route: router.currentRoute,
                        });
                    }
                }),
            )
                .then(() => {
                // 所有预取钩⼦ resolve 后，
                // store 已经填充⼊渲染应⽤所需状态
                // 将状态附加到上下⽂，且 `template` 选项⽤于 renderer 时，
                // 状态将⾃动序列化为 `window.__INITIAL_STATE__`，并注⼊ HTML
                context.state = store.state;

                resolve(app);
            })
                .catch(reject);
        }, reject);
    });
};

客户端在挂载到应用程序之前，store 就应该获取到状态，entry-client.js

// 导出store
const { app, router, store } = createApp();
// 当使⽤ template 时，context.state 将作为 window.__INITIAL_STATE__ 状态⾃动嵌⼊到最终的 HTML 
// 在客户端挂载到应⽤程序之前，store 就应该获取到状态：
if (window.__INITIAL_STATE__) {
    store.replaceState(window.__INITIAL_STATE__);
}

客户端数据预取处理，main.js

Vue.mixin({
    beforeMount() {
        const { asyncData } = this.$options;
        if (asyncData) {
            // 将获取数据操作分配给 promise
            // 以便在组件中，我们可以在数据准备就绪后
            // 通过运⾏ `this.dataPromise.then(...)` 来执⾏其他任务
            this.dataPromise = asyncData({
                store: this.$store,
                route: this.$route,
            });
        }
    },
});

修改服务器启动文件

// 获取⽂件路径
const resolve = dir => require('path').resolve(__dirname, dir)
// 第 1 步：开放dist/client⽬录，关闭默认下载index⻚的选项，不然到不了后⾯路由
app.use(express.static(resolve('../dist/client'), {index: false}))
// 第 2 步：获得⼀个createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
// 第 3 步：服务端打包⽂件地址
const bundle = resolve("../dist/server/vue-ssr-server-bundle.json");
// 第 4 步：创建渲染器
const renderer = createBundleRenderer(bundle, {
    runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
    template: require('fs').readFileSync(resolve("../public/index.html"), "utf8"), // 宿主⽂件
    clientManifest: require(resolve("../dist/client/vue-ssr-clientmanifest.json")) // 客户端清单
});
app.get('*', async (req,res)=>{
    // 设置url和title两个重要参数
    const context = {
        title:'ssr test',
        url:req.url
    }
    const html = await renderer.renderToString(context);
    res.send(html)
})

小结

• 使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例

• 实现ssr需要实现服务端首屏渲染和客户端激活

• 服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取

  • 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
  • 切换组件通过mixin混入，在beforeMount
  
Mit Ausnahme von zwei verschiedenen Eingängen ist die Codestruktur genau das gleiche wie die vorherige vue-Anwendung

rrreee

Routing-KonfigurationrrreeeDie Hauptdatei main.jsist anders als zuvor. Die Hauptdatei ist die Fabrik, die für die Erstellung von vue verantwortlich ist. code>-Instanzen. Jede Anfrage erstellt eine unabhängige <code>vue-Instanz

rrreee🎜Schreiben Sie den Servereintrag src/entry-server.js🎜🎜Seine Aufgabe besteht darin, zu erstellen Vue Instanzen und spezifizieren Sie den ersten Bildschirm entsprechend der eingehenden URL🎜rrreee🎜Schreiben Sie den Client-Eingang entry-client.js🎜🎜Der Client-Eingang muss nur Erstellen Sie eine vue-Instanz und führen Sie die Montage durch. Dieser Schritt wird als Aktivierung bezeichnet -D🎜🎜Konfigurieren Sie vue.config.js🎜rrreee🎜Konfigurieren Sie das Skript und installieren Sie Abhängigkeiten🎜🎜npm i cross-env -D🎜 rrreee🎜Ausführen Verpackung: npm run build🎜🎜Ändern Sie abschließend die Hostdatei /public/index.html🎜rrreee

🎜 ist der Speicherort für den serverseitigen Rendering-Eintrag. Seien Sie nicht vorsichtig Es sieht gut aus, aber fügen Sie vor und nach Leerzeichen hinzu Factory-Funktion🎜rrreee 🎜Mount store in der Datei main.js🎜rrreee🎜Das serverseitige Rendering ist ein „Schnappschuss“ der Anwendung, wenn die Anwendung darauf angewiesen ist asynchrone Daten, bevor Sie mit dem Rendern beginnen, müssen Sie diese Daten vorab abrufen und analysieren. 🎜🎜Führen Sie eine einstufige Datenerfassung im store durch. 🎜rrreee🎜Datenvorabruflogik in der Komponente Vorabholen, entry-server.js🎜rrreee🎜Bevor der Client in der Anwendung gemountet wird, sollte store den Status entry-client.jserhalten >🎜rrreee 🎜Clientseitige Daten-Prefetch-Verarbeitung, main.js🎜rrreee🎜Ändern Sie die Server-Startdatei🎜rrreee

Zusammenfassung

• 🎜Die Verwendung von ssr existiert nicht im Singleton-Modus. Jede Benutzeranforderung erstellt eine neue vue-Instanz🎜🎜
• 🎜 Implementierungssr muss serverseitiges First-Screen-Rendering und clientseitige Aktivierung implementieren🎜🎜
• 🎜Serverseitige asynchrone Erfassung von Daten asyncData kann zunächst unterteilt werden -Screen asynchrone Erfassung und Erfassung von Schaltkomponenten🎜
  • Der erste Bildschirm ruft Daten asynchron ab, was während des serverseitigen Pre-Renderings abgeschlossen werden sollte🎜
  • Die Schaltkomponente wird über mixin eingemischt code> und die Datenerfassung wird im <code>beforeMount-Hook 🎜🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜vuejs-Tutorial🎜, 🎜Web-Frontend🎜)🎜 abgeschlossen

Das obige ist der detaillierte Inhalt vonWas ist SSR? Wie implementiert man serverseitiges SSR-Rendering in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!