Qu'est-ce que la RSS ? Comment implémenter le rendu côté serveur SSR dans vue ?

Qu'est-ce que la RSS ? L'article suivant vous présentera comment implémenter le rendu côté serveur SSR dans vue J'espère qu'il vous sera utile !

1. Qu'est-ce que SSR ? La technologie de traitement de page consistant à épisser la structure HTML de la page est envoyée au navigateur, puis le statut et les événements lui sont liés pour devenir un fichier. page entièrement interactive. [Recommandations associées : tutoriel vidéo vuejs]

Prenons un regardez d'abord Regardez l'historique de développement du Web en trois étapes : 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

• Rendu côté serveur traditionnel SSR
• Application SPA d'application monopage
• Rendu côté serveur SSR

Développement web traditionnel🎜

🎜Le contenu de la page Web est rendu côté serveur et transféré vers le navigateur en une seule fois🎜🎜🎜🎜Ouvrez la page pour afficher le code source et parcourir. Ce que le serveur obtient, c'est toute la structure dom🎜

🎜Application d'une seule page SPA🎜 h3>🎜L'application à page unique offre une excellente expérience utilisateur, ce qui la rend progressivement courante, le contenu de la page est rendu par JS. Cette méthode est appelée rendu côté client🎜🎜🎜🎜Ouvrez la page pour afficher le code source. Le navigateur uniquement obtient l'élément hôte #app et No content🎜

🎜Rendu côté serveur SSR🎜

🎜SSR solution, le backend restitue la structure dom complète du premier écran. Le contenu obtenu par le front-end comprend le premier écran et la structure spa complète. , il fonctionnera toujours en mode spa🎜🎜🎜🎜Après avoir lu le développement front-end, jetons un coup d'œil à Vue Explication officielle de SSR : 🎜

🎜Vue.js est un framework pour créer des applications clientes. Par défaut, les composants Vue peuvent être générés dans le navigateur pour générer du DOM et manipuler le DOM. Cependant, il est également possible de restituer les mêmes composants sous forme de chaînes HTML côté serveur, de les envoyer directement au navigateur, et enfin d'"activer" ces balises statiques en tant qu'application entièrement interactive sur le client 🎜🎜Vue.js rendu par le serveur L'application peut également être considérée comme « isomorphe » ou « universelle » dans le sens où la plupart du code de l'application peut s'exécuter à la fois sur le serveur et sur le client 🎜

🎜Nous avons conclu ce qui suit de l'explication porte-à-porte : 🎜

Vue SSR est un rendu amélioré côté serveur sur SPA

Pages rendues via Vue SSR , doit être activé sur le client pour obtenir une interaction

Vue SSR contiendra deux parties : le premier écran rendu par le serveur et le SPA qui contient l'interaction li>

🎜2. Ce qui est résolu🎜🎜🎜SSR résout principalement les deux problèmes suivants : 🎜

• seo : Structure HTML de la page d'exploration prioritaire des moteurs de recherche, lors de l'utilisation de ssr, le serveur a déjà généré du HTML associé à l'entreprise, ce qui est bénéfique pour seo
• Rendu du premier écran : les utilisateurs peuvent voir la page vue sans attendre que tous les js soient chargés sur la page (la pression vient sur le serveur, il faut donc peser ce qui doit être rendu côté serveur et lequel doit être rendu côté serveur) Remettez-le au client)

🎜Mais en utilisant SSR présente également les inconvénients suivants : 🎜

• 🎜Complexité : la complexité de l'ensemble du projet🎜
• 🎜Prise en charge de la bibliothèque, compatibilité du code🎜
• 🎜Problèmes de performances🎜
  • Chaque requête est la création de n instances, sinon ce sera une Pollution, la consommation deviendra très importante
  • Cache node serve , nginx pour déterminer si l'utilisateur actuel a expiré, sinon, mettez-le en cache, utilisez Juste le résultat.
  • Rétrograder : surveillez le cpu et l'utilisation excessive de la mémoire, puis spa et renvoyez un seul shell
🎜La charge du serveur augmente. Par rapport aux serveurs séparés front-end et back-end qui n'ont besoin que de fournir des ressources statiques, la charge du serveur est plus importante, nous devons donc l'utiliser avec prudence🎜

🎜Donc, lorsque nous choisissons de l'utiliserSSR, nous devons soigneusement nous poser ces questions : 🎜

• 🎜Est-ce que le page qui nécessite du SEO Quelques-uns seulement, peuvent-ils être implémentés à l'aide du pré-rendu (Plugin Prerender SPA)🎜
• 🎜Si la logique de demande et de réponse du premier écran est complexe, et si le retour des données est volumineux et lent🎜

🎜3. Comment implémenter 🎜🎜🎜Pour le développement isomorphe, nous utilisons toujours webpack code> pour le packaging. Nous devons résoudre deux problèmes : le rendu du premier écran côté serveur et l'activation du client🎜.<p>Ici, vous devez générer un fichier <code>bundle serveur pour le rendu du premier écran côté serveur et un fichier bundle client pour l'activation du clientbundle文件用于服务端首屏渲染和一个客户端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
  
Sauf pour deux entrées différentes, la structure du code est La structure est exactement le même que l'application vue précédente

rrreee

Configuration du routagerrreeeLe fichier principal main.jsest différent d'avant. Le fichier principal est l'usine responsable de la création de vue. instances. Chaque requête créera une instance vue indépendante

rrreee🎜Écrivez l'entrée du serveur src/entry-server.js🎜🎜Sa tâche est de créer Vue Instance et précisez le premier écran en fonction de l'url entrante🎜rrreee🎜Ecrivez l'entrée client entry-client.js🎜🎜L'entrée client uniquement doit créer une instance vue et effectuer le montage. Cette étape est appelée activation🎜rrreee🎜Configurer le webpack🎜🎜Installer les dépendances🎜🎜npm install webpack-node-externals lodash. .merge -D🎜🎜Configurer vue.config.js🎜rrreee🎜Configurer le script et installer les dépendances🎜🎜npm i cross-env -D🎜 rrreee 🎜Exécuter le packaging : npm run build🎜🎜Modifiez enfin le fichier hôte /public/index.html🎜rrreee

🎜 est l'emplacement d'entrée du rendu côté serveur, soit attention à ne pas le faire, ça a l'air bien mais ajoutez des espaces avant et après 🎜

🎜Installez vuex🎜🎜npm install -S vuex🎜🎜Créez vuex code> fonction d'usine🎜rrreee 🎜Montez <code>store dans le fichier main.js🎜rrreee🎜Le rendu côté serveur est un "instantané" de l'application Si l'application dépend. sur certaines données asynchrones, puis dans Avant de commencer le rendu, vous devez pré-extraire et analyser ces données 🎜🎜Effectuer une acquisition de données en une étape dans le store🎜rrreee🎜Logique de prélecture des données dans le composant🎜rrreee🎜Serveur- côté prélecture des données, Entry-server.js🎜rrreee🎜Avant que le client ne soit monté sur l'application, store devrait obtenir le statut, entry-client.js🎜rrreee 🎜Traitement de prélecture des données côté client, <code>main.js🎜rrreee🎜Modifier le fichier de démarrage du serveur🎜rrreee

Résumé

• 🎜L'utilisation de ssr n'existe pas en mode singleton Chaque requête utilisateur créera une nouvelle instance vue🎜🎜
🎜implémentationssr doit implémenter le rendu sur le premier écran côté serveur et l'activation côté client🎜🎜
• 🎜L'acquisition asynchrone de données côté serveurasyncData peut être divisée en acquisition asynchrone sur le premier écran et en acquisition de composants de commutation🎜
  • Le premier écran obtient les données de manière asynchrone, qui doivent être complétées lors du pré-rendu côté serveur🎜
  • Le composant de commutation est mélangé via mixin , et l'acquisition des données est complétée dans le hook beforeMount 🎜🎜🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜tutoriel vuejs🎜, 🎜front-end web🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!