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 在浏览器中请求这个接口就可以了
-