客户端渲染vs服务端渲染

459 阅读2分钟

客户端渲染vs服务端渲染

对于我这种不熟悉后端的前端来说,这一开始确实费解。

思考:为什么会出现两种渲染方式?

场景:假如我们只是需要一个完全静态的页面,没有任何数据变动,比如a.html。那我们只需要把这个a.html扔到服务器上进行访问就可以了。

But现实工作我们的页面要复杂的多,各种数据变动交互,而你不可能为每一个变动的数据都写一个视图,那么我们就只能把数据和视图分离,然后通过一种技术将数据塞进视图里面,这种技术就叫做渲染。

闪亮登场:

客户端渲染

数据由浏览器通过 ajax 请求动态取得,再通过 js 将数据填充到 dom 元素最终展示到网页中。

服务端渲染

后端先调用【数据库】,获得数据之后,将数据和页面元素进行拼装,组合成完整的 html 页面,再直接返回给浏览器。

注意:文章说的渲染和浏览器渲染html没有任何关系,这里的渲染是指生成html文档的过程。

image.png 当然少不了它们之间的对比了,请看下图:

image.png

好吧,既然你都知道这些了,那么你知道怎么具体实现吗?

Nuxt.js

由来: 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js

几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js

在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板

vue init nuxt-community/starter-template MyProject

可以在 package.json 中添加以下配置来修改主机端口号

"config": {

 "nuxt": {

  "host": "0.0.0.0",

  "port": "7788"
 }
},

其中 是必需的,页面的主体内容会显示在这里 (类似于根节点的 )

image.png 可以在项目里面试试~😯