随手笔记 3D建模的六种渲染方式(4)

5. CSR (Client Side Rendering)
CSR, 顾名思义， 客户端渲染。
客户端渲染，意味着: 直接使用JavaScript在浏览器中渲染页面。
所有逻辑，数据获取，模板和路由均在客户端而不是服务器上处理。
CSR 示意图：
流程：浏览器 -- 服务器 -- index.html(白屏) -- bundle.js -- images -- Render
优点
在服务器上快速 -因为仅呈现空白页，所以呈现速度非常快。
支持静态 -空白页可以通过S3之类的服务静态生成和提供，从而使速度更快。
支持单页应用程序 -客户端渲染是支持单页应用程序或SPA的模型。
成本相对较低 - CSR 相对于SSR/SSG， 更容易开发/维护。
缺点
没有初始渲染 -如果应用很大，或者客户的连接速度很慢，加载时间过长，用户体验就不太好。

6. 三态渲染
如果你可以结合Service-Worker, 则三态渲染模式也可能派上用场。
在三态渲染模型中，可以使用服务器流式渲染进行初始导航，然后让service worker 在 html加载完成后，继续进行导航html的渲染。
这样可以使缓存的组件和模板保持最新状态，并启用SPA样式的导航，以在同一会话中呈现新视图。
如果可以在服务器，客户端页面和service worker之间共享相同的模板和路由代码时，这种方法十分有效。
三态渲染模型：