服务端渲染的探索与实践

news/2024/3/19 10:44:45/文章来源:https://www.cnblogs.com/zaisanshuiyifang/p/16635951.html

服务端渲染(SSR)近两年炒得很火热,相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”(服务端渲染的运行机制)、“为什么”(服务端渲染解决了什么性能问题 )、“怎么做”(服务端渲染的应用实例与使用场景)这三个点,对服务端渲染进行探索。

服务端渲染是一个相对的概念,它的对立面是“客户端渲染”。在运行机制解析这部分,我们会借力客户端渲染的概念,来帮大家理解服务端渲染的工作方式。基于对工作方式的了解,再去深挖它的原理与优势。

任何知识点都不是“一座孤岛”,服务端渲染的实践往往与当下流行的前端技术(譬如 Vue,React,Redux 等)紧密结合。本节下半场将以 React 和 Vue 下的服务端渲染实现为例,为大家呈现一个完整的 SSR 实现过程。

服务端渲染的运行机制


相对于服务端渲染,同学们普遍对客户端渲染接受度更高一些,所以我们先从大家喜闻乐见的客户端渲染说起。

客户端渲染

客户端渲染模式下,服务端会把渲染需要的静态文件发送给客户端,客户端加载过来之后,自己在浏览器里跑一遍 JS,根据 JS 的运行结果,生成相应的 DOM。这种特性使得客户端渲染的源代码总是特别简洁,往往是这个德行:

<!doctype html>
<html><head><title>我是客户端渲染的页面</title></head><body><div id='root'></div><script src='index.js'></script></body>
</html>

根节点下到底是什么内容呢?你不知道,我不知道,只有浏览器把 index.js 跑过一遍后才知道,这就是典型的客户端渲染。
页面上呈现的内容,你在 html 源文件里里找不到——这正是它的特点。

服务端渲染

服务端渲染的模式下,当用户第一次请求页面时,由服务器把需要的组件或页面渲染成 HTML 字符串,然后把它返回给客户端。客户端拿到手的,是可以直接渲染然后呈现给用户的 HTML 内容,不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。

使用服务端渲染的网站,可以说是“所见即所得”,页面上呈现的内容,我们在 html 源文件里也能找到。

比如知乎就是典型的服务端渲染案例:

zhihu.com 返回的 HTML 文件已经是可以直接进行渲染的内容了。

服务端渲染解决了什么性能问题


事实上,很多网站是出于效益的考虑才启用服务端渲染,性能倒是在其次。

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

但性能在其次,不代表性能不重要。服务端渲染解决了一个非常关键的性能问题——首屏加载速度过慢。在客户端渲染模式下,我们除了加载 HTML,还要等渲染所需的这部分 JS 加载完,之后还得把这部分 JS 在浏览器上再跑一遍。这一切都是发生在用户点击了我们的链接之后的事情,在这个过程结束之前,用户始终见不到我们网页的庐山真面目,也就是说用户一直在等!相比之下,服务端渲染模式下,服务器给到客户端的已经是一个直接可以拿来呈现给用户的网页,中间环节早在服务端就帮我们做掉了,用户岂不“美滋滋”?

服务端渲染的应用实例


下面我们先来看一下在一个 React 项目里,服务端渲染是怎么实现的。本例中,我们使用 Express 搭建后端服务。

项目中有一个叫做 VDom 的 React 组件,它的内容如下。

VDom.js:

mport React from 'react'const VDom = () => {return <div>我是一个被渲染为真实DOM的虚拟DOM</div>
}export default VDom

在服务端的入口文件中,我引入这个组件,对它进行渲染:

import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import VDom from './VDom'// 创建一个express应用
const app = express()
// renderToString 是把虚拟DOM转化为真实DOM的关键方法
const RDom = renderToString(<VDom />)
// 编写HTML模板,插入转化后的真实DOM内容
const Page = `<html><head><title>test</title></head><body><span>服务端渲染出了真实DOM:  </span>${RDom}</body></html>`// 配置HTML内容对应的路由
app.get('/index', function(req, res) {res.send(Page)
})// 配置端口号
const server = app.listen(8000)

根据我们的路由配置,当我访问 http://localhost:8000/index 时,就可以呈现出服务端渲染的结果了:

我们可以看到,VDom 组件已经被 renderToString 转化为了一个内容为

我是一个被渲染为真实DOM的虚拟DOM
的字符串,这个字符串被插入 HTML 代码,成为了真实 DOM 树的一部分。

那么 Vue 是如何实现服务端渲染的呢?

其实是一个套路,我这里基于 Vue SSR 指南 中官方给出的例子为大家讲解 Vue 中的实现思路(思路见注释)。

该示例直接将 Vue 实例整合进了服务端的入口文件中:

const Vue = require('vue')
// 创建一个express应用
const server = require('express')()
// 提取出renderer实例
const renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => {// 编写Vue实例(虚拟DOM节点)const app = new Vue({data: {url: req.url},// 编写模板HTML的内容template: `<div>访问的 URL 是: {{ url }}</div>`})// renderToString 是把Vue实例转化为真实DOM的关键方法renderer.renderToString(app, (err, html) => {if (err) {res.status(500).end('Internal Server Error')return}// 把渲染出来的真实DOM字符串插入HTML模板中res.end(`<!DOCTYPE html><html lang="en"><head><title>Hello</title></head><body>${html}</body></html>`)})
})server.listen(8080)

大家对比一下 React 项目中的注释内容,是不是发现这两段代码从本质上来说区别不大呢?

以上两个小🌰,为大家演示了基本的服务端渲染实现流程。

实际项目比这些复杂很多,但万变不离其宗。强调的只有两点:一是这个 renderToString() 方法;二是把转化结果“塞”进模板里的这一步。这两个操作是服务端渲染的灵魂操作。在虚拟 DOM“横行”的当下,服务端渲染不再是早年 JSP 里简单粗暴的字符串拼接过程,它还要求这一端要具备将虚拟 DOM 转化为真实 DOM 的能力。与其说是“把 JS 在服务器上先跑一遍”,不如说是“把 Vue、React 等框架代码先在 Node 上跑一遍”。

服务端渲染的应用场景


打眼一看,这个服务端渲染给浏览器省了这么多事儿,性能肯定是质的飞跃啊!喜闻乐见!但是大家打开自己经常访问的那些网页看一看,会发现仍然有许多网站压根儿不用服务端渲染——看来这个东西也不是万能的。

根据我们前面的描述,不难看出,服务端渲染本质上是本该浏览器做的事情,分担给服务器去做。这样当资源抵达浏览器时,它呈现的速度就快了。乍一看好像很合理:浏览器性能毕竟有限,服务器多牛逼!能者多劳,就该让服务器多干点活!

但仔细想想,在这个网民遍地的时代,几乎有多少个用户就有多少台浏览器。用户拥有的浏览器总量多到数不清,那么一个公司的服务器又有多少台呢?我们把这么多台浏览器的渲染压力集中起来,分散给相比之下数量并不多的服务器,服务器肯定是承受不住的。

这样分析下来,服务端渲染也并非万全之策。在实践中,我一般会建议大家先忘记服务端渲染这个事情——服务器稀少而宝贵,但首屏渲染体验和 SEO 的优化方案却很多——我们最好先把能用的低成本“大招”都用完。除非网页对性能要求太高了,以至于所有的招式都用完了,性能表现还是不尽人意,这时候我们就可以考虑向老板多申请几台服务器,把服务端渲染搞起来了~

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

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

相关文章

GOM引擎登录器的研究,逆向技术在这款GOM20151108引擎上是一个大舞台

最近遇到一个逆向类课题&#xff0c;是关于GOM20151108版本对应登录器研究。刚接触传奇的时候是2002年&#xff0c;那时候网吧玩SF&#xff0c;都是手动用IP直接连接&#xff0c;当时的一款 联创传奇 很好玩&#xff0c;有传送戒子&#xff0c;木域戒指&#xff0c;土域戒指&am…

不会 Vue,但不影响我学 diff 算法

前言 现在社会各行各业大都面临着寒冬&#xff0c;互联网行业最近还出现了裁员潮&#xff0c;导致前端是越来越卷&#xff0c;普通学校的应届生不仅要跟985、211毕业的学生以及研究生进行竞争&#xff0c;甚至还需要和最近刚被裁的、有了几年工作经验的程序员竞争&#xff0c;…

page.json

uni-app需要给page.json文件需要进行配置路由,否则会不报错,也跳转不过去

【数模/启发式算法】蚁群算法

文章目录简介符号说明核心思想流程图文章使用到的测试函数基本步骤蚁群算法代码简介 蚁群算法是一种用来寻找优化路径的概率型算法。它由Marco Dorigo于1992年在他的博士论文中提出&#xff0c;其灵感来源于蚂蚁在寻找食物过程中发现路径的行为。 这种算法具有分布计算、信息正…

Arduino播放声音

玩软件有点虚无&#xff0c;没有实际东西&#xff0c;所以接下来要体验下硬件与软件结合。 1 Arduino Arduino是一种包含硬件&#xff08;各种型号的Arduino板&#xff09;和软件&#xff08;Arduino IDE&#xff09;的开源电子平台。硬件部分是可以用来做电路连接的Arduino电…

小白学习Java第四十三天

Git概述 &#xff08;一&#xff09;什么是Git Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。版本控制是指对软件开发过程中各种程序代码、配置文件及说明文档等文件变更的管理&#xff0c;是软件配置管理的核心思想之一…

设计模式学习笔记(五) - 观察者模式 Observer

目录 观察者模式 Observer 一、背景描述 Version 1 (面向过程) Version 2 (面向对象) Version 3 (单个观察者) Version 4 (多个观察者) Version 5 (分离观察者与被观察者) 二、不同事件下的观察者模式 三、事件本身也可以形成继承体系 四、观察者常用场景 观察者模式…

Selenium基础 — 鼠标操作

1、鼠标事件介绍 前面例子中我们已经学习到可以用click()来模拟鼠标的单击操作&#xff0c;而我们在实际的web产品测试中发现&#xff0c;有关鼠标的操作&#xff0c;不单单只有单击&#xff0c;有时候还要用到右击&#xff0c;双击&#xff0c;拖动等操作&#xff0c;这些操作…

【Nginx】认识与基本使用 Nginx 实现反向代理、配置负载均衡

文章目录1. Nginx 概述1.1 Nginx 介绍1.2 Nginx 下载和安装1.3 Nginx 目录结构2. Nginx 命令3. Nginx 配置文件结构4. Nginx 具体应用4.1 部署静态资源4.2 反向代理4.2.1 介绍4.2.2 配置反向代理4.3 负载均衡4.3.1 介绍4.3.2 配置负载均衡4.3.3 负载均衡策略1. Nginx 概述 1.1…

Ubuntu开机界面出现“error found when loading /root/.profile”

原因 今天一开始按照一篇文章&#xff0c;想把普通用户的权限提高到最高权限&#xff0c;修改了**/etc/passwd**文件&#xff0c;然后重启&#xff0c;发现之前的用户进不去了&#xff0c;一开机就出现如下信息 解决方法 1、重启虚拟机进入recovery模式&#xff08;长按shi…

计算机网络-第一章 | 王道考研

目录 一、基本介绍 定义 功能 组成 分类 标准化工作 标准的分类 标准化工作相关组织 二、性能指标 ※ 速率 带宽 ※吞吐量 时延 时延带宽积 往返时延RTT 利用率 三、分层结构 ※ 分层基本规则 正式认识分层 7层OSI参考模型 怎么来的 怎么分的 怎么传的…

<特殊类设计与单例模式>——《C++高阶》

目录 1.请设计一个类&#xff0c;不能被拷贝 2. 请设计一个类&#xff0c;只能在堆上创建对象 3. 请设计一个类&#xff0c;只能在栈上创建对象 4. 请设计一个类&#xff0c;不能被继承 5. 请设计一个类&#xff0c;只能创建一个对象(单例模式) 后记&#xff1a;●由于…

GD32F307VC+WIN10+VSCODE+GCC+JLINK环境build

为了构建Cortex M系列单片机免费开源的开发环境&#xff0c;网络上了解来看VSCODEGCCJLINK是一套比较高效的组合方式&#xff0c;下面记录环境搭建的流程。 我这边的PC环境为 WIN10专业版64bit。 工具准备 1. arm-none-eabi-gcc下载及安装 官网下载链接&#xff1a;Downloa…

c++数据结构:数组和向量

线性表&#xff1a; 在数据元素的非空有限集中 存在唯一的一个被叫做“第一个”的数据元素存在唯一的一个被叫做“最后一个”的数据元素除第一个之外&#xff0c;集合中的每个数据元素均只有一个前驱除最后一个之外&#xff0c;每个集合元素均只有一个后继数据结构中线性结构指…

文字识别检测入门(1)

CTPN 优点&#xff1a;对水平文字检测效果超级好 缺点&#xff1a;对扭曲的文字不好 RRPN 在faster的基础上改进 RPN改为RRPN ROI pooling改进为RROI pooling 能解决旋转&#xff0c;但是解决不了弯曲的曲面问题 EAST Anchor free 特征合并&#xff0c;检测不同尺度文本 检测各…

刷爆leetcode第三期 0007~0010

刷爆leetcode第三期 0007~0010 题目一 反转链表解法一解法二题目二 链表的中间节点题目三 链表的倒数第K个节点题目四 合并两个有序链表题目一 反转链表 解法一 给定单链表的头节点 head &#xff0c;请反转链表&#xff0c;并返回反转后的链表的头节点。 示例 1&#xff1a…

python与人工智能:线性回归和逻辑回归

线性回归 线性回归是利用数理统计中回归分析&#xff0c;来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法&#xff0c;运用 十分广泛。梯度下降&#xff1f; 梯度下降法的基本思想可以类比为一个下山的过程。 假设这样一个场景&#xff1a;一个人被困在山上&a…

零拷贝总结

数据交互模式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dqLJVb5U-1665401648551)(en-resource://database/1074:1)] 读数据过程&#xff1a; 应用程序要读取磁盘数据&#xff0c;调用 read()函数从而实现用户态切换内核态&#xff0c;这是第 …

论文/机器学习笔记:SENet (Squeeze-and-Excitation Networks)

Image 2017 挑战赛夺冠paper 1 motivation 希望显式地建模特征通道&#xff08;channel&#xff09;之间的相互依赖关系 通过学习的方式来自动获取到每个特征通道的重要程度依照这个重要程度去提升有用的特征并抑制对当前任务用处不大的特征 2 模型 给定一个输入 x&#xff…

利用phpstudy导入mysql文件

1.创建mysql文件 mysql 常用命令&#xff1a; 打开mysql: mysql -u root -p 查看数据库&#xff1a; show databases; 创建 数据库: create database baseName (数据库名称) 使用数据库&#xff1a; use baseName(数据库名称) 显示表&#xff1a;show tables; 创建表&#xff…