Vue SSR服务端渲染 vue预渲染

前端开发进化史

了解SSR之前，需要知道最原始的服务器渲染、前后端一起开发。使用用一个服务器。原始的服务器渲染是整个web项目放入后端，提供路由访问。好处坏处也很多，举例：MVC模式。JavaWeb

原始服务渲染

优点：

1. 安全性：因为整个项目都在后端同一个服务器里。通过后端控制层提供路由访问

2. 首屏加载快：这样浏览器不会太大工作，只需要接受后端返回回来html渲染

   缺点：

3. 不方便协同开发： 前后端开发困难，繁琐不方便，可能需要等待后端或者前端进度

4. 前端代码量：前端还行需要自己编写模板语句。jstl，ejs等…

5. 维护难：随着项目增大页面的控制维护成本也会越来越大

6. 体验不足: 每次页面的切换需要重新请求在渲染

随着时代的变更。为了让开发更加高效，而且有更好的体验和维护成为。衍生出了前后端分离模式

意思就是：前端是一个单独模块单独服务器，后端也是单独模块单独服务器。两者之间通过跨域访问接口接口方式进行数据交互。大大提升了项目开发效率。比如较流行的 SPA单页面程序

SPA单页面浏览渲染

优点：

1. 维护成本低：前端后端后只需要维护之间关注的功能。
2. 协同开发： 前端不需要等后端，后端也不需要等前端，个做个的事。
3. 体验好： 可以做到接近原生软件效果，因为始终都是一个页面。而且一次性把所以页面请求到了，后面页面只需要请求一次或者不请求，也能访问到

缺点：

1. SEO不友好： 因为页面中只有一个div。比如vue：div id=“app”, 其他页面是通过js操作生成页面。而SEO是爬取html的。不回爬取js
2. 首屏加载慢： 由于更多加载及渲染工作都在浏览器端执行，比如：请求一个网站，浏览需要发出请求，获取到js，执行js获取到页面，在执行渲染页面，然后包括图片，css等。都需要大量和后端往返；
3. 性能问题： 由于更多加载及渲染工作都在浏览器端执行、单页面访问页面步骤： 先执行js —> 生成DOM —》渲染DOM —》发出请求回来—》解析数据—》操作数据—》重新渲染

随着人们的需求升级，为了弥补缺点的不足。我们有推行了新模式 SSR服务端渲染 这个传统的MVC有一些相似，但具体又不同。他的出现解决了SPA单页面程序的问题，但是自身还有其他问题。看我们是怎么业务，在选择适合的方式。说说SSR缺点优点：

SSR服务端渲染

优点：

1. 更好的SEO： 由于搜索引擎爬虫抓取的工具可以直接查看完全渲染的页面
2. 首屏加载快： 浏览器工作量大大减少，部分工作交给后端渲染执行创建

缺点：

1. 项目复杂度： 由于需要做node中间处理，需要更多文件处理分服务，和浏览端文件
2. 依赖性： SSR需要webpack做打包文件打包分离处理及node Server运行环境。条件成本
3. 更多的服务器端负载： 在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源

SPA单页面程序和 SSR应用场景

1. 单页适用场景：后台管理项目，大量路由项目，
2. SSR适用场景： 官网，推广页

• 比如你一个仪表板项目。初始加载时间对你不是很重要，那么就不用考虑SSR，这需要你开发权衡。看你的项目内容需要展示的时间来判断

• 如何你项目中希望部分页面(登录页、介绍页)。有良好加载快又能SEO。那么推荐你使用 预渲染

  预渲染什么？(https://ssr.vuejs.org/zh/#%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-vs-%E9%A2%84%E6%B8%B2%E6%9F%93-ssr-vs-prerendering)

  Vue中如何使用。推荐看着篇文章： Vue预渲染案例(https://juejin.im/post/59d49d976fb9a00a571d651d#heading-9)