前端开发进化史
了解SSR之前,需要知道最原始的服务器渲染、前后端一起开发。使用用一个服务器。原始的服务器渲染是整个web项目放入后端,提供路由访问。好处坏处也很多,举例:MVC模式。JavaWeb
原始服务渲染
优点:
-
安全性:因为整个项目都在后端同一个服务器里。通过后端控制层提供路由访问
-
首屏加载快:这样浏览器不会太大工作,只需要接受后端返回回来html渲染
缺点:
-
不方便协同开发: 前后端开发困难,繁琐不方便,可能需要等待后端或者前端进度
-
前端代码量:前端还行需要自己编写模板语句。jstl,ejs等…
-
维护难:随着项目增大页面的控制维护成本也会越来越大
-
体验不足: 每次页面的切换需要重新请求在渲染
随着时代的变更。为了让开发更加高效,而且有更好的体验和维护成为。衍生出了前后端分离模式
意思就是:前端是一个单独模块单独服务器,后端也是单独模块单独服务器。两者之间通过跨域访问接口接口方式进行数据交互。大大提升了项目开发效率。比如较流行的 SPA单页面程序
SPA单页面浏览渲染
优点:
- 维护成本低:前端后端后只需要维护之间关注的功能。
- 协同开发: 前端不需要等后端,后端也不需要等前端,个做个的事。
- 体验好: 可以做到接近原生软件效果,因为始终都是一个页面。而且一次性把所以页面请求到了,后面页面只需要请求一次或者不请求,也能访问到
缺点:
- SEO不友好: 因为页面中只有一个div。比如vue:div id=“app”, 其他页面是通过js操作生成页面。而SEO是爬取html的。不回爬取js
- 首屏加载慢: 由于更多加载及渲染工作都在浏览器端执行,比如:请求一个网站,浏览需要发出请求,获取到js,执行js获取到页面,在执行渲染页面,然后包括图片,css等。都需要大量和后端往返;
- 性能问题: 由于更多加载及渲染工作都在浏览器端执行、单页面访问页面步骤: 先执行js —> 生成DOM —》渲染DOM —》发出请求回来—》解析数据—》操作数据—》重新渲染
随着人们的需求升级,为了弥补缺点的不足。我们有推行了新模式 SSR服务端渲染 这个传统的MVC有一些相似,但具体又不同。他的出现解决了SPA单页面程序的问题,但是自身还有其他问题。看我们是怎么业务,在选择适合的方式。说说SSR缺点优点:
SSR服务端渲染
优点:
- 更好的SEO: 由于搜索引擎爬虫抓取的工具可以直接查看完全渲染的页面
- 首屏加载快: 浏览器工作量大大减少,部分工作交给后端渲染执行创建
缺点:
- 项目复杂度: 由于需要做node中间处理,需要更多文件处理分服务,和浏览端文件
- 依赖性: SSR需要webpack做打包文件打包分离处理及node Server运行环境。条件成本
- 更多的服务器端负载: 在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源
SPA单页面程序和 SSR应用场景
- 单页适用场景:后台管理项目,大量路由项目,
- SSR适用场景: 官网,推广页
-
比如你一个仪表板项目。初始加载时间对你不是很重要,那么就不用考虑SSR,这需要你开发权衡。看你的项目内容需要展示的时间来判断
-
如何你项目中希望部分页面(登录页、介绍页)。有良好加载快又能SEO。那么推荐你使用 预渲染
Vue中如何使用。推荐看着篇文章: Vue预渲染案例(https://juejin.im/post/59d49d976fb9a00a571d651d#heading-9)