服务端渲染与客户端渲染详解（vue）

1、客户端请求

（1）用户在浏览器输入请求的地址例如：172.0.0.1:8080 到服务器

服务器接受到客户端的请求拿到一个没有被数据渲染的空页面

（2）客户端拿到服务端的空字符串页面，然后从上往下开始执行里面的代码，当执行到script中有请求或者渲染等代码时，就会对服务器再次发出请求
（3）服务端接收到客户端的第二次请求，就把响应的数据发送给客户端，然后客户端再进行渲染

在客户端渲染中，客户端至少要对服务端发送两次请求。

优点:
(1) 前后端分离，开发效率高。
(2) 用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。
缺点:
(3) 前端响应速度慢，特别是首屏。
(4) 不利于SEO

2、服务端渲染
（1）客户端只发送一次请求，服务端直接返回给客户端一个被渲染好的页面

服务器里面有页面＋数据
读取到index.html,在客户端请求之前将页面渲染完成，直接将渲染结果返回个客户端

优点:

(1) 不占用前端的资源,前端耗时少,尤其是移动端，也可以更省电。
(2) 有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息
（客户端通过AJAX获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持js和通过ajax获取数据。那就更不用提SEO）
(3) 使用服务器页面缓存，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效。
缺点:
(4) 不利于前后端分离，开发效率低。
(5) 占用服务

1、客户端渲染需要对服务端进行两次请求，响应的开销较大，而服务端渲染只需要客户端对服务端进行一次请求
2、如何查看一个网页是客户端渲染还是服务端渲染：可以通过右键查看源代码的形式
客户端渲染: 右击查看源代码找不到内容
服务端渲染：是可以在源代码中找到内容的
4、网站一般都是用客户端渲染和服务端渲染结合的形式（结合不是指一个页面用两种渲染方式结合，而是指同构渲染）
5、商品的商品列表采用的是服务端渲染，目的是为了SEO搜索引擎优化，而他的商品评论为了用户体验，用户体验更好，就采用客户端渲染的方式
6、服务端渲染可以被爬虫抓取到，客户端渲染爬虫抓取不到
7.服务端渲染搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,如果你的应用程序需要初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。

SSR 服务端渲染网页内容由服务端生成首屏时间短有利于seo
CSR 客户端渲染 vue、react框架提供的spa都是客户端渲染首屏渲染时间长不利于seo（vue提供构建单页面应用的方法，但你也可以用基础的vue框架去做服务端渲染）
如：

//导入vue包和express包进行服务端渲染
//app.js文件  是在后台的文件
const Vue = require('vue')  //导入vue
const server = require('express')()   //导入expressconst renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => {const app = new Vue({data: {url: req.url},template: `<div>访问的 URL 是：{{ url }}</div>`,})renderer.renderToString(app, (err, html) => {if (err) throw errres.send(html)})
})server.listen(8888,() => console.log(`Example app listening on port 8888!`))

同构的本质：（基于React、Vue等框架，客户端渲染和服务器端渲染的结合）
同一套vue代码在服务端执行一次，在客户端再执行一次
服务端渲染解决了首屏显示快客户端渲染是需要把事件、响应式特性等vue经典的特性都绑回去，这样我们既可以使用vue的开发模式又可以享受两种渲染方式的优势（引入同构的概念是为了让我们可以继续使用vue的特性）

Nuxt.js框架：
nuxt.js是一套使用vue框架开发应用的服务端渲染框架，提供了开箱即用的功能，可以为我们快速构建同时使用服务端渲染和客户端渲染的开发环境

同构渲染的流程：
1.客户端请求一个地址走到服务端；
2.服务端通过接口服务查询页面所需数据，并返回到服务端；
3.服务端渲染页面以及生成客户端SPA脚本；
4.返回渲染好的页面内容和客户端的SPA脚本给客户端，也就是html；
5.客户端呈现服务端返回的html；
6.客户端通过页面中的脚本激活为SPA应用；
7.客户端渲染页面的交互逻辑

前端渲染和后端渲染路线：
前端渲染路线：
请求一个HTML
服务端返回一个HTML
浏览器下载html里面的JS/CSS文件
等待JS文件下载完成
等待JS加载并初始化完成
JS代码终于可以运行，由JS代码向后端请求数据(ajax/fetch)
等待后端数据返回
客户端从无到完整地，把数据渲染为响应页面

后端渲染路线：（web2.0动态页面）
请求一个HTML
服务端请求数据(内网请求快) --操作数据库而已
服务器初始渲染(服务端性能，较快）
服务端返回已经有正确内容的HTML
客户端请求JS/CSS文件
等待JS文件下载完成
等待JS加载并初始化完成
客户端把剩下一部分渲染完成(内容小，渲染快，就是把获取到的数据添加到页面上)

服务端渲染实现原理机制：在服务端拿数据进行解析渲染，直接生成html片段返回给前端。然后前端可以通过解析后端返回的html片段到前端页面，大致有以下两种形式：
1、服务器通过模版引擎直接渲染整个页面，例如java后端的vm模版引擎，php后端的smarty模版引擎。（web1.0的静态页面）
2、服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加。（web2.0的动态页面）

服务端渲染：（web1.0时代没有AJAX，浏览器不需要任何的JavaScript参与–静态页面）

服务端渲染：（web2.0时代–动态页面，服务端渲染生成html代码块, 前端通过AJAX获取数据然后使用js动态添加数据即可，不用前端渲染元素，因为html代码块已经生成了，可以参考jq模板渲染）（也相当于结合了点客户端渲染，数据显示需要客户端渲染，源代码中也是查不到这些动态数据的）
说白了前端人员还是要去写css,html,js,只不过数据变量要多套层模板，即数据变量要先套在后端给的模板语法中，再去写html

客户端渲染：（web3.0）

服务端渲染与客户端渲染详解（vue）相关推荐

WCF服务端运行时架构体系详解[下篇]
作为WCF中一个核心概念,终结点在不同的语境中实际上指代不同的对象.站在服务描述的角度,我们所说的终结点实际上是指ServiceEndpoint对象.如果站在WCF服务端运行时框架来说,终结点实际上指 ...
vue 渲染函数处理slot_详解Vue的slot新用法
摘要: 理解Vue插槽. Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁. 对插槽的这种改变让我对发 ...
服务端渲染vs客户端渲染到前后端同构
关于服务端渲染与客户端渲染的优劣,互联网上已经有过很多的文章进行过分析,在这里我谈一下我个人的见解. 首先,还是来老生常谈一下关于两种渲染方式的主要优劣: 服务端渲染(仅列出当下最突出的优劣): 优: ...
服务端渲染和客户端渲染区别？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: ...
如何快速判断页面是服务端渲染还是客户端渲染
什么是服务器端渲染和客户端渲染? 互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的.简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文 ...
【SSR和CSR】服务端渲染和客户端渲染区别？如何快速分辨页面是SSR还是CSR？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application)单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: 缺 ...
服务端渲染or客户端渲染
其实,服务端渲染不是一个新鲜的事情. 最开始的时候,其实网站都是服务端渲染的,后来是出现SPA框架进行客户端渲染.现在热点又回归服务端渲染. 通过这篇文章,带你了解服务端渲染和客户端渲染是怎么一回事. ...
WebSocket安卓客户端实现详解(一)–连接建立与重连
http://blog.csdn.net/zly921112/article/details/72973054 前言这里特别说明下因为WebSocket服务端是公司线上项目所以这里url和具体协议我 ...
新手入门：史上最全Web端即时通讯技术原理详解
前言有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

服务端渲染与客户端渲染详解（vue）

服务端渲染与客户端渲染详解（vue）相关推荐

最新文章

热门文章