>[success] # 页面渲染 ~~~ 1.页面渲染整体可以分为两种，'服务端渲染(SSR )'，'客户端渲染(CSR )' 1.1.'SSR'为代表的是各类后台语言web框架一般搭配的模板语法，例如'java的jsp'，'python的jinjia' 他们的特点都是在服务端完成页面渲染，返回时候页面并已经存在好了对应要展示的数据内容 1.2.'SSR'为代表的前端框架例如'React、Vue、Angular',他们的特点就是返回页面骨架时候并没有内容 所有的内容都是后续加载的js渲染到页面骨架上的 ~~~ >[info] ## 服务端渲染SSR ~~~ 1.这种渲染都是在服务器端完成的，通过下图也可以发现html整个数据渲染都是在服务器端，客户端要做 只是接受返回渲染好的html页面展示出来 2.这种渲染的弊端: 2.1.应用的前后端部分完全耦合在一起，前后台协同开发比较困难，甚至说以jsp为例前端还要学习'jsp'语法 2.2.前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案； 2.3.由于内容都是在服务端动态生成的，所以服务端的压力较大； ~~~  >[info] ## 客户端渲染 ~~~ 1.当ajax诞生后，客户端渲染流行起来，实现了前后端的可以分开开发互不影响，将原本服务端需要渲染 数据的过程让客户端也可做，通过下图发现第一次拿回的往往是一个html骨架，后续请求获取的实际数据 才会渲染到页面上 2.这种渲染的弊端： 2.1.首屏渲染慢：因为 HTML 中没有内容，必须等到 JavaScript 加载并执行完成才能呈现页面内容。 2.2.SEO 问题：同样因为 HTML 中没有内容，所以对于目前的搜索引擎爬虫来说，页面中没有任何有 用的信息，自然无法提取关键词，进行索引了。 ~~~  >[info] ## 同构渲染 ~~~ 1.'服务端' 和 '客户端' 都各有利弊将相互结合一下这种【服务端渲染】 + 【客户端渲染】形式叫做 同步渲染 2.其中vue生态的Nuxt.js就是同构渲染的解决方案,整体的过程如下 2.1.客户端发起请求 2.2.服务端渲染首屏内容 + 生成客户端 SPA 相关资源 3.3.服务端将生成的首屏资源发送给客户端 2.4.客户端直接展示服务端渲染好的首屏内容 2.5.首屏中的 SPA 相关资源执行之后会激活客户端 Vue 2.6.之后客户端所有的交互都由客户端 SPA 处理 3.'优点'： 1.首屏渲染速度快、有利于 SEO '缺点'： 1.开发成本高' 2.涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应 用程序 (SPA) 不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。 3.更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 (high traffic) 下使用，请准备相应的服务器负载，并明智地采用缓存策略 ~~~