Study Notes

服务端渲染（SSR）

概述

随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案，在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架，这类框架所构建的单页应用（SPA）具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷，其中主要涉及到以下两点：

首屏加载时间过长

与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML 来呈现内容，用户需要等待客户端 JS 解析执行完成才能看到页面，这就使得首屏加载时间变长，从而影响用户体验。
不利于 SEO

当搜索引擎爬取网站 HTML 文件时，单页应用的 HTML 没有内容，因为他它需要通过客户端 JavaScript 解析执行才能生成网页内容，而目前的主流的搜索引擎对于这一部分内容的抓取还不是很好。

为了解决这两个缺陷，业界借鉴了传统的服务端直出 HTML 方案，提出在服务器端执行前端框架（React/Vue/Angular）代码生成网页内容，然后将渲染好的网页内容返回给客户端，客户端只需要负责展示就可以了；

在这里插入图片描述

当然不仅仅如此，为了获得更好的用户体验，同时会在客户端将来自服务端渲染的内容激活为一个 SPA 应用，也就是说之后的页面内容交互都是通过客户端渲染处理。

在这里插入图片描述

这种方式简而言之就是：

通过服务端渲染首屏直出，解决首屏渲染慢以及不利于 SEO 问题
通过客户端渲染接管页面内容交互得到更好的用户体验

这种方式我们通常称之为现代化的服务端渲染，也叫同构渲染，所谓的同构指的就是服务端构建渲染 + 客户端构建渲染。同理，这种方式构建的应用称之为服务端渲染应用或者是同构应用。

什么是渲染？

我们这里所说的渲染指的是把（数据 + 模板）拼接到一起的这个事儿。

例如对于我们前端开发者来说最常见的一种场景就是：请求后端接口数据，然后将数据通过模板绑定语法绑定到页面中，最终呈现给用户。这个过程就是我们这里所指的渲染。

渲染本质其实就是字符串的解析替换，实现方式有很多种；但是我们这里要关注的并不是如何渲染，而是在哪里渲染的问题

传统的服务端渲染

最早期，Web 页面渲染都是在服务端完成的，即服务端运行过程中将所需的数据结合页面模板渲染为 HTML，响应给客户端浏览器。所以浏览器呈现出来的是直接包含数据内容的页面。

工作流程：

在这里插入图片描述

这种方式的代表性技术有：ASP、PHP、JSP，再到后来的一些相对高级一点的服务端框架配合一些模板引擎。

接下来我们来写一个 demo，来了解一下传统的服务端渲染

安装依赖

node http 服务

yarn add express cors -D
// 或者
npm i express cors -D

服务端模板引擎

yarn add art-template express-art-template -D
// 或者
npm i art-template express-art-template -D

服务端代码：

基本的 Web 服务
使用模板引擎
渲染一个页面
返回渲染好的页面

ssr/index.js

/*** @author Wuner* @date 2020/8/22 22:12* @description*/
const express = require('express');
const cors = require('cors');
const app = express();
const template = require('art-template');
const fs = require('fs');
// 动态获取本机ip
const getIPAddress = require('../../utils/getIPAddress');app.use(cors());const hostname = getIPAddress();
const port = 3000;const _products = {code: 200,message: 'success',data: [{id: 1,title: 'Apple iPad Pro',desc:'苹果 Apple iPad Pro 11英寸平板电脑 2020年新款(256G WLAN版/全面屏/A12Z/Face ID/MXDC2CH/A) 深空灰色',price: 7029.9,thumb:'http://img14.360buyimg.com/n5/s54x54_jfs/t1/93232/3/15628/251953/5e723c47E54d3aff9/9d083eaea3409b83.jpg',},{id: 2,title: 'HUAWEI Mate 30 Pro 5G',desc:'华为 HUAWEI Mate 30 Pro 5G 麒麟990 OLED环幕屏双4000万徕卡电影四摄8GB+256GB丹霞橙5G全网通游戏手机',price: 6399.0,thumb:'http://img14.360buyimg.com/n5/s54x54_jfs/t1/90139/34/1379/180822/5dbe8875E02dc2e95/c78c80a4116ee57d.jpg',},{id: 3,title: 'Alienware m17',desc:'外星人 Alienware m17 2020版 17.3英寸轻薄游戏本电脑(十代酷睿i7 16G 1TBSSD RTX2070 8G独显 300Hz)白',price: 20999.0,thumb:'https://img14.360buyimg.com/n5/s54x54_jfs/t1/142119/22/4704/50705/5f2cec4eE2e06b218/e50debd5955af768.jpg',},],
};app.use(express.json());app.get('/productsPage', (req, res) => {// 1. 得到模板内容const templateStr = fs.readFileSync('src/view/ssr/index.html', 'utf-8');// 2. 得到数据// 3. 渲染：数据 + 模板 = 完整结果const html = template.render(templateStr, _products);// 4. 把渲染结果发送给客户端res.send(html);
});app.listen(port, hostname, (val) => {console.log(`Server is running at http://${hostname}:${port}/`);
});

客户端代码：

ssr/index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>* {margin: 0;padding: 0;}ul li {display: flex;flex-wrap: wrap;margin: 10px 10px 0 10px;padding: 16px;border-radius: 10px;background-color: #f5f5f5;}img {width: 100px;height: auto;margin-right: 10px;}P {padding: 10px 0;}</style></head><body><ul>{{ each data }}<li><img src="{{ $value.thumb }}" alt="" /><div><p>{{ $value.title }}</p><p>￥{{ $value.price }}</p><p>{{ $value.desc }}</p></div></li>{{ /each }}</ul></body>
</html>

运行测试

启动服务
浏览器上输入，控制台输入的地址+productsPage(http://xxx:3000/productsPage)

node ssr/index.js

在这里插入图片描述

这也就是最早的网页渲染方式，也就是动态网站的核心工作步骤。在这样的一个工作过程中，因为页面中的内容不是固定的，它有一些动态的内容。

在今天看来，这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下，这种模式存在很多明显的不足：

应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力；
前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案；
由于内容都是在服务端动态生成的，所以服务端的压力较大；相比目前流行的 SPA 应用来说，用户体验一般；

但是不得不说，在网页应用并不复杂的情况下，这种方式也是可取的。

客户端渲染

传统的服务端渲染有很多问题，但是这些问题随着客户端 Ajax 技术的普及得到了有效的解决，Ajax 技术可以使得客户端动态获取数据变为可能，也就是说原本服务端渲染这件事儿也可以拿到客户端做了。

下面是基于客户端渲染的 SPA 应用的基本工作流程。

在这里插入图片描述

下面我们以一个 Vue.js 创建的单页面应用为例来了解一下这种方式的渲染过程。

ssr/index.js

/*** @author Wuner* @date 2020/8/22 22:12* @description*/
const express = require('express');
const cors = require('cors');
const app = express();
const template = require('art-template');
const fs = require('fs');
// 动态获取本机ip
const getIPAddress = require('../../utils/getIPAddress');app.use(cors());const hostname = getIPAddress();
const port = 3000;const _products = {code: 200,message: 'success',data: [{id: 1,title: 'Apple iPad Pro',desc:'苹果 Apple iPad Pro 11英寸平板电脑 2020年新款(256G WLAN版/全面屏/A12Z/Face ID/MXDC2CH/A) 深空灰色',price: 7029.9,thumb:'http://img14.360buyimg.com/n5/s54x54_jfs/t1/93232/3/15628/251953/5e723c47E54d3aff9/9d083eaea3409b83.jpg',},{id: 2,title: 'HUAWEI Mate 30 Pro 5G',desc:'华为 HUAWEI Mate 30 Pro 5G 麒麟990 OLED环幕屏双4000万徕卡电影四摄8GB+256GB丹霞橙5G全网通游戏手机',price: 6399.0,thumb:'http://img14.360buyimg.com/n5/s54x54_jfs/t1/90139/34/1379/180822/5dbe8875E02dc2e95/c78c80a4116ee57d.jpg',},{id: 3,title: 'Alienware m17',desc:'外星人 Alienware m17 2020版 17.3英寸轻薄游戏本电脑(十代酷睿i7 16G 1TBSSD RTX2070 8G独显 300Hz)白',price: 20999.0,thumb:'https://img14.360buyimg.com/n5/s54x54_jfs/t1/142119/22/4704/50705/5f2cec4eE2e06b218/e50debd5955af768.jpg',},],
};app.use(express.json());app.get('/productsPage', (req, res) => {// 1. 得到模板内容const templateStr = fs.readFileSync('src/view/ssr/index.html', 'utf-8');// 2. 得到数据// 3. 渲染：数据 + 模板 = 完整结果const html = template.render(templateStr, _products);// 4. 把渲染结果发送给客户端res.send(html);
});app.get('/products', (req, res) => {res.send(_products);
});app.listen(port, hostname, (val) => {console.log(`Server is running at http://${hostname}:${port}/`);
});

csr/index.vue

<template><div class="csr"><ul><li v-for="production in productions" :key="production.id"><img :src="production.thumb" alt="" /><div><p>{{ production.title }}</p><p>￥{{ production.price }}</p><p>{{ production.desc }}</p></div></li></ul></div>
</template><script>
export default {data() {return { productions: [] };},methods: {},async created() {this.productions = await this.$http.get(`http://${process.env.HOST}:3000/products`,);},mounted() {},computed: {},
};
</script>
<style scoped lang="less">
.csr {* {margin: 0;padding: 0;}ul li {display: flex;flex-wrap: wrap;margin: 10px 10px 0 10px;padding: 16px;border-radius: 10px;background-color: #f5f5f5;}img {width: 100px;height: auto;margin-right: 10px;}p {padding: 10px 0;}
}
</style>

通过这个示例可以了解到我们就可以把【数据处理】和【页面渲染】这两件事儿分开了，也就是【后端】负责数据处理，【前端】负责页面渲染，这种分离模式极大的提高了开发效率和可维护性。

而且这样一来，【前端】更为独立，也不再受限制于【后端】，它可以选择任意的技术方案或框架来处理页面渲染。

但是这种模式下，也会存在一些明显的不足，其中最主要的就是：

首屏渲染慢
- 客户端渲染时间
- 服务端渲染时间
- 从上述可以看出，客户端渲染时间远大于服务端渲染时间
- 因为 HTML 中没有内容，必须等到 JavaScript 加载并执行完成才能呈现页面内容。

SEO 问题：

模拟爬虫

/*** @author Wuner* @date 2020/8/23 1:15* @description*/
const http = require('http');http.get('http://192.168.0.100:8000/', (res) => {let data = '';res.on('data', (chunk) => {data += chunk;});res.on('end', () => {console.log('==============客户端日志开始=================' + '\n');console.log(data);console.log('==============客户端日志结束=================' + '\n');});
});http.get('http://192.168.0.100:3000/productsPage', (res) => {let data = '';res.on('data', (chunk) => {data += chunk;});res.on('end', () => {console.log('==============服务端日志开始=================' + '\n');console.log(data);console.log('==============服务端日志结束=================' + '\n');});
});

打印

==============客户端日志开始=================<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head><meta charset="utf-8"><title>template</title>
<link href="/css/app.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>==============客户端日志结束===============================服务端日志开始=================<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0}ul li {display: flex;flex-wrap: wrap;margin: 10px 10px 0 10px;padding: 16px;border-radius: 10px;background-color: #f5f5f5;}img {width: 100px;height: auto;margin-right: 10px;}P{padding: 10px 0;}</style>
</head>
<body>
<ul><li><img src="http://img14.360buyimg.com/n5/s54x54_jfs/t1/93232/3/15628/251953/5e723c47E54d3aff9/9d083eaea3409b83.jpg" alt=""><div><p>Apple iPad Pro</p><p>￥7029.9</p><p>苹果 Apple iPad Pro 11英寸平板电脑 2020年新款(256G WLAN版/全面屏/A12Z/Face ID/MXDC2CH/A) 深空灰色</p></div></li><li><img src="http://img14.360buyimg.com/n5/s54x54_jfs/t1/90139/34/1379/180822/5dbe8875E02dc2e95/c78c80a4116ee57d.jpg" alt=""><div><p>HUAWEI Mate 30 Pro 5G</p><p>￥6399</p><p>华为 HUAWEI Mate 30 Pro 5G 麒麟990 OLED环幕屏双4000万徕卡电影四摄8GB+256GB丹霞橙5G全网通游戏手机</p></div></li><li><img src="https://img14.360buyimg.com/n5/s54x54_jfs/t1/142119/22/4704/50705/5f2cec4eE2e06b218/e50debd5955af768.jpg" alt=""><div><p>Alienware m17</p><p>￥20999</p><p>外星人 Alienware m17 2020版 17.3英寸轻薄游戏本电脑(十代酷睿i7 16G 1TBSSD RTX2070 8G独显 300Hz)白</p></div></li></ul>
</body>
</html>==============服务端日志结束=================

上述日志打印可以看出，客户端首次 HTML 中没有内容，所以对于目前的搜索引擎爬虫来说，页面中没有任何有用的信息，自然无法提取关键词，进行索引了。

对于客户端渲染的 SPA 应用的问题有没有解决方案呢？

服务端渲染，严格来说是现代化的服务端渲染，也叫同构渲染

现代化的服务端渲染

客户端明显存在两个问题：

首屏渲染慢
不利于 SEO

我们只是把问题抛出来了，那有没有解决办法呢？

答案就是：服务端渲染。

也就是将客户端渲染的工作放到服务端渲染，这个问题不就解决了吗？

但是你们应该会有困惑，这不是又回到了服务端渲染的问题了么？

其实不然，虽说本质上确实是需要使用到传统的服务端渲染，但是严格来讲应该叫现代化的服务端渲染，也叫同构渲染(服务端渲染 + 客户端渲染)

为什么使用现代化的服务端渲染 (SSR)？

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
:::warning

请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

:::
更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言，服务器端渲染 (SSR) 至关重要。

:::tip

使用服务器端渲染 (SSR) 时还需要有一些权衡之处：

开发成本高。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。
涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

:::

在对你的应用程序使用服务器端渲染 (SSR) 之前，你应该问的第一个问题是，是否真的需要它。这主要取决于内容到达时间 (time-to-content) 对应用程序的重要程度。例如，如果你正在构建一个内部仪表盘，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染 (SSR) 将是一个小题大作之举。然而，内容到达时间 (time-to-content) 要求是绝对关键的指标，在这种情况下，服务器端渲染 (SSR) 可以帮助你实现最佳的初始加载性能。

事实上，很多网站是出于效益的考虑才启用服务端渲染，性能倒是在其次。假设 A 网站页面中有一个关键字叫“前端性能优化”，这个关键字是 JS 代码跑过一遍后添加到 HTML 页面中的。那么客户端渲染模式下，我们在搜索引擎搜索这个关键字，是找不到 A 网站的——搜索引擎只会查找现成的内容，不会帮你跑 JS 代码。A 网站的运营方见此情形，感到很头大：搜索引擎搜不出来，用户找不到我们，谁还会用我的网站呢？为了把“现成的内容”拿给搜索引擎看，A 网站不得不启用服务端渲染。但性能在其次，不代表性能不重要。

现代化服务端渲染框架

React 生态中的 Next.js
Vue 生态中的 Nuxt.js
Angular 生态中的 Angular Universal

下一篇——Nuxt.js

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Node.js模板引擎： Jade入门
Jade是Node.js的一个模板引擎，它借鉴了Haml的很多地方，所以语法上和Haml比较相近。并且，Jade也支持空格。 1、标签在Jade里，一行开头的任何文本都被默认解释成HTML标签。并且你只需要你写开始标签——注意：不需要加…...
2024/4/21 14:18:42
割双眼皮多久洗头发
...
2024/4/21 14:18:41
割双眼皮多久洗头
...
2024/4/21 14:18:41
割双眼皮多久全部恢复
...
2024/4/21 14:18:39
割双眼皮多久能消肿呢
...
2024/4/21 14:18:38
割双眼皮多久能平睡
...
2024/4/21 14:18:37
scrollingElement：在微信内置浏览器中的坑
最近在做页面保存状态时，由详情页跳转回列表页，恢复状态时，有很明显的等待时间。当初以为是恢复数据时，由于又去请求的数据造成的，结果是一个由“加载更多”的功能带来的坑。 “加载更多”的实现效果为：当…...
2024/4/21 14:18:36
微信小程序、公众号内嵌H5页面调用微信扫一扫
小程序内嵌H5调用微信扫一扫的功能，通过小程序webview来实现，具体方法与思路代码如下： 但是，小程序踩坑之路并没有结束。在公众号网页中通过配置APPID和appsecret可以正常调起微信扫一扫，但是，如何在小程序…...
2024/4/20 15:30:57
ionic3 微信授权登录
1、安装微信插件 ionic cordova plugin add cordova-plugin-wechat --variable wechatappidYOUR_WECHAT_APPID YOUR_WECHAT_APPID就是你申请的appid注意：在微信开放平台创建应用的时候，appid是你的安装包签名的md5的值去掉冒号小写，如果这个…...
2024/4/20 15:30:55
微信小程序开发系列七：微信小程序的页面跳转
微信小程序开发系列教程微信小程序开发系列一：微信小程序的申请和开发环境的搭建微信小程序开发系列二：微信小程序的视图设计微信小程序开发系列三：微信小程序的调试方法微信小程序开发系列四：微信小程序之控制器的初始化逻辑…...
2024/4/20 15:30:54
使用angular做微信内html5开发时碰到的两个坑
2019独角兽企业重金招聘Python工程师标准>>> 最近公司要做个微信web新项目，正好在看angular，就愉快的玩耍上了，用ui-router做路由控制，一开始偷懒没有去掉url内的#，不幸的碰到了两个微信js的坑。 1、微信支…...
2024/4/20 15:30:54
微信小程序按钮失效的几大原因
微信小程序按钮失效的几大原因（里面有大坑） 最近在学习小程序的开发，边学习边敲代码，发现设置了按钮事件后页面就是跳转不成功，也没有报错，先将页面跳转三种方式列出供大家参考： wx.navigateTo(…...
2024/4/27 8:34:59
割双眼皮多久抹芭克
...
2024/4/20 15:30:51
割双眼皮多久可以洗头
...
2024/4/20 11:47:12
割双眼皮多久可以跑步
...
2024/4/20 15:30:49
狂神说笔记——Vue 快速入门19
Vue 快速入门全文为Vue2.0版本学习笔记！！！3.0版本请参考文末。 1.前端核心分析 1.Vue概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可…...
2024/4/20 15:30:48
❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
《Vue前端基础框架集合从入门到高级》，小白也可学文章目录《Vue前端基础框架集合从入门到高级》，小白也可学❤️一、前端核心分析❤️1.1、概述❤️1.2、前端三要素❤️1.3、结构层（HTML）❤️1.4、表现层（CSS&#xf…...
2024/4/20 15:30:48
Vue快速入门（狂神）
文章目录1.第一个Vue程序1.1、什么是MVVM1.2、为什么要使用MVVM1.3、第一个vue程序2. 基础语法指令2.1、v-bind2.2、 v-if、v-else2.3、v-for2.4、v-on3.表单双向绑定，组件3.1、什么是双向数据绑定3.2、在表单中使用双向数据绑定3.3、什么是组件4.Axios异步通信4.1、…...
2024/4/20 15:30:46
Vue快速入门
Vue什么是Vue?官方文档永远是最好的老师:JavaScript框架部分讲解:UI框架:MVVM模式Vue概念总结:mvvm模式的优点我的第一个Vue程序(HTML实现)Vue基本逻辑语法Vue基础逻辑判断Vue绑定事件Vue双向绑定Vue组件讲解Axios异步通信计算属性(computed)插槽(重点)自定义事件内容分发第一…...
2024/4/20 15:30:45
割双眼皮多久可以侧睡
...
2024/4/21 14:18:36

服务端渲染（SSR）

Study Notes

服务端渲染（SSR）

概述

什么是渲染？

传统的服务端渲染

安装依赖

服务端代码：

客户端代码：

运行测试

客户端渲染

现代化的服务端渲染

为什么使用现代化的服务端渲染 (SSR)？

现代化服务端渲染框架

下一篇——Nuxt.js

相关文章

最新文章