【Vue面试题二十六】、SSR解决了什么问题？有做过SSR吗？你是怎么做的？

文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。

面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？
在这里插入图片描述

一、是什么

Server-Side Rendering 我们称其为SSR，意为服务端渲染

指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程

先来看看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前，我们需要慎重问问自己这些问题：

1、需要SEO的页面是否只是少数几个，这些是否可以使用预渲染（Prerender SPA Plugin）实现
2、首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢

三、如何实现

对于同构开发，我们依然使用webpack打包，我们要解决两个问题：服务端首屏渲染和客户端激活

这里需要生成一个服务器bundle文件用于服务端首屏渲染和一个客户端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() : newVueSSRClientPlugin()]}),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

定义创建脚本package.json

"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 lang="en"><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的actiongetCount({ 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__`，并注⼊ HTMLcontext.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/#runinnewcontexttemplate: 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钩子完成数据获取

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/106198.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

回归预测 | MATLAB实现IBES-ELM基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测（多指标，多图）

回归预测 | MATLAB实现IBES-ELM基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测（多指标，多图）

回归预测 | MATLAB实现IBES-ELM 基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现IBES-ELM 基于改进的秃鹰搜索优化算法优化极限学习机的数据回归预测&#xff08;多指标&#xff0c;多图&a…
阅读更多...
变分自动编码器 （VAE）02/2 PyTorch 教程

变分自动编码器 （VAE）02/2 PyTorch 教程

一、说明 在自动编码器中&#xff0c;来自输入数据的信息被映射到固定的潜在表示中。当我们旨在训练模型以生成确定性预测时&#xff0c;这特别有用。相比之下&#xff0c;变分自动编码器&#xff08;VAE&#xff09;将输入数据转换为变分表示向量&#xff08;顾名思义&#xf…
阅读更多...
服务器崩溃前的数据拯救实践

服务器崩溃前的数据拯救实践

前言 在服务器的VMWARE ESXi系统环境中&#xff0c;我们经常需要创建虚拟机来运行各种应用程序。然而&#xff0c;服务器如果偶尔出现自动重启以及紫屏报错的问题&#xff0c;说明服务器内部出现了故障&#xff0c;一般情况下重启机器能够解决问题&#xff0c;但时间一长&…
阅读更多...
[23] IPDreamer: Appearance-Controllable 3D Object Generation with Image Prompts

[23] IPDreamer: Appearance-Controllable 3D Object Generation with Image Prompts

pdf Text-to-3D任务中&#xff0c;对3D模型外观的控制不强&#xff0c;本文提出IPDreamer来解决该问题。在NeRF Training阶段&#xff0c;IPDreamer根据文本用ControlNet生成参考图&#xff0c;并将参考图作为Zero 1-to-3的控制条件&#xff0c;用基于Zero 1-to-3的SDS损失生成…
阅读更多...
网络类型与数据链路层协议

网络类型与数据链路层协议

目录 整体大纲图 一、网络类型 二、数据链路层协议 1、MA网络 2、P2P网络 1&#xff09;HDLC协议 2&#xff09;PPP协议 a、特点及其数据帧封装结构 b、组成及其工作过程 c、ppp会话流程及ppp验证 d、ppp配置命令 f、ppp mp 整体大纲图 一、网络类型 二、数据链路层…
阅读更多...
系统文件IO、文件描述符fd、重定向、文件系统、动态库和静态库

系统文件IO、文件描述符fd、重定向、文件系统、动态库和静态库

目录 C文件接口系统文件I/O系统调用和库函数文件描述符0 & 1 & 2FILE和fd的关系文件描述符的分配规则 重定向重定向的本质输出重定向输入重定向追加重定向 dup2函数 FILE理解文件系统了解磁盘的物理结构逻辑抽象文件系统文件系统的图解和解析通过文件系统来理解ls -al通…
阅读更多...
MySQL 3 环境搭建 MySQL 5.7版本的安装、配置

MySQL 3 环境搭建 MySQL 5.7版本的安装、配置

MySQL5.7.43官网下载地址 MySQL :: Download MySQL Community Server 这里选5.7.43&#xff0c;Windows版本&#xff0c;然后点击Go to Download Page&#xff0c;下载msi安装包的版本 MSI安装包版本比ZIP压缩包版本的安装过程要简单的多&#xff0c;过程更加清楚直观&#x…
阅读更多...
MATLAB——径向基神经网络预测程序

MATLAB——径向基神经网络预测程序

欢迎关注公众号“电击小子程高兴的MATLAB小屋” %% 学习目标&#xff1a;径向基神经网络 %% 可以以任意精度逼近任意连续函数 clear all; close all; P1:10; T[2.523 2.434 3.356 4.115 5.834 6.967 7.098 8.315 9.387 9.928]; netnewrbe(P,T,2); %建立精确的径向基…
阅读更多...
KMP 算法 + 详细笔记

KMP 算法 + 详细笔记

给两个字符串&#xff0c;T"AAAAAAAAB"&#xff0c;P"AAAAB"; 可以暴力匹配&#xff0c;但是太费时和效率不太好。于是KMP问世&#xff0c;我们一起来探究一下吧&#xff01;&#xff01;&#xff01; &#xff08;一&#xff09;最长公共前后缀 D[i] p[…
阅读更多...
【C/C++数据结构 - 2】：稳定性与优化揭秘，揭开插入排序、希尔排序和快速排序的神秘面纱！

【C/C++数据结构 - 2】：稳定性与优化揭秘，揭开插入排序、希尔排序和快速排序的神秘面纱！

文章目录 排序的稳定性插入排序插入排序的优化 希尔排序快速排序 排序的稳定性 稳定排序&#xff1a;排序前2个相等的数在序列中的前后位置顺序和排序后它们2个的前后位置顺序相同。&#xff08;比如&#xff1a;冒泡、插入、基数、归并&#xff09; 非稳定排序&#xff1a;排…
阅读更多...
进化算法------微生物进化算法（MGA）

进化算法------微生物进化算法（MGA）

前言 该文章写在GA算法之后&#xff1a;GA算法 遗传算法 (GA)的问题在于没有有效保留好的父母 (Elitism), 让好的父母不会消失掉. Microbial GA (后面统称 MGA) 就是一个很好的保留 Elitism 的算法. 一句话来概括: 在袋子里抽两个球, 对比两个球, 把球大的放回袋子里, 把球小…
阅读更多...
ARMv5架构对齐访问异常问题

ARMv5架构对齐访问异常问题

strh非对齐访问 在ARMv5架构中&#xff0c;对于strh指令&#xff08;Store Halfword&#xff09;&#xff0c;通常是要求对地址进行对齐访问的。ARMv5架构对于半字&#xff08;Halfword&#xff09;的存储操作有对齐要求&#xff0c;即地址必须是2的倍数。 如果尝试使用strh指…
阅读更多...
vue3 状态管理pinia

vue3 状态管理pinia

1. 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 &#xff0c;是 Vuex 状态管理工具的替代品 特点优势: 提供更加简单的API(去掉了mutation)提供符合组合式风格的API(和Vue3新语法统一)去掉modules的概念,每一个store都是一个独立的模块配合TypeScript更加友好,提供可靠的…
阅读更多...
网站的常见攻击与防护方法

网站的常见攻击与防护方法

在互联网时代&#xff0c;几乎每个网站都存在着潜在的安全威胁。这些威胁可能来自人为失误&#xff0c;也可能源自网络犯罪团伙所发起的复杂攻击。无论攻击的本质如何&#xff0c;网络攻击者的主要动机通常是谋求经济利益。这意味着无论您经营的是电子商务项目还是小型商业网站…
阅读更多...
【Redis】Set集合相关的命令

【Redis】Set集合相关的命令

目录 命令SADDSMEMBERSSISMEMBERSCARDSPOPSMOVESREMSINTERSINTERSTORESUNIONSUNIONSTORESDIFFSDIFFSTORE 命令 SADD 将⼀个或者多个元素添加到set中。注意&#xff0c;重复的元素⽆法添加到set中。 SADD key member [member ...]SMEMBERS 获取⼀个set中的所有元素&#xff0…
阅读更多...
④. GPT错误：导入import pandas as pd库，存储输入路径图片信息存储错误

④. GPT错误：导入import pandas as pd库，存储输入路径图片信息存储错误

꧂ 问题最初꧁ 用 import pandas as pd 可是你没有打印各种信息input输入图片路径 print图片尺寸 大小 长宽高 有颜色占比>0.001的按照大小排序将打印信息存储excel表格文件名 表格路径 图片大小 尺寸 颜色类型 占比信息input输入的是文件就处理文件 是文件夹&#x1f4c…
阅读更多...
数据结构与算法—单链表

数据结构与算法—单链表

目录 一、链表 1、链表的概念及结构 2、分类 二、实现单向链表 1、声明链表结构体 2、输出 3、头插&尾插 4、头删尾删 5、查找 6、指定位置插入 7、删除指定节点 8、删除指定节点的后一个节点 9、单链表的销毁 完整版 LList.h LList.c text.c 一、链表 …
阅读更多...
BI工具：让数据分析井然有序一望而知

BI工具：让数据分析井然有序一望而知

BI&#xff08;Business Intelligence&#xff09;工具是一类专门用于数据分析和决策支持的软件工具。 它们能够将企业内部和外部的数据进行整合、处理和可视化&#xff0c;帮助用户从海量数据中获取有价值的见解和洞察&#xff0c;并以直观、易懂的方式展示给决策者和相关人员…
阅读更多...
ios app开发环境搭建

ios app开发环境搭建

Xcode是Apple iOS的应用市场app store移动应用的开发工具&#xff0c;支持不同设备、不同应用场景的开发&#xff0c;本文主要描述xcode开发工具开发环境的搭建。 如上所示&#xff0c;在macos中&#xff0c;使用app store安装xcode开发工具 如上所示&#xff0c;在macos中&…
阅读更多...
【网络协议】聊聊ifconfig

【网络协议】聊聊ifconfig

我们知道在linux是ifconfig查看ip地址&#xff0c;但是ip addr也可以查看 IP 地址是一个网卡在网络世界的通讯地址&#xff0c;相当于我们现实世界的门牌号码。 从IP地址的划分来看&#xff0c;C类地址只可以容纳254个&#xff0c;而B类6W多&#xff0c;那么又没有一种折中的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023