五分钟了解 SPA 与 SSR

SPA（Single Page Application）即单页面应用。一般也称为 客户端渲染（CSR，Client Side Render）。

React 和 Vue 都是常见的 SPA 框架。

页面切换速度快

页面每次切换跳转时，并不需要向服务端请求 HTML 文件，这样就节约了很多网络延时，所以我们在切换页面的时候速度很快。其次页面内容的改变一般也不需要重新加载整个页面，避免了不必要的跳转和重复渲染。
可以减轻服务器端压力

因为服务器先将一份包含了静态资源、JavsScript 和模板的静荷数据(payload)发送到了客户端，之后客户端只需要获取渲染页面或视图所需要的数据即可。

首屏加载时间过长

由于 SPA 会在应用打开时将 JavaScript、CSS 等资源一次性全部加载，所以会导致首屏加载时间相对较长，从而影响用户体验。
增加浏览器内存占用

SSR 页面的渲染全部是在浏览器内完成，每次页面切换都会绘制页面，频繁的页面绘制会导致浏览器内存占用增加。
不利于 SEO

SEO（Search Engine Optimization）也就是 搜索引擎优化。

SPA 所有的内容都是在一个页面中通过 JavaScript 动态生成，然后替换显示的，而搜索引擎只能抓取真实 HTML 里的内容，后期动态渲染生成的内容，搜索引擎是无法抓取到的。

SSR（Server Side Render）即 服务端渲染。一般也称为 多页面应用（简称 MPA，Mulpile Page Application）。

常见的 SSR 框架有：Next 和 Nuxt

有利于 SEO

服务端渲染返回给客户端的是已经渲染好的最终 HTML，搜索引擎可以很方便的抓取到页面信息。如果项目有 SEO 的需求，建议使用 SSR。
首屏加载快

首屏时间，就是页面首个屏幕的内容展现的时间，当我们访问某个页面的时候，服务器会直接返回一个 HTML，而不会像 SPA 一样返回跟当前页面无关的内容，这样所请求的页面就会迅速展示出来。

最后编辑于：2022.10.08 13:27:44

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。