What
SSR: Server Side Rendering 服务端渲染. 解决单页面应用的 SEO 的问题
对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的
CSR:Client Side Rendering 客户端渲染
什么是服务器端渲染
后端渲染HTML,浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串,这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的,在这种情况下,浏览器只进行了HTML的解析,以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户
优点:
前端耗时少(前端只负责将html进行展示),利于SEO
缺点:
网络传输数据量大,占用(部分、少部分)服务器运算资源,response 出的数据量会(稍)大点
什么是客户端渲染
前后端交互通过约定好的API来交互,后端提供json数据,前端循环json生成DOM插入到页面中去
优点:
网络传输数据量小(减少了服务器压力)
前后端分离,后端专注于数据接口服务,前端专注接口调用
Why
服务器端渲染html 叫吐或者喷,爬虫可以看到完整的呈现源码
客户端模板渲染html叫填,爬虫看不到完整的呈现源码
抓取页面的前提是 html 含有被抓取内容,看看基于 vue 的线上 SPA 页面请求时返回了什么
1 |
|
我们的组件都是这个 html 文件返回后再渲染到 <div id=app></div>
里的。这就合理的解释了 SEO 缺陷的原因。
When
项目大,首屏加载慢
针对于首屏加载,可以做服务端渲染。但要有觉悟,一旦这样做,后期维护是个很痛苦的事情
seo 优化
注意:如果觉得工程上花的工作量,值得去换取这样的性能提高,那就去做;如果觉得这样的性能提高不值得花工夫去做,那就不去做。事物都有两面性,你是工程师,是创造价值,不是赶时髦。
How
安装
Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli,安装过的忽略此步
1 | npm install -g vue-cli |
完成后在需要创建的目录下执行以下
1 | vue init nuxt/starter <project-name> |
依赖安装完成后
1 | npm run dev |
打开浏览器 http://localhost:3000