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 结构语义化（与程序员无关，老板砸钱就行）

  • 搜索引擎在搜索关键字时，会有自己的一套算法（网络爬虫）：

    • 网络爬虫会去目标网站上去抓取与关键字有联系的信息

    • 网络爬虫抓取的方式是：浏览网站的源代码，寻找与关键字相匹配的信息，最终将与关键字匹配度最高的网站进行显示。

  • 总结：如果要提高网站的排名，必须在源代码中有关键字信息。

渲染方式

SPA 的渲染特点：页面上的数据，是通过 js 动态渲染的，所以在源代码是看不到数据的（像这种渲染方式，叫做：客户端渲染：CSR）

渲染方式 - CSR

全称：Client Sider Render（客户端渲染）

特点：

• 1.0 完成实现了前后端分离

  • 后端：提供数据接口

  • 前端：调用接口，渲染数据

• 2.0 由于数据的渲染是在前端完成了，并且是通过 js 动态完成的：所以在操作过程中网站的源代码中看不到任何数据。

案例：

• 步骤：

  • 1.0 创建一个服务器

  • 2.0 响应一个客户端

  • 3.0 在服务器中提供一个数据响应的接口

  • 4.0 在客户端中通过异步请求去请求这个接口

  • 5.0 通过 js 将数据动态渲染到页面上

渲染方式 - SSR

全称：Server Sider Render（服务端渲染）

特点：

• 1.0 没有前后端的分离：

  • 只有后端

    • 得到静态页面

    • 得到动态数据

    • 将页面与数据进行结合，形成一个完整的 html 结构，最终将 html 结构响应回浏览器

  • 没有前端

• 2.0 由于数据是在服务端直接渲染完成的，所以在源代码中可以看到数据的 。

• 3.0 相对 CSR，它对于 SEO 更加友好

案例：

• 步骤：

  • 1.0 创建一个服务器

  • 2.0 设置一个接口：用来返回一个完整的 html 页面（数据+结构）

  • 3.0 在浏览器中请求这个接口就可以了