在学习Vue开发一个电商网站的管理后台时,使用到了一个组件 vue-quill-editor 主要是一个快捷的一个富文本编辑器
在使用这个组件的组件的时候看到了两种的使用方式分别是SPA和SSR,技术不够的我,只能面向百度编程??,那我们来看看是??是??吧！
本文分别从两者的概念，主要的不同，优劣势列举等等去分析SPA和SSR。
单页Web应用就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。也就是网页上通过hash(#)的变化来实现推动界面变化,通过不同的组件切换,展示所对应的功能模块,也避免了页面的重新加载
<a href="target">go target</a>
<div id="target">i am target place</div>
<!--
点击a链接,文档会自动滚动到id为target的div区域中,运用在电商网站的楼层跳跃等实际当中
hash除了整个功能还有另一种含义:
指导浏览器行为但是不上传服务器
因为改变URL中的任何一个字符都会使浏览器重新去请求服务器,导致很多已经加载过的资源都会重新请求
简而言之:
[改变#后面的值不触发网页重载，但会记录到浏览器history中去。]
-->
初次加载耗时多
SEO(搜索引擎优化)不友好
主要通过 onhashchange 事件,所以我们主要监听这个事件的触发即可实现
下面是一个利用$.ajax实现的单页面切换的例子：
window.onhashchange = function(){ //监听hash值变化，实现页面变换
var hash=window.location.hash;
changePage(hash);
}
function changePage(hash){
switch (hash) // 通过不同的hash地址路由到对应的页面
{
case ‘#index‘:
url=‘partials/list.html‘;
break;
case ‘#newpage‘:
url=‘partials/newpage.html‘;
break;
case ‘#edit‘:
url=‘partials/edit.html‘;
break;
case ‘#view‘:
url=‘partials/view.html‘;
break;
}
$.ajax({ //根据hash值选择页面
type:‘GET‘,
url:url,
success:function(data){
main.innerHTML=data; // 服务器拿到响应数据再渲染
}
});
}
那在上面我们已经初步的了解了SPA的一些特别之处还有弊端
那我们再来看看SSR又能够带给我们怎么样的特点呢
SSR: Server-Side Render 服务端渲染
简单的说就是: 服务端直接渲染出HTML字符串模板,浏览器可以直接通过解析该字符串模板显示页面,因此首屏的内容不在依赖JavaScript的渲染！！！
就好像我不需要再通过JS动态切换,而是服务端已经渲染好,我直接拿来就是可以使用
虽然 SSR 能快速呈现页面，但是在 UI 框架（比如 React）加载成功之前，页面是没法进行 UI 交互的。
TTFB (Time To First Byte)，即第一字节时间会变长，因为 SSR 相对于 CSR 需要在服务端渲染出更多的 HTML 片段，因此加载时间会变长。
更多的服务器端负载。由于 SSR 需要依赖 Node.js 服务渲染页面，显然会比仅仅提供静态文件的 CSR 应用需要占用更多服务器 CPU 资源。以 React 为例，它的 renderToString() 方法是同步 CPU 绑定调用，这就意味着在它完成之前，服务器是无法处理其他请求的。因此在高并发场景，需要准备相应的服务器负载，并且做好缓存策略。
SPA:
优点:
SSR:
优点:
缺点:
服务器端渲染会先向后端请求数据，生成完整首屏HTML后返回给客户端
客户端渲染会等待JS下载，解析完之后再向服务器请求数据，等待过程中是什么也没有的，所以会出现首屏白页的情况
这些文章都是我在搜索资源时,感觉能够很大程度帮助你理解一些概念，并通过简单的言语能够表达清晰,有需要的可以去查看
原文：https://www.cnblogs.com/haoranya/p/14380281.html