Egg React 工程解决方案特性支持


egg-react-webpack-mini.png

整个设计实现遵循插件化,可组装,可扩展,可替换思路进行设计实现,充分利用 Egg,React,Webpack 相关周边生态,不进行任何的深度封装,平时怎么写 Egg,React 代码就怎么写,同时又可以自由组合以及扩展;重点解决各种技术框架整合复杂性,开发流程与体验问题,可扩展性,稳定性以及性能等工程化问题。这样才有了整个 easy 的建设体系以及不断的进行技术演进。



Egg React 工程解决方案 与 Next,Beidou 框架有何区别?


Egg React 工程化解决方案不仅仅解决渲染问题,渲染只是整个工程化中的一个环节,基于 Egg 企业级 Node 开发框架和成熟生态,在 Node 方面你可以做很多事情,同时解决 Egg, React, Webpack 相关技术的工程化(框架整合,开发流程,开发体验,扩展性,稳定与性能等)问题,充分利用现有的 Egg,Webpack,React,TypeScript 等技术框架能力,然后进行合理的模块化和解耦设计,使得整个体系能够自由组合和拓展(你可以使用 JavaScript,也可以是 TypeScript,你可以独立使用 React 渲染,也可以使用 React Nunjucks/ejs 混合渲染),同时又不对具体使用的技术进行过多的封装与限制,特别是涉及业务开发要写 Egg 和 React 代码,这里没有任何的封装和限制,所有代码都是透明的,自由灵活。但这样相对来说,刚开始对新手可能上手理解稍微困难一点,但只要对 Egg,React,Webpack 相关技术有一点了解后,结合本系列相关文章,你很快就能完整的掌握整个工程体系的设计流程和详细细节。之后如果你又需要打造自己的工程化方案,你就可以很容易的实现自己的个性化工程化方案,比如基于 Egg + React 上层 Node 框架 Res ,Res 对整个 Egg React 工程方案进行封装,屏蔽了上面说的众多细节。同时针对新手问题,整个体系提供了多种骨架方案,可以通过工程套件快速初始化。




Egg React 服务端渲染相关知识点介绍



什么是 React 服务端渲染(SSR - Server Side Render) ?


React 服务端渲染指的是编写的 React 组件在 Node 服务端直接编译成完整的HTML, 然后直接输出给浏览器,用户就能快速的看到内容. 服务端渲染的页面在浏览器里面你右键源代码可以看到完整的 HTML页面结构, 包括 id='app' 节点里面所有内容; 而目前所说的 React 前端渲染你只能看到简单的 html, body,  script 结构,id='app' 节点里面的实际内容在浏览器前端渲染出来的。


服务端渲染相比前端渲染,更好的支持SEO,更快的首屏渲染,React 服务端渲染相比传统的模板引擎,更好的组件化,前后端模板共用。 同时 MVVM 数据驱动方式有着更快的开发效率。总体来说,MVVM 框架的服务端渲染技术比较适合有一定交互性,且对SEO,首屏速度有要求的业务应用。当然, 如果想用于不属于该类型的项目(比如各种后台管理系统)也是可以的, 就当纯粹的技术学习也是一种不错的选择。



Egg React SSR Webpack 如何构建, 与普通 Webpack 构建有何区别?


image.png


React 服务端渲染构建是需要构建两份 JSBundle 文件。SSR 模式开发时,SSR 运行需要 Webapck 单独构建 target: node 和 target: web 的JSBundle,主要的差异在于 Webpack需要处理 require 机制以及磨平 Node 和浏览器运行环境的差异。服务端的JSBundle用来生产HTML,客户端的JSBundle需要script到文档,用来进行事件绑定等操作,也就是 React 的 hydrate 机制。


Egg Webpack 本地开发构建文件是放到内存中,SSR 如何读取文件进行渲染?

在进行 Egg + React 进行 SSR 模式开发时,运行 npm run dev 后你会看到如下界面, 启动了两个 Webpack 构建实例:Node 模式 和 Web 模式。具体实现见 egg-webpack 代码实现。






Egg React SSR 发布模式如何渲染?


1.Webpack通过本地构建或者ci直接构建好服务端文件和客户端资源文件到磁盘

2.Egg render直接读取本地文件, 然后渲染成 HTML

3.根据 manfifest.json 文件注入 jss/css资源依赖注入

4.模板渲染完成, 服务器输出HTML内容给浏览器



Egg React 骨架特性支持介绍


GitHub: https://github.com/easy-team/egg-react-webpack-boilerplate

线上访问:http://49.233.172.37:7001



image.png



image.png