react引入流程图_基于React+Koa实现React SSR服务端渲染

React Server-Side Rendering
其实这个概念很早之前就有了解了，出于没有应用场景原因，之前一直都只停留在了解API的层面，未曾去实践。快到周末闲来无事，自己复盘了下之前做的新商城，一直在考虑有没有更好的方案，于是React Server-Side Rendering被很自然的写到了草稿纸上，一起写上去的还有egg.js。
总结一句，接入服务端渲染有服务端渲染的好，客户端渲染有客户端渲染的更好。

这是背景。

2019.04.12更新

发现我这个react-ssr的github仓库代码和这篇文章的思维被掘金的一个博主抄到掘金社区，他那篇文章拿了高赞。他连我仓库的里前端工程代码都拿出来写到博客里，而且没有备注出处！真希望大家尊重原创性。

2019.04.01 更新

补充一个最终上线完的体验。

最终线上产品体会；相比于传统的服务端渲染，React SSR可以做到更完善的体验；相比于前后端完全分离的SPA，React SSR可以做到首屏更快的得到展示，浏览器解析渲染完dom节点既可以展示了。我的个人博客是这个方案实现的（Koa2 + React SSR + Mongdb），可以参考下。

王佳欣的小站​www.shuxia123.com

----以下是原文----

问题？

为什么React既可以做browser浏览器端的渲染，又可以做server服务端，还可以做native客户端的渲染呢？

因为React将渲染工作交给了react-dom(浏览器渲染)、react-server(服务端渲染)、react-native(客户端渲染)等渲染器。而React 包只负责定义react，让我们可以使用react的特性，如：component、createElement、lazy、createContext、createRef等等在特性，这些特性任何平台都可以正常使用的，不负责具体的渲染工作。

而，各个渲染器中指定了特定的平台，实现各个平台的渲染逻辑和平台特性，如react-dom.render就可以实现dom的渲染。

所以，react就能实现多端渲染，只要在不同的端，引入不同的渲染器就可以了。

好处？

1、可以优化SEO，可以优化首屏白屏的加载时间。

2、不需要开发额外的模板

如果采用使用SSR做node渲染的前后端分离，可能要开发多套模板的，比如：加载更多的情况，就需要做一套node使用的nunjucks模板（用于渲染首屏数据渲染），和一套浏览器js使用的模板（用于加载更多时），比较难维护。

采用SSR渲染使用’ react-dom/server’ 的 renderToString对React组件进行渲染的，因此只需要开发一套组件（React 模板），避免了开发多套模板的工作。

3、单页更好做用户体验的优化，这点也很重要。

重新翻阅了React、React-Router服务端渲染的API，

ReactDOMServer – React​reactjs.org