🚁前言
在提出前后端分离后，SPA是前后端分离中前端的一种解决方案，但是普通的SPA又不利于SEO💢，而SEO对于很多网站又很重要，所以就出现了SSR，SSR的出现一定程度上解决了SPA中首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。网站排名除了利用SEO外，还能利用SMO!
不过已经来了不如挑战一下，报出你要挑战的时长！！吃个辣椒📞读得更快，从前后端还没分离开始了解，冲冲冲！
🍯前后端分离
第一次接触前端的时候大家就已经习惯了前后端分离了，听说传统的Web前后端开发大多是前端将页面写好，之后丢给后端，让后端将页面集成到项目中去🚴。
好可怜的后端
这里就存在前后端耦合的问题。对于后端同学来说，不仅要写后端逻辑，还得集成前端页面，要是页面有问题那后端得头疼死😫！对于前端同学来说，我们不能很轻松的看到页面真正渲染出来的样子，不利于开发调试😭。
也正是由于前后端的高耦合，使得任何一方的变化都可能会影响到另一方。
☎️总结：影响效率！互相影响！
所以我们的前辈就提出了前后端分离的思想。
前后端分离降低了前端和后端的耦合度，提高了开发效率；
🍻基本概念
前后端根据AJAX接口进行数据交互，目前常见的是后端直接将数据以JSON的格式返回给前端，前端根据后端服务器返回的数据操作DOM。
🍻优点
🔸分工明确，前后端各司其职，后端专注业务逻辑和功能的实现，前端专注页面设计
🔸接口明确，并行开发，在后端接口没有实现好之前，前端完全可以自己通过Node.js的Express和koa等的Web框架模拟接口，提供测试数据。
🔸提高开发效率，一定程度上减少了前后端的沟通成本
在前后端分离中，后端一般提供RESTful API，常将数据以JSON格式返回；而前端一般使用SPA。
继续往下说SPA时，先插播一下搜索引擎与SEO！
🍯搜索引擎
🍻工作原理
在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。
❓原来是这样，那这些蜘蛛是怎么收集的呢？
勤劳的“蜘蛛”🕷（有点恐怖，赶紧往下看）每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。
❓那网站那么多，与关键词相关的网址不止一个怎么办？
一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。
在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。
🍻不同搜索引擎的SEO差异
很多同学总觉得只要首页做得好就够了，其实不然。很多搜索引擎对首页与内页一视同仁！
我们看一下表格：
| 维度\搜索引擎 | 百度 | 谷歌 | 360 | 搜狗 |
|---|---|---|---|---|
| 收录难易 | 较难 | 容易 | 很难 | 较易 |
| 新站态度 | 很友好，容易排名 | 较友好，容易排名 | 很不友好，新站很难收录 | 不友好，新站难收录 |
| 排名策略 | 注重首页，首页权重大 | 首页、内页平等对待 | 首页、内页基本平等对待 | 首页占比多一点 |
| 外链影响 | 影响很小 | 影响很大 | 影响大 | 有影响 |
| 内容影响 | 高质量内容容易获得排名 | 高质量内容容易获得排名 | 高质量内容容易获得排名 | 高质量内容容易获得排名 |
所以让我们具体看一下SEO吧!
🍯SEO
🍻SEO简介
SEO（Search Engine Optimization），也就是搜索引擎优化。
SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。
可以！！很好的合作关系！！👏
🍻分类
SEO又分为白帽SEO和黑帽SEO。
白帽SEO：起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。
黑帽SEO：利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。
那么白帽SEO能做什么呢👍？
🔸对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
🔸网站内容优化：内容与关键字的对应，增加关键字的密度；
🔸在网站上合理设置Robots.txt文件；
🔸生成针对搜索引擎友好的网站地图；
🔸增加外部链接，到各个网站上宣传；
🍻前端SEO规范
前端是构建网站中很重要的一个环节，前端的工作主要是负责页面的HTML+CSS+JS，优化好这几个方面会为SEO工作打好一个坚实的基础。通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂（提升用户体验），也能让“蜘蛛”看懂（提高搜索引擎友好度）。
接下来就让我们从几个方面优化吧！
🍶网站结构布局优化
🔑关键词：尽量简单、开门见山、扁平化结构
❓原因：一般而言，网站结构层次越少，越容易被抓取，也就更容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬了。而且根据相关数据调查：如果访客经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。
📋如何做?
🔸控制首页链接数量
网站首页是权重最高的地方。如果首页链接太少，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是一旦太多，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
🔸扁平化的目录层次
尽量只要挑砖3次就能到达网站内每个内页。
🔸导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
🔸网站的结构布局
页面头部：logo及主导航，以及用户的信息
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，这样可以留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
🔸利用布局，把重要内容HTML代码放在最前
搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用float:left;和float:right;就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬虫最先抓取。同样也适用于多栏的情况。
🔸控制页面大小，减少http请求，提高网站的加载速度
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
🍶网页代码优化
🔑关键词：语义化、突出重点
📋如何做?
🔸突出重点内容——合理的设计title、description和keywords
标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的标题中不要设置相同的内容。
标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
🔸语义化书写HTML代码，符合WSC标准
代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。比如：h1-h6 是用于标题类的，标签是用来设置页面主导航，列表形式的代码使用ul或ol，重要的文字使用strong等。
🔸标签
页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 rel="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
<a href="https://www.jd.cn" title="京东" class="logo"></a>
🔸正文标题要用标签
h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如首页的logo上可以加h1标签。副标题用h2标签, 而其它地方不应该随便乱用 h 标题标签。
🔸img标签应使用 "alt" 属性加以说明
当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。
<img src="cat.jpg" width="300" height="200" alt="猫" />
🔸表格应该使用caption表格标题标签
caption 元素定义表格标题。caption 标签必须紧随 table 标签之后，只能对每个表格定义
<table border='1'>
<caption>表格标题</caption>
<tbody>
<tr>
<td>apple</td>
<td>100</td>
</tr>
<tr>
<td>banana</td>
<td>200</td>
</tr>
</tbody>
</table>
🔸br标签：只用于文本内容的换行
<p>
第一行文字内容<br/>
第二行文字内容<br/>
第三行文字内容
</p>
🔸strong、em标签
需要强调时使用。strong标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，em标签强调效果仅次于strong标签；b、i标签：只是用于显示效果时使用，在SEO中不会起任何效果。
🔸文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法打出版权符号©。
🔸重要内容不要用JS输出
因为“蜘蛛”不会读取JS里的内容，所以重要内容必须放在HTML里。
🔸少使用iframe框架
因为“蜘蛛”一般不会读取其中的内容。
🔸谨慎使用 display：none
对于不想显示的文字内容，应当设置z-index或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉display:none其中的内容。
🍶前端网站性能优化
🔑关键词：优化性能
📋如何做?
🔸减少http请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
比如：
（1）CSS Sprites： 将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
（2）合并CSS和JS文件： 前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
（3）采用lazyload： 俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
🔸控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。一般情况下都是CSS在头部，JS在底部。
🔸尽量外链CSS和JS（结构、表现和行为的分离），保证网页代码的整洁，也有利于日后维护
<link rel="stylesheet" href="asstes/css/style.css" />
<script src="assets/js/main.js"></script>
🔸利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
🔸减少重排（Reflow）
基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
减少 DOM 操作
🔸图标使用IconFont替换
🔸不使用CSS表达式，会影响效率
🔸使用CDN网络缓存，加快用户访问速度，减轻服务器压力
🔸启用GZIP压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大
🔸伪静态设置
🍶伪静态设置
如果是动态网页，可以开启伪静态功能，让蜘蛛“误以为”这是静态网页，因为静态网页比较合蜘蛛的胃口，如果url中带有关键词效果更好。
🍻SEO与SEM的区别
其实推广网站不止SEO这一个方法，SEM是另一种方式！
SEM一般指竞价推广，在搜索引擎后台账户投钱，使广告获取相关的排名，一般搜索页面上会展现“广告”两个词，见效快，只要开始投放，效果立马可见，反之亦然。
而SEO，Search Engine Optimization，即搜索引擎优化，是一种技术手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，是一个长期优化，逐步完善的过程，见效慢。如果停止SEO优化，效果也可以持续半年左右。
🍶核心差别
🔸对于SEO
关键词数量直接影响费用，不能随意增减关键词
需要网站有权重基础，小站无法做热词
见效时间长（3-5个月以上）
内力，停止SEO，效果具有很长持续性
随着SEO基础越来越好，CPC逐年降低
🔸对于SEM
理论上无限关键词，关键词间接影响费用
几乎任何关键词都可以投放
见效时间短(立即见效)
外力，停止SEM，效果立即消失
随着竞争越来越激烈，CPC快速上升
所以，还是老老实实加上SEO吧！
🍯SPA
SPA是前后端分离中前端的一种解决方案，全称是single page application。
SPA是一种 网络应用程序(WebApp)模型，通过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高。
常见SPA框架：AngularJS、React、Vue.js
🍻优点
🔸页面之间的切换非常快
🔸一定程度上减少了后端服务器的压力（不用管页面逻辑和渲染）
🔸后端程序只需要提供API，完全不用管客户端到底是Web界面还是手机等
🍻缺点
🔸首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面。
🔸不利于SEO
SEO对与很多网站很重要，而普通的SPA又不利于SEO💢；
🍯SSR
SSR的出现一定程度上解决了SPA中首屏慢的问题，又极大减少了普通SPA对于SEO的不利影响。
🍻基本概念
SSR是 Server-Side Rendering(服务器端渲染)的缩写。
在普通的SPA中，一般是将框架及网站页面代码发送到浏览器，然后在浏览器中生成和操作DOM。
这是第一次访问SPA网站在同等带宽及网络延迟下比传统的在后端生成HTML发送到浏览器要更慢的主要原因
但其实也可以将SPA应用打包到服务器上，在服务器上渲染出HTML，发送到浏览器，这样的HTML页面还不具备交互能力，还需要与SPA框架配合，在浏览器上“混合”成可交互的应用程序。
所以，只要能合理地运用SSR技术，不仅能一定程度上解决首屏慢的问题，还能获得更好的SEO。
🍻优点
🔸更快的响应时间
不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了
🔸更好的SEO
将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。
🍻缺点
🔸相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源
🔸一些常用的浏览器API可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断
🔸开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂
🔸可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致
🍻SSR常用框架
🍯VUE开发的SEO优化方案
Vue 就是典型的SPA单页面应用框架，对SEO不友好，当然也有相应的解决方案。
🍻SSR服务器渲染
Vue.js 是构建客户端应用程序的框架。默认情况下，可以再浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染未服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记“激活”为客户端上完全可交互的应用程序。
服务端渲染的Vue.js应用程序也可以被认为是“同构”或“通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。
🍶缺点
🔸开发条件受到限制，浏览器特定的代码只能在某些生命周期钩子函数（lifecycle hook）中使用；一些外部扩展库可能需要特殊处理才能在服务器渲染应用程序中运行。而且一套代码两套执行环境，会引起各种问题，比如服务端没有window、document对象，处理方式是增加判断，如果是客户端才执行；
🔸环境和部署要求更高，需要Node.js server运行环境。
🔸高流量的情况下，需要准备相应的服务器负载，并明智地采用缓存策略。
🍻Nuxt静态化
Nuxt是一个基于Vue生态的更高层的框架，为开发服务端渲染的Vue应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。静态化是Nuxt.js打包的另一种方式，算是Nuxt.js的一个创新点，页面加载速度很快。
注意：在Nuxt.js执行 generate静态化打包时，动态路由会被忽略。
🍶优点
🔸纯静态文件，访问速度超快
🔸对比SSR，不涉及到服务器负载方面问题；
🔸静态网页不宜遭到黑客攻击，安全性更高。
🍶缺点
🔸动态路由参数多的话不适用
🍻预渲染 prerender-spa-plugin
如果只是为了优化部分营销页面,比如(/，/about,/contact等)，需使用Web服务器实时动态编译HTML，而是使用预渲染方式，在构建时（build time）简单地生成针对特定路由等静态HTML文件。
🍶优点
🔸引入插件配置即可，改动较小
🍶缺点
🔸无法使用动态路由
🔸只使用少量页面的项目，页面多达几百个的情况下，打包会非常慢
🍻使用Phantomjs针对爬虫做处理
Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”，但是已经满足对Vue 的SEO处理。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server,再通过PhantomJS来解析完整的HTML，返回给爬虫。
🍶优点
🔸完全不用改动项目代码，按原本的SPA开发即可，对比开发SSR成本小的不要太多；
🔸对已用SPA开发完成的项目，这是不二之选。
🍶缺点
🔸部署需要node 服务器支持；
🔸爬虫访问比网页访问要慢一些，因为定时要定时资源加载完成才返回给爬虫；
🔸如果被恶意模拟百度爬虫大量循环爬取，会造成服务器负载方面问题，解决方法是判断访问的IP，是否是百度官方爬虫的IP；
☎️总结
🔸构建大型网站，如商城类，可以直接选择SSR服务端渲染。
🔸如果只是个人博客、公司官网这类，其余三种都可以。比如Nuxt静态化就挺好的。
🔸如果对已用SPA开发完成的项目进行SEO优化，而且支持node服务器，请使用Phantomjs。
🍯写在最后
毫无疑问，2023了，搜索依然还是市场的核心“刚需”，在传统的搜索引擎（百度、360、搜狗等）还是以PC端SEO为主，效果比较好；在移动互联网时代，近几年出现的站内搜索（今日头条、WX等）以移动端页面和短视频的SEO为主。
站内搜索可以参考：2023年了，做SEO还有必要吗?
耶耶耶！恭喜你到达终点！！🚩
🍯参考与延伸
🔸 Search engine optimization - Wikipedia
🔸 How Single-Page Applications Work – Paul Sherman – Medium
🔸 Meta tags that Google understands - Search Console Help
🔸 Does Google use meta keywords in 2018?-Quora
🔸 Vue SSR 指南 | Vue.js 服务器端渲染指南
