为何单页面的seo不友好
搜索引擎的工作原理
在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。
SEO介绍
SEO是搜索引擎优化(Search Engine Optimization)的英文缩写,意指在了解搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中的关键词自然排名,获得更多的流量,从而达成网站销售以及品牌建设的预期目标.
SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面,如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术,来对网页进行相关的优化,使其提高搜索引擎排名,从而提高访问量,最终提升网站的销售能力或宣传能力的技术.增加网站曝光率,提高整站权重,让用户更容易搜索到你的网站,进而带来客观的流量.通过这一策略引流的优点是:
1. 低成本; 2. 持久性; 3. 不需要承担"无效点击"的风险.
这里简单写一点SEO的优化方向:
网站设计优化
- 网站主标题关键词优化，必须选择好关键词，一般以“一个核心词+三五个长尾词”组合成标题。
- 网站布局的优化。一般来说，企业产品网站，主要是F型布局，内容繁多的网站以“扁平结构”布局为主。
- 代码优化，就是板块、栏目代码，最好使用对应的简拼或者全拼。
网站内容优化
- 分析栏目关键词，有哪些长尾词，挖掘出来，做成表格的形式。然后，逐个分析长尾词都有哪些内容有关，形成二级长尾词。
- 根据挖掘的长尾词，分析用户需求，挖掘与之有关的内容，整理出文章，发布在网站上，一定确保高质量文章。
为什么说单页面的SEO不友好
因为单页面的情况下的页面中的很多内容都是根据匹配到的路由动态生成并展示出来的,而且很多页面内容是通过ajax异步获取的,网络抓取工具并不会等待异步请求完成后再行抓取页面内容,对于网络抓取工来说去准确模拟相关的行为获取复合数据是很困难的,它们更擅长对静态资源的抓取和分析.
如何解决单页面SEO不友好的问题
明白了问题出在哪里,“搜索引擎蜘蛛”或“网络爬虫”程序更擅长对静态资源的抓取和更新,那我们就要采取相应策略生成尽可能多的静态资源,来让网络爬虫获取更多的数据,从而提升网站的搜索排名.目前市面上用的比较多的就是以下两种策略: 预渲染和SSR(服务端渲染).
简单介绍下SEO的一些优化策略:
预渲染
预渲染指的是打包生成一些主要路由对应的静态html文件,这样有了更多的静态资源,网络爬虫可以抓取到更多的网站信息,提升网站的搜索排名.
SSR(服务端渲染)
服务端渲染就是先向后端服务器请求数据,然后生成完整首屏html返回给浏览器, 服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬虫可以抓取到完整的页面信息,SSR另一个很大的作用是加速首屏渲染,因为无需等待所有的JavaScript都完成下载并执行,才显示服务端渲染的标记,所以用户会更快地看到完整渲染的页面.
什么是服务器渲染
要想理解服务端渲染，首先要清楚一个渲染的概念：渲染即是数据与模版组装成html
客户端渲染(CSR)与服务端渲染(SSR)
为了更好的理解服务端渲染，我们可以将服务端渲染与客户端渲染对比着来看。
客户端渲染
前端做视图和交互，后端只提供接口数据，前端通过ajax向服务端请求数据，获取到数据后通过js生成DOM插入HTML页面，最终渲染给用户。页面代码在浏览器源代码中看不到。
客户端渲染优点：
- 使得服务器计算压力变轻
- 做到了前后端分离，在团队开发中只要负责各自的任务即可，使开发效率有明显提升。
客户端渲染缺点：
- 不利于SEO、搜索引擎爬虫看不到完整的程序源码
- 请求增多时用户等待时间变长，导致首屏渲染慢
- 消耗的是用户浏览器的性能
服务端渲染
服务端在返回html之前，在特定的区域，符号里用数据填充生成html，再发送给客户端html，客户端解析html最终渲染出页面给用户，页面代码在浏览器源代码中看得到。
服务端渲染优点：
- 响应快，用户体验好，首屏渲染快
- 对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO
服务端渲染缺点：
- 增加了服务器的计算压力，消耗服务器性能
- 不容易维护，如果不使用node中间层，前后端分工不明，不能进行良好的并行开发
两种渲染对比
本质上两种渲染都是一样的，都是进行的字符串拼接生成html,两者的差别最终体现在时间消耗以及性能消耗上。
客户端在不同网络环境下进行数据请求，客户端需要经历从js加载完成到数据请求再到页面渲染这个时间段。导致了大量时间的消耗以及浏览器性能的消耗。而服务端在内网请求，数据响应快，不需要等待js代码加载，可以先请求数据再渲染可视部分然后返回给客户端，客户端再做二次渲染,这样大部分消耗的是服务端的性能。客户端页面响应时间也更快。
具体可看下面的渲染路线图：
为什么使用服务端渲染
提到为什么使用服务端渲染，首先要想到的是服务端渲染解决了什么问题。根据上文我们可以简单总结起来两点。
首屏加载快
客户端渲染下，除了加载html,还要等待js/css加载完成，之后执行js渲染出页面，这个期间用户一直在等待，而服务端只需要加载当前页面的内容，而不需要一次性加载全部的 js 文件。等待时间大大缩短，首屏加载变快。
利于SEO优化
服务端渲染出的页面有助于搜索引擎识别页面内容，有利于SEO, 所谓SEO，指的是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。现在的搜索引擎爬虫一般是全文分析的模式，分析内容涵盖了一个网站主要3个部分的内容:文本、多媒体(主要是图片)和外部链接，通过这些来判断网站的类型和主题。对于客户端渲染来说，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面。而服务端渲染的页面代码都可以在源代码中看到，这有助于搜索引擎识别。
什么情况使用服务端渲染
我们已经知道服务端渲染端两大优点就是首屏渲染和SEO优化，如果对于用户体验要求比较高的或者需要进行SEO优化的我们可以采用服务端渲染。但是不是一定要使用服务端渲染呢？答案是不一定，因为服务端渲染端成本相比客户端渲染更昂贵(服务器资源稀少而宝贵)，如果不是对用户体验或SEO要求到极致的话，我们依然可以选择客户端渲染，并在客户端渲染上解决首屏优化慢和不利于SEO的缺点。
- 处理 SEO 问题时，使用 prerender、升级搜索引擎。
- 白屏可以加 loading、Skeleton Screen 效果。
总的一句话：实际开发根据实际场景。
如何使用服务端渲染
- 基于react框架的服务端渲染开发推荐使用Next.js框架，Next.js 是一个轻量级的 React 服务端渲染应用框架。... 使React应用 更简单 Next.js 是一个轻量级的 React 服务端渲染应用框架。
- 基于vue框架的服务端渲染开发推荐使用Nuxt.js框架. Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性