什么是SSR其实就是Server Side Render的简称,简单点说就是在服务器端填充数据,渲染页面然后吐到客户端来展示,为啥最近又开始提及服务器端渲染了呢?都是Vue啊,react 等等这些前端框架闹的,在这些框架没有出现之前,很多页面也都是服务器端渲染,然后ajax的出现让服务器的的工作一部分交给了前端,前端发请求,服务器端吐数据,增强了页面交互性,服务器端因此也不完全渲染页面了,也可以说只是渲染部分页面。
Vue更是厉害直接使用虚拟DOM,那么什么是虚拟DOM呢?
这么说吧,我们直接在html页面里写的都是真实的DOM元素,都是网络爬虫可以抓取到的。
如果你用js写的一段代码生成的DOM元素然后插进页面里去的,那么爬虫是抓取不到的,如果抓取不到那么seo怎么做呢?
所以说虚拟DOM的SEO是很渣很渣的。当如如果你不在乎seo那自然是无所谓的了。再说虚拟DOM也并非一无是处,它避免大量无谓的计算量,让页面显示速度更快。
如果在乎SEO那就的想想怎么才能对爬虫更友好,让广大网友更容易更快的找到你的网站,而不是其他人的。这对网站推广非常重要。
当然我们还是希望能够使用Vue的,那么Nuxt.js是你实现服务器端渲染SSR的首选框架了。
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
不做太多这个框架的介绍了,因为官网上的很详细了,总之是一个比较牛逼的团队他们Wie什么开发这个框架,做了哪些优化和配置,然后巴拉巴拉一堆吧。
本次我们重点聊下安装,带领大家做一次最初的体验,当然如果你还没有使用过Vue,那么可以先不看这篇文章了,等体验过了Vue的使用再过来读吧。
首先,你的开发系统中需要有Node环境,可以使用yarn或者 npm进行安装 ,最好再整一个 n (Node.js版本管理工具)
然后执行以下步骤
1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这步。
npm install vue-cli -g
多数情况下比较慢,建议使用cnpm进行安装。安装成功后可以使用
vue -V
查看验证安装是否完成
然后使用官网提供的脚手架就可以完成项目搭建了
确保安装了npx(npx在NPM版本5.2.0默认安装了):
$ npx create-nuxt-App <项目名>
或者用yarn :
$ yarn create nuxt-app <项目名>
安装的过程中一般都让你选择用什么做为服务端语言 一般都会选koa,当然你也可以选其他的。然后选哪个UI 模板,一般的elementUI居多,还会问你要不进行服务端渲染,这么不是废话吗?完成之后执行
npm run dev 就会运行起来了。你会看到大概下面这样的一个网页,然后可以查看一下源代码,就会发现和之前的Vue不一样了吧,你的htm了都出现了
抓紧玩儿起来。最后祝大家在像素世界里玩儿的开心。