服务器端渲染：渲染过程在服务器端完成，最终渲染结果HTML页面通过HTTP协议发送到客户端。对于客户端而言，只是看到了最终的HTML页面，看不到数据(json,数组等),也看不到模板(页面基本轮廓和展示 位置等)。
优势：容易SEO，首屏加载快。
（爬虫只会爬取源码，不会执行脚本。使用mvvm框架之后，页面的大多数DOM元素是在客户端根据js动态生成的，可供爬虫抓取分析的内容很少，而且爬虫不会等数据加载完成之后再抓取。对服务端渲染而言，首屏渲染返回已经获取了异步数据并执行js脚本的最终HTML，爬虫就可以抓取完整页面信息）
缺点：渲染过程在后端完成，耗费后端资源。
客户端渲染：服务器端把模板和数据发送给客户端，渲染过程也在客户端完成。
优势：节省后端资源，局部刷新页面，多端渲染。
首屏性能差，白跑，很难SEO。（SPA 所有代码都通过单个页面加载而检索，根据需要动态装载适当的资源并添加到页面。一次拿到所有资源，通过前端路由导航来渲染指定组件。所以首次加载页面会慢。）
vue的nuxt.js，react的next.js、gatsby是同构渲染，同一套代码既可以在服务器渲染也可以在客户端渲染。
首次访问页面时，即访问首屏页面时，next.js使用服务器端渲染，返回已经渲染好的HTML页面。这样同时解决SEO和首屏白屏的问题。此后的交互使用客户端渲染，HTML，CSS，JS都不需要再重新请求，只需要通过ajax/websocket等途径获取数据局部刷新 在客户端完成渲染。
搜索引擎：搜索引擎网站后台有一个非常庞大的数据库，里存储了大量的关键词，每一个关键词又对应着被网络爬虫从互联网上收集而来的网址。一个关键词对应多个网址，与关键词最吻合的网址会排在最前面。爬虫对flash和js看不懂的，如果网站内容可以被搜索引擎能识别，搜索引擎就会提高该网站的权重，增加对该网站的友好度，这样的过程称为SEO。
SEO目的：让网站更利于各大搜索引擎的抓取和收录，使用户在搜索对应关键词时网站能排在前面，增加产品的曝光率和流量。
SEO优化方式：
网页TDK标签 （每个页面的TDK都不一样，提炼出核心的关键词）
title标签
meta标签 name="description" 当前页面的描述 （列举出关键词）
meta标签 name="keywords" 当前页面关键词 （高度概括网页内容）
语义化标签
如header,footer,section,aside,artical,nav等等语义化标签让爬虫更好的解析
router-link 网页内路由跳转会有链接提示
合理使用h1~h6标签，比如通常在首页的logo是哪个加h1标签，若是图片，文字可以隐藏
图片alt属性
图片若只是展示没有实际信息的话，alt属性可以为空。否则都要加上alt属性，使爬虫可以抓取到图片信息。<img src="dog.jpg" width="300" height="200" alt="哈士奇" />
a标签的title， 有提示文字作用。
404页面，爬虫会返回抓取其他页面。
notfollow 忽略跟踪
用于meta标签， content="notfollow"，告诉爬虫该页面上的所有的链接都无需追踪
用于a标签，rel="notfollow"，告诉爬虫该页面无需追踪
建立robots.txt文件
robots.txt文件由一条或多条规则组成，每条规则禁止或允许特定抓取工具抓取相应网站中的指定文件路径。是搜索引擎访问网站时第一个访问的。
关键词
user-agent 表示网页抓取工具名称
disallow 不应抓取的目录或网页
allow 应抓取的目录或网页
sitemap 网站的站点地图
即使网站上所有内容都希望被搜索引擎抓取到，也要设置一个空的robot文件，不让爬虫访问这个文件时 服务器上就会多一条404错误日志。
建立网站sitemap
网站刚上线时，连往该网站的外部链接不多，爬虫可能找不到这些网页，此时需要用到sitemap
sitemap是一个将网站栏目和链接归类的一个文件，让搜索引擎全面收录站点的网页地址，了解站点的网页地址权重分布以及站点内容更新情况，提高爬虫的爬取效率。
sitemap文件包含的网址不可超过5万个，文件大小不得超过10MB
sitemap 文件路径会放在robots.txt文件里
结构化数据
提高用户体验
图片标签和标题、页面主次分明，，用户可以清晰查看、手机友好性、网页速度、简化网站导航
网站快速响应、安全且适合移动设备
拥有吸引用户的高质量的内容，并鼓励用户留恋在网页上
快速加载并轻松浏览
交互足够让用户方便
用户体验UX在SEO的作用：
提高页面加载速度
布局友好
提高网站响应能力
nuxt.js是基于vue.js的通用应用框架，它预设服务端渲染的应用所需要的各种配置，同时也可以一键生成静态站点。
nuxt配置404页面：在layouts里加error.vue，定制所需错误页面.https://www.jianshu.com/p/29081a0557e5?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
cookie设置：用户点击按钮登陆，则在axios登陆成功后直接写cookie。若自动登录，可以先将登陆信息保存在state中，然后在layout的mounted事件中读取state再写入cookie。http://www.biliyu.com/article/1840.html
nuxt与Vue区别：
路由 nuxt按照pages文件夹的目录结构自动生成路由，Vue需要在router/index.js文件中去手动配置路由。
入口页面 nuxt页面入口为layout/default.vue ，Vue页面入口为src/App.vue
webpack配置 nuxt内置webpack，允许根据服务端需求 在nuxt.config.js中的build属性自定义构建webpack配置，覆盖默认配置。Vue关于webpack的配置存放在build文件夹下
asyncData里发送ajax，这个和生命周期平级，这个数据在服务端是渲染好了的
https://www.imooc.com/article/details/id/79819
dev配置属性配置nuxt.js 是开发模式还是生产模式
使用nuxt命令时，dev会被强制设置成true
当使用nuxt build,nuxt start,nuxt generate 命令时，dev会被强制设置成false
nuxt拥有自己的生成sitemap包，@ nuxtjs / sitemap
https://redfern.dev/articles/adding-a-sitemap-using-nuxt-content/
https://ssr.vuejs.org/zh/
