简单了解SPA、SEO及CSR和SSR渲染方式

本文链接：https://blog.csdn.net/weixin_44757417/article/details/109586636

SPA

Single Page Application （单页面应用）

概念：
- 网站的效果都是显示在一个静态页面中的
- 在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改
- 在网站的源代码中是看不到任何数据（关键字）的
特点：
- 优点：
  - 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
  - 基于上面一点，SPA 相对对服务器压力小；
  - 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
- 缺点：
  - 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
  - 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；（vue-router 已经解决了这个问题）
  - SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。
    - 因为单页应用的所有内容都在 index.html 中，页面的切换是通过 js 动态切换的
    - 由于所有的内容切换都是通过 js 动态切换的，所以在页面的源代码中是看不到任何的数据的
    - 由于源代码中看不到任何数据，这是非常不利于 SEO 的，所以我们说 SPA 在 SEO 上有其天然的弱势。
    - vue 中的 SSR 就可以用来解决这个问题。

SEO

用户在搜索关键字时，让我们的网站排名更加的靠前，这个过程叫做 SEO 优化
Search Engine Optimization （搜索引擎优化）

作用：
- 提高网站关键字排名
- 当我们在搜索一些关键字 SEO 可以让我们的网站排名尽可能的靠前
具体的实现：

1.0 花钱买排名（与程序员无关）
2.0 可以广发外链（与程序员无关）
3.0 结构语义化（与程序员相关）
- 搜索引擎在搜索关键字时，会有自己的一套算法（网络爬虫）：
  - 网络爬虫会去目标网站上去抓取与关键字有联系的信息
  - 网络爬虫抓取的方式是：浏览网站的源代码，寻找与关键字相匹配的信息，最终将与关键字匹配度最高的网站进行显示。
- 总结：如果要提高网站的排名，必须在源代码中有关键字信息。