这是我参与「第五届青训营 」伴学笔记创作活动的第 十 天
客户端渲染
客户端渲染（CSR）即页面的渲染由客户端向服务器发送请求得到数据之后，由客户端负责解析数据文件，将 JS 以及 CSS 的效果渲染到页面中的模式。在这一过程中，服务端所需要做的，仅仅是将客户端请求的 html、css、js 等文件发送到客户端以供使用，客户端本身并不会参与到页面的渲染过程。
优点与不足
CSR 能够减轻服务器的压力，但是会增加服务器的访问次数。由于新数据需要客户端重新请求数据进行渲染，因此给想要爬取网页内容的爬虫增加了爬取的难度。由于数据是 JS 运行之后渲染出来的，因此在查看客户端渲染的页面的源代码时，并不能看到渲染出来的数据。这也导致了其不利于 SEO 搜索引擎优化。
SEO
SEO 搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。即通过爬虫程序抓取每一个页面的数据到搜索引擎的数据库中，通过匹配用户的搜索内容来决定内容显示的方式。但是由于客户端渲染的数据难以被爬虫抓取，因此百度、搜狗等搜索引擎搜索不到客户端渲染的数据，这样会导致网站的曝光度大大减少。
服务端渲染
服务端渲染即 Server Side Render(SSR),由服务端直接渲染好 html 页面，并将其传给客户端，客户端只需要将其激活为可交互的页面供用户访问即可。
优点
服务端渲染的优点在于其是已经渲染好的页面，因此客户在访问的时候将会有更加快的访问速度，由于是在服务端渲染，数据的获取与连接也会更加迅速，大大增加了页面获取的效率。由于其数据可被搜索引擎获取，因此其对于 SEO 来说具备更加的优势，网页能够获得更高的排名以及曝光度。
不足
由于需要在服务端进行渲染，SSR 对于特定环境的要求比 CSR 要高的多，并不能在任意的服务器上部署。并且 SSR 对于服务器的消耗比较大，如果是大流量的环境，很有可能会导致服务器的崩溃。
Nuxt
Nuxt 是一个基于vue.js的通用应用框架,通过对客户端、服务端基础架构的抽象组织，Nuxt.js主要关注的是应用的UI渲染。作为框架，Nuxt.js为客户端、服务端这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。我们可以通过 Nuxt 来开发经由服务端渲染的网页应用。
创建项目
你可以通过如下命令创建项目
yarn create nuxt-app 项目名
运行项目
yarn serve
项目结构
创建项目成功后，Nuxt 会自动生成如下文件夹与文件。
- assets: 资源目录，用于存放未编译的静态资源。例如:Less、JS等
- components: vue 组件目录
- layouts: 布局组件目录
- pages: 页面目录，所有的 vue 视图。nuxt 自动生成对应的路由。
- plugins: 插件目录
- static: 静态文件目录,不需要编译的文件。
- store: vuex 目录
- nuxt.config.js: nuxt 个性化配置文件，内容将覆盖默认。
- package.json: 项目配置文件（依赖关系、启动脚本等)
