客户端渲染vs服务端渲染
对于我这种不熟悉后端的前端来说,这一开始确实费解。
思考:为什么会出现两种渲染方式?
场景:假如我们只是需要一个完全静态的页面,没有任何数据变动,比如a.html。那我们只需要把这个a.html扔到服务器上进行访问就可以了。
But现实工作我们的页面要复杂的多,各种数据变动交互,而你不可能为每一个变动的数据都写一个视图,那么我们就只能把数据和视图分离,然后通过一种技术将数据塞进视图里面,这种技术就叫做渲染。
闪亮登场:
客户端渲染
数据由浏览器通过 ajax 请求动态取得,再通过 js 将数据填充到 dom 元素最终展示到网页中。
服务端渲染
后端先调用【数据库】,获得数据之后,将数据和页面元素进行拼装,组合成完整的 html 页面,再直接返回给浏览器。
注意:文章说的渲染和浏览器渲染html没有任何关系,这里的渲染是指生成html文档的过程。
当然少不了它们之间的对比了,请看下图:
好吧,既然你都知道这些了,那么你知道怎么具体实现吗?
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"
}
},
其中 是必需的,页面的主体内容会显示在这里 (类似于根节点的 )
可以在项目里面试试~😯