因为最近被一个新人模拟面试折腾的高血压又犯了，以前我是碰都不会碰这类基础面试题的，这种常识还有人不会？
结果还真有人不会，为了给新手开开眼，于是特意整理了这篇文档。
正文
最近有个刚入行的新手问我什么是SPA，我说就是单页面应用。
他又问什么是单页面应用，我寻思这是来考我了？
然后我就认真回了一下：就是一次加载前端所有资源，然后由前端的JS脚本来控制用户的交互行为。这样做的好处是可以在客户端处理掉所有的交互，减小服务器的压力，但是坏处是服务器做SEO时候，不好做数据抓取，相对于传统的SSR不太好。
然后，新人又问：什么是SEO?SSR不是抽卡吗，和这个有什么关系？
我：。。。你他妈的就是来找茬的？新生代的前端都这么没常识的吗？
单页面应用（SPA）
单页面应用这个面试题从我入行的时候就在问，因为那时候还是jquery刚刚倾倒的时刻，vue，ng，react三大框架刚刚兴起，对于那时候的人来说，这个概念很新鲜。
如今都他妈快5到6年了，还在问这个问题，我只能说社会进步还是挺缓慢的。
我这里懒得自己写定义了，引用一下vue官方的说法。
一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。
构建这类应用的最佳方法是使用这样一种架构：Vue 不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。
这种类型的应用通常称为单页应用 (Single-Page application，缩写为 SPA)。
说的简单点，就是以前页面切换等操作，每次都需要向服务器发送请求，抓取新的页面资源，到了本地重新解析资源，压力都在服务器端。
为了缓解服务器的渲染压力，也为了开发提速，于是就有了单页面应用（SPA）的处理方式。
这样避免每次切换页面对服务端造成压力，也不需要前端页面在服务器渲染，进一步削弱了服务器的压力。
优势
- 减小了后端开发心智负担，使后端更专注业务开发，前端来处理交互逻辑。SPA必然伴随着前后端解耦，传统开发需要后端调试前端的写的页面逻辑，比如JSP交互，如今将交互逻辑分离出来，页面及跳转之类的交互逻辑全部由前端开发，使后端更专注于业务逻辑的开发。
- 增加开发速度，因为前后端逻辑解耦，各自负责自己的部分，可以并行安排开发任务，双方通过接口进行联调，相对于传统的开发模式，不需要后期全部由后端挑大梁。
- 减小对服务器的压力，SPA是一次性加载所有资源到本地，由用户本地的浏览器来处理交互逻辑，在后续的人机交互过程中，除了需要请求接口数据，几乎不需要请求大量的页面资源，也不需要再服务端渲染，故而极大程度的减小的服务器的压力。
- 页面之间的切换非常快，用户体验好。因为全部由前端处理交互，不需要过服务器的渲染，不会受限于服务器的性能造成处理问题，所以相对传统的服务器端渲染页面，SPA能够更快的完成前端页面交互效果。
缺陷
- 首屏打开速度很慢，因为用户首次加载需要先下载SPA框架及应用程序的代码，然后再渲染页面，由此衍生出了很多首屏优化的要求。
- 不方便SEO。SEO是根据每个页面的固定内容进行抓取，而SPA是一次性加载所有资源，故而这种方式不利于SEO抓取。
搜索引擎优化（SEO）
既然提到了SEO，这里就先讲SEO。
这里引用一下百度百科给的定义，虽然百科不怎么正规，但是它这部分说的还是相对来说较为严谨的。
SEO（Search Engine Optimization）：汉译为搜索引擎优化。
是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式。目的是让其在行业内占据领先地位，获得品牌收益。
很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
搜索引擎工作原理
在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。
随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。
反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。
一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。
在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。
这样一个过程我们称之为SEO。
SEO与SEM的区别
讲到两者的区别时候，先放一下SEM的定义，我看了一下百科的定义，个人感觉不够直白，这里自己干脆重写一下。
SEM一般指竞价推广，在搜索引擎后台账户投钱，使广告获取相关的排名，一般搜索页面上会展现“广告”的标签。
这里我们从不同维度去比较一下两者的区别。
| 维度 | SEO | SEM |
|---|---|---|
| 关键词前置条件 | 需要网站有权重基础，小站无法做热词，不能随时增减关键词 | 不需要网站基础，任何关键词都可以投放 |
| 关键词收费 | 相对较低，随着SEO优化好，收费会降低 | 关键词越多，收费越高，随着同类站点竞争激烈，收费越高 |
| 见效时长 | 3-5月以上 | 立刻见效 |
| 持续性 | 停止SEO，效果可以持续很久 | 停止SEM，立刻失效 |
如果你们老板实际开发官网，希望你能优化一下官网的SEO排名，我个人建议，在国内的话，直接找个靠谱的厂商去买关键字竞价吧。
现在搜索排名靠前的全部都是广告，搜不出什么正经的东西，你各种花里胡哨的操作，都不如直接去买关键字权重。
我之前呆的一家公司，甚至没做SSR的优化，直接用vue弄了个单页面应用，硬是靠着关键字排名砸到了前排，SEO总归是商业行为，技术角度总归只是辅助，了解一下就行。
当然，也并非说国内完全没有做seo的价值，详情可以参考这篇文：2023年了，做SEO还有必要吗？，讲的很不错。
另外，在国内的网站最好还是备案一下，虽然备案不影响SEO的优化，但在国内有备案的网站终归更具有可信度。
白帽SEO与黑帽SEO
在市面上，按照各种操作行为，大致可以分为白帽SEO和黑帽SEO。
白帽SEO：起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。
黑帽SEO：利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。
我们常规的技术手段，大概就是白帽SEO，具体手段参考：一文带你弄懂 前端SEO优化，实际开发过程中，我们主要做如下操作。
- SSR服务器渲染
- 预渲染prerender-spa-plugin
- 对网站的的title、description、keywords精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
- 网站内容优化：内容与关键字的对应，合理增加关键字的密度；
- 饰性图片必须加alt
- 在网站上合理设置Robots.txt文件；
- 语义化化的HTML代码，符合W3C规范
- 增加外部链接，到各个网站上宣传；
- 向各大搜索引擎提交收录自己的站点
- 少用iframe：iframe中的内容是不会被抓取到的
详细的操作手段这里就不说了，我后续会专门整理一篇文档，毕竟从零开始弄一个网站，然后通过SEO优化打到前排这种操作我也没做过，公司都是直接用钱砸关键字权重的，只能说钱多任性。
后续我会尝试做个简单的玩具网站，试试能不能通过白帽SEO把排名打上去，如果打不上去，我这里介绍的再怎么花哨也没什么用。
服务器端渲染（SSR）
这里依旧放一下百度百科的定义。
服务器端渲染（Server-Side Rendering）是指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。
SSR没什么好说的，就是传统的服务端页面，因为页面的接口都是在服务端完成拼接处理，当浏览器的请求资源的时候，已经是完整的DOM结构。
故而，SSR相对于传统的SPA更适合搜索引擎抓取关键字，所以SEO效果会更好。
优点
- 更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了
- 更好的SEO，将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。
缺点
- 相对于仅仅需要提供静态文件的服务器，SSR中使用的渲染程序自然会占用更多的CPU和内存资源
- 一些常用的浏览器API可能无法正常使用，比如
window、docment和alert等，如果使用的话需要对运行的环境加以判断 - 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂
- 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致
SSR常用框架
Nuxt静态化
因为个人之前是用Nuxt来做官网的，而且本人的技术栈主要也是vue全家桶，所以这里主要也就讲一下Nuxt3。
静态化是Nuxt.js打包的另一种方式，算是Nuxt.js的一个创新点，部署到服务器上之后，这种页面加载速度很快。
这里再次放一下Nuxt3官网的关于服务端渲染的说法。
服务器端渲染
默认情况下，Nuxt具有内置的服务器端渲染（SSR）功能，无需自己配置服务器，这对Web应用程序有很多好处
- 更快的初始页面加载时间：Nuxt将完全呈现的HTML页面发送到浏览器，该页面可以立即显示。这可以提供更快的感知页面加载时间和更好的用户体验 （UX），尤其是在速度较慢的网络或设备上。
- 改进的 SEO：搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容可以立即使用，而不需要 JavaScript 在客户端呈现内容。
- 在低功耗设备上具有更好的性能：它减少了需要在客户端下载和执行的 JavaScript 数量，这对于可能难以处理繁重的 JavaScript 应用程序的低功耗设备非常有益。
- 更好的辅助功能：内容在初始页面加载时立即可用，从而提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
- 更轻松的缓存：页面可以缓存在服务器端，这可以通过减少生成内容并将其发送到客户端所需的时间来进一步提高性能。
总体而言，服务器端渲染可以提供更快、更高效的用户体验，并改善搜索引擎的优化和可访问性。
注意：在Nuxt.js执行 generate静态化打包时，动态路由会被忽略。
优点
- 纯静态文件，访问速度超快
- 对比SSR，不涉及到服务器负载方面问题；
- 静态网页不宜遭到黑客攻击，安全性更高。
缺点
- 动态路由（params传参），参数多的时候，Nuxt不适用
结语
这些常识类的东西，虽然对开发没什么作用，但是作为见识拓展一下比较好。
这些问题也不是什么新鲜问题，基本上都是老古董的问题了，这里整备一下，省的哪天被别人面试挖了犄角旮旯的问题拉出来拷打。
假如上级布置了一个SSR开发任务，不会闹出来SSR抽卡用的词的笑话，多了解一点，总归是没什么错的。