一. 单页Web应用
1. 只有一个HTML文件的Web应用,就是单页Web应用,称之为SPA应用。
二. SPA的特点
1. SPA应用只有一个HTML文件,所有的内容都在这个页面中呈现的。
2. SPA应用只会加载一次HTML文件,不会因为用户的操作而进行页面的重新加载,当用户与应用程序交互时,是通过动态更新页面内容的方式来呈现不同的内容。
三. SPA优点
1. 有良好的交互体验。不会重新加载整个网页,只是局部更新。
2. 前后端分离开发。前端负责页面呈现和交互,后端负责数据。
3. 减轻服务器压力。只用处理数据,不用处理界面。
4. 共用一套后端程序代码
四. SPA缺点
1. SEO难度较高。只有一个界面,无法针对不同的内容编写不同的SEO信息。
2. 初次加载耗时多。为实现单页Web应用功能及显示效果,需要在加载页面的时候将所有js,css统一加载
五. 客户端渲染(CSR)
1. 客户端渲染：后端只提供数据,前端做视图和交互逻辑(SPA应用就是典型的客户端渲染)
2. 客户端渲染过程：
- 1.客户端请求html (请求)
- 2.服务端返回html
- 3.客户端渲染html,找到依赖的js/css文件
- 3.客户端请求对应的js/css文件 (请求)
- 4.服务端返回对应的js/css文件
- 5.客户端等待jss/css文件下载完成
- 6.客户端加载并初始化下载好的js文件
- 7.客户端执行js代码向后端请求数据 (请求)
- 8.服务端返回数据
- 9.客户端利用服务端返回的数据填充网页
3. 最大优点：交互体验好可以做局部更新
4. 最大缺点：首屏在家慢(因为要等到HTML下载完才会去下载js/css,要等到js下载完初始化完才会去获取数据)
六. 服务端渲染(SSR)
1. 服务端渲染：后端既提供数据又提供视图和交互逻辑。就是服务器接到客户端请求之后,找到对应的数据并根据找到的数据生成对应的视图。然后将包含数据的视图一次性发给客户端,客户端直接渲染即可。
2. 服务端渲染过程：
- 1.客户端请求html (请求)
- 2.服务端内部查找对应的html文件和数据
- 3.服务器内部根据数据html文件和数据生成完整网页
- 4.服务端返回完整网页
- 5.客户端渲染HTML,找到依赖的js/css文件
- 5.客户端请求对应的js/css文件 (请求)
- 6.客户端等待js/css文件下载完成
- 7.客户直接展示网页
3. 最大优点：首屏加载快(因为服务器返回的网页已经包含数据,所以下载完js/css文件可以直接渲染)
每次请求返回的都是一个独立完成的网页,更利于SEO
4. 最大缺点：网络传输数据量大
七. 预渲染
1. 无需服务器实时动态编译,采用预渲染,在构建时针对特定路由简单的生成静态HTML文件。
本质就是客户端渲染,只不过和SPA不同的是预渲染有多个界面
2. 最大优点：由于有多个界面，所以更利于SEO
3. 最大缺点：首屏加载慢，预编译会非常的慢
八. 如何选择
1. 注重SEO的新闻,电商网站,建议采用服务器端渲染
2. 强交互的页面,不注重SEO,采用客户端渲染
3. 两者之间,只需改善少数页面的SEO,采用预渲染
