服务端渲染vs客户端渲染


前几天被人问到了nuxt是啥东西,我就知道这东西是vue的一个衍生品,别的就不知道了。然后吓得我回去赶紧翻开了nuxt的文档。

Nuxt.js 是一个基于Vue.js 的轻量级应用框架,可用来创建服务端渲染(SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等balabala

提到了一个词——服务端渲染,服务端渲染SSR(Server-Side Rendering)是什么?与之相对的是客户端渲染CSR(Client-Side Rendering)。 单从字面来理解,服务端渲染,就是服务端来渲染;客户端渲染则是客户端渲染。(这话听着像句废话)

什么是服务端渲染和客户端渲染

服务端渲染(后端渲染) 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。

客户端渲染(前端渲染) html 仅仅作为静态文件,客户端在请求时,服务端不做任何处理,直接以原文件的形式返回给客户端,然后客户端根据 html 上的 JavaScript,生成 DOM 插入 html。

现在常用的SPA单页应用模式,就是典型的前端渲染。

两者的本质区别

两者本地的区别就是谁来完成html文件的完整拼接。如果在后端完成,然后返回给前端,那么就是服务端渲染;否则就是客户端渲染。

服务端渲染的优缺点

优点:

 1.不占用客户端资源,前端耗时少

 2.有利于SEO

缺点:

 1.占用服务端资源。如果请求量较多,会对服务器造成一定压力。

 2.不利于前后端分离,开发效率较低。

客户端渲染的优缺点

优点:

 1.前后端分离。

 2.体验更好,接近于原生app。

缺点:

 1.前端响应较慢,首屏加载缓慢。

 2.不利于SEO。

SEO

后端渲染html叫吐或者喷,爬虫可以看到完整的呈现源码 前端模板渲染html叫填,爬虫看不到完整的呈现源码

如何选择

不谈业务场景而盲目选择使用何种渲染方式都是耍流氓。比如企业级网站,主要功能是展示而没有复杂的交互,并且需要良好的SEO,则这时我们就需要使用服务器端渲染;而类似后台管理页面,交互性比较强,不需要seo的考虑,那么就可以使用客户端渲染。

另外,具体使用何种渲染方法并不是绝对的,比如现在一些网站采用了首屏服务器端渲染,即对于用户最开始打开的那个页面采用的是服务器端渲染,这样就保证了渲染速度,而其他的页面采用客户端渲染,这样就完成了前后端分离。

写在最后

2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js,一个 React 的服务端渲染应用框架。几小时后,与 Next.js 异曲同工,一个基于 Vue.js 的服务端渲染应用框架应运而生,我们称之为:Nuxt.js。

随着Next.js和Nuxt.js的发布,以前是 Back-end(或者说 Full-stack)工程师负责 SSR,但是现在是 Front-end 工程师负责 SSR 了啊。

参考文章:

服务器端渲染和客户端渲染

也谈服务端渲染(SSR)

服务端渲染 vs 客户端渲染

为什么现在又流行服务端渲染html?-知乎

为什么现在又流行服务器端渲染html?


ssrcsr

75 Words

2018-12-02 22:25 +0000