什么是SSR其实就是Server Side Render的简称,简单点说就是在服务器端填充数据,渲染页面然后吐到客户端来展示,为啥最近又开始提及服务器端渲染了呢?都是Vue啊,react 等等这些前端框架闹的,在这些框架没有出现之前,很多页面也都是服务器端渲染,然后ajax的出现让服务器的的工作一部分交给了前端,前端发请求,服务器端吐数据,增强了页面交互性,服务器端因此也不完全渲染页面了,也可以说只是渲染部分页面。




yarn配置启动vue3 yarn 安装vue_vue安装yarn


Vue更是厉害直接使用虚拟DOM,那么什么是虚拟DOM呢?

这么说吧,我们直接在html页面里写的都是真实的DOM元素,都是网络爬虫可以抓取到的。


yarn配置启动vue3 yarn 安装vue_vue安装yarn_02


如果你用js写的一段代码生成的DOM元素然后插进页面里去的,那么爬虫是抓取不到的,如果抓取不到那么SEO怎么做呢?

所以说虚拟DOM的SEO是很渣很渣的。当如如果你不在乎seo那自然是无所谓的了。再说虚拟DOM也并非一无是处,它避免大量无谓的计算量,让页面显示速度更快。


yarn配置启动vue3 yarn 安装vue_vue安装yarn_03


如果在乎SEO那就的想想怎么才能对爬虫更友好,让广大网友更容易更快的找到你的网站,而不是其他人的。这对网站推广非常重要。

当然我们还是希望能够使用Vue的,那么Nuxt.js是你实现服务器端渲染SSR的首选框架了。

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。


yarn配置启动vue3 yarn 安装vue_vue安装yarn_04


不做太多这个框架的介绍了,因为官网上的很详细了,总之是一个比较牛逼的团队他们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了都出现了


yarn配置启动vue3 yarn 安装vue_vue安装yarn_05


抓紧玩儿起来。最后祝大家在像素世界里玩儿的开心。