什么是服务端渲染、客户端渲染、SPA、预渲染，看完这一篇就够了

服务端渲染（SSR）

简述：
    又称为后端渲染，服务器端在返回html以前，在html特定的区域特定的符号里用数据填充，再给客户端，客户端只负责解析HTML。
    鼠标右击点击查看源码时，页面代码能够在源代码中看到。
    性能消耗在服务器端，用户达到必定程度的时候，后端会考虑缓存
    部分数据，避免消耗过多的资源重复渲染。
优势：
    前端耗时少，首次渲染快，更快的内容到达时间
    利于SEO
缺点：
    网络传输数据量大，占用部分服务器运算资源
    用户体验差
    不容易维护，前端修改部分html/css后端也要改

客户端渲染

简述：
    又称为前端渲染，起源于js的兴起，ajax让前端渲染更加成熟
    前端专一于ui，后端专一于逻辑，真正意义上实现了先后端的分离
    经过约定好的API来交互，后端提供数据，前端根据数据生成DOM插入HTML页面。
    初次渲染大都是将原html中的数据标记{{}}替换
    鼠标右击查看源码，页面代码不能够在源代码中看到
    性能消耗在客户端
优势：
    减小服务器压力
    能够实现局部刷新，无需每次都请求完整的页面，体验更好
缺点：
    前端耗时较多，首屏渲染慢，渲染前要下载一堆js和css文件
    不利于SEO，爬虫看不到完整的代码
难点：
    数据变动后，页面响应式变动如何节省资源？直接DOM的读写是很慢的

SPA

简述：
    single page application单页面应用，只有一张Web页面的应用
    加载单个html页面并在用户与应用程序交互时动态更新该页面的Web应用程序
    页面初始化时加载必须的htm,js,css，全部操做都在此页面完成，经过js控制
    MVVM：经典的MVVM开发模式，先后端各负其责
    ajax：重前端，业务逻辑在本地操做，数据经过ajax同步提交
优势：
    只须要处理#后面的字符，页面并不会重载，实现局部刷新
缺点：
    不容易管理，也不够安全
    不利于SEO，SEO需花费额外的功夫

预渲染

简述：
    核心：prerender-spa-plugin
    无需服务器实时动态编译，采用预渲染，在构建时针对特定路由简单的生成静态HTML文件
优势：
    几乎能够得到服务端渲染的全部优势，没有缺点
    加载应用程序的路由，将结果保存在一个静态的HTML文件中
    无需更改代码或添加服务器端
缺点：
    若网站有成百上千条路线，预编译会很是的慢
    虽每次更新只须要一次但会须要更长的时间
适用场景：
    只需改善少数页面的SEO，能够采用预渲染

// webpack配置 new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: [ '/', '/home', '/infomation', '/ticket', '/scenery', '/about' ], renderer: new Renderer({ headless: false, renderAfterDocumentEvent: 'render-event' }) }), 

如何选择？

1.注重SEO的新闻网站，非强交互的页面，建议采用服务器端渲染
2.对于强交互的页面，不注重SEO，采用客户端渲染
3.只需改善少数页面的SEO，采用预渲染