目录
SPA是什么?
单页应用(single page application,SPA),这是官方给出的定义
其实直白来说就是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML,JS、CSS。一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JS动态的变化HTML,从而实现UI与用户的交互,在SPA应用中,应用加载之后就不会再有整页刷新。
总结一下:
- 将所有活动局限于一个web页面中
- 一旦页面加载完成,SPA不会因为用户的操作而进行页面的重新加载或跳转
SPA的缺陷
缺陷:
1. 不利于SEO优化
SEO是搜索引擎优化的简写形式,SEO优化就是在搜索时让自己的网站尽可能排在搜索引擎的前几页,因为用户没有太多耐心看几十页的搜索结果
搜索引擎会让爬虫去爬各个网站的index.html文件。而SPA应用里index.html文件,大多都像下面的代码,没有多少关于网站的信息。这样我们的网站是不利用SEO优化的。
<body>
<div id="app">
</div>
<script type="module" src="/src/main.js"></script>
<body>
2. 首屏渲染速度
在加载网站的静态页面后,浏览器会下载bundle.js,并且会将其代码执行一次,如果没有将JS代码分包异步加载的话,等到JS代码量足够大的时候,会降低首屏的渲染速度
服务端渲染是什么?
服务端渲染SSR(Server-Side Rendering),将前端代码放在后端渲染,前端只需要渲染后端渲染好的页面。
服务端渲染的优点
- 前端耗时少。因为后端拼接完了html,浏览器只需要直接渲染出来。
- 有利于SEO。因为在后端有完整的html页面,所以爬虫更容易爬取获得信息,更有利于seo。
- 无需占用客户端资源。即解析模板的工作完全交由后端来做,客户端只要解析标准的html页面即可,这样对于客户端的资源占用更少,尤其是移动端,也可以更省电。
- 后端生成静态化文件。即生成缓存片段,这样就可以减少数据库查询浪费的时间了,且对于数据变化不大的页面非常高效 。
参考文章:
原文链接:https://blog.csdn.net/qq_48469083/article/details/121464504
https://blog.csdn.net/crazy_jialin/article/details/114967245