Introduction to engineering rendering of eggreact SSR server

Time:2020-6-16

Eggreact SSR engineering solution feature support

  • The node side is developed based on the egg, following the egg development specification and the egg ecology, and supports all features of the egg, such as plug-in mechanism and multi process mechanism.
  • Use typescript or JavaScript to write front-end and node end code, support TS node no compilation and webpack compilation development mode.
  • The front-end is based on the react framework. By default, it supports react server rendering, front-end rendering mode, asset rendering and HTML rendering.
  • It integrates multiple styles of CSS / sass / less / stylus and CSS module to write and build support, which can be selected on demand.
  • Integration of egg, webpack, typescript build tools, built-in multiprocess, webpack DLL and cache compilation speed-up solutions, and provide a powerful cli development tools.

Introduction to engineering rendering of eggreact SSR server

The whole design implementation followsPlug in, assemble, extend and replaceThe idea is designed and implemented to make full use of the surrounding ecology related to egg, react and webpack without any deep encapsulation. The code of egg and react can be written as usual, and can be freely combined and expanded at the same time. It focuses on solving the engineering problems such as the integration complexity of various technical frameworks, development process and experience problems, scalability, stability and performance. Only in this way can we have the whole easy construction system and continuous technological evolution.

What’s the difference between the eggreact engineering solution and the next, Beidou framework?

The engineering solution of eggreact is not only to solve the rendering problem, but also to render a part of the whole engineering process. Based on the development framework and mature ecology of eggenterprise node, you can do a lot of things in the aspect of node. At the same time, you can solve the problems related to the technologies of eggreact and webpackEngineering (framework integration, development process, development experience, scalability, stability and performance, etc)Problem, make full use of the existing technology framework capabilities of egg, webpack, react, typescript, etc., and then carry out reasonable modularization and decoupling design, so that the whole system can be freely combined and expanded (you can use JavaScript, or typescript, you can use react rendering independently, or use react nunjucks / EJS Mixed rendering), and at the same time, it does not have too many encapsulation and restrictions on the specific technologies used, especially when it comes to business development, it needs to write egg and react codes. There is no encapsulation and restriction here, and all codes are transparent, free and flexible. But in this way, it may be a little difficult to understand the novice at the beginning, but as long as you have a little understanding of the relevant technologies of egg, react and webpack, combined with this series of related articles, you can quickly master the design process and detailed details of the whole engineering system. After that, if you need to create your own engineering solution, you can easily realize your own personalized chemical engineering solution. For example, based on the high-level node framework of egg + react res, res encapsulates the whole engineering solution of egg react, shielding many details mentioned above. At the same time, for the novice problem, the whole system provides a variety of skeleton schemes, which can be quickly initialized through the engineering suite.

  • Follow the egg development specification ecology, support all features of egg, and the development mode is the same as that of ordinary egg projects, without any encapsulation restrictions on the use of egg.
  • There are no restrictions and encapsulation in the use of react. Normally, you can write react code as you write react applications. All codes are transparent.
  • In the aspect of the construction of webpack project, the abstract encapsulation is simplified to some extent, but it is compatible with the native configuration of webpack, and can be extended and modified at will
  • It provides multiple rendering methods such as SSR, CSR, asset, nunjucks, etc., which can be freely selected and extended according to business characteristics.
  • In the public package, asynchronous loading, building packaging performance, rendering performance and other aspects of the engineering construction, the project can be applied seamlessly.
  • The whole project system is built based on plug-in mode, which can be freely combined and extended, and it is very easy to build its own personalized solution.

Introduction to relevant knowledge points of rendering on the eggreact server

What is react server side render?

React server-side rendering refers to that the prepared react component is directly compiled into complete HTML on the node server, and then directly output to the browser, so that the user can quickly see the content. The server-side rendered page can see the complete HTML page structure in the browser by right clicking the source code, Including all the content in the id =’app ‘node; but for the current react front-end rendering, you can only see the simple HTML, body, script structure, and the actual content in the id =’app’ node in the browser front-end rendering.

Compared with the front-end rendering, the server-side rendering better supports SEO and faster first screen rendering. Compared with the traditional template engine, the react server-side rendering is better componentized and the front and rear templates are shared. At the same time, MVVM data-driven mode has faster development efficiency. In general, the server-side rendering technology of MVVM framework is more suitable for business applications with certain interactivity and requirements for SEO and first screen speed. Of course, if you want to use it in projects that do not belong to this type (such as various background management systems), it is also a good choice to be pure technology learning.

How to build an egg react SSR webpack, and what’s the difference between it and a normal webpack?

Introduction to engineering rendering of eggreact SSR server

Two jsbundle files need to be built for rendering construction of react server. During the development of SSR mode, the operation of SSR requires webapck to build jsbundles of target: node and target: Web separately. The main difference is that webpack needs to deal with the difference between the require mechanism and the running environment of node and browser. The server’s jsbundle is used to produce HTML, and the client’s jsbundle needs script to document for event binding and other operations, that is, react’s hydrate mechanism.

The eggwebpack local development build file is put in memory. How can SSR read the file for rendering?

When developing SSR mode with egg + react, you will see the following interface after running NPM run dev, and start two webpack building instances: node mode and web mode. See the specific implementation of egg webpack code.

  • Local development starts the webpack construction, and the default configuration file is the project root directorywebpack.config.jsDocuments. SSR needs to configure two webpack configurations, so the build will start two webpack build services at the same time. Web means to build jsbundle for the front-end, and the file directory after constructionpublic, the default port is 9000; node means to build jsbundle for the front end, and the file directory after constructionapp/view, default port 9001
  • The local build is the webpack memory build, and the file does not land on the disk, soapp/viewandpublicWhen you develop locally, you don’t see the files. Only NPM run build can see the content after construction in these two directories.

Introduction to engineering rendering of eggreact SSR server

How does the egg react SSR publishing mode render?

1. Webpack directly builds server files and client resource files to disk through local construction or CI

2. The egg render directly reads the local file and then renders it into HTML

3. According to manfifest.json File injection JSS / CSS resource dependency injection

4. After template rendering, the server outputs HTML content to the browser

Introduction to the support of eggreact skeleton features

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

Online access: http://49.233.172.37 :7001

  • Based on react multi page / single page server rendering, front-end rendering and asyncdata isomorphism implementation
  • Support for automatic degradation to front-end rendering mode in case of server-side rendering failure; support for react loadable asynchronous component rendering
  • The data layer is designed simply to support the filedb, MySQL and Mongo interfaces
  • Support node and front-end code to modify webpack to compile and update at any time
  • Support server-side rendering, pure front-end rendering and nunjucks react mixed rendering
  • Support automatic construction of webpack entry entry file based on JSX file
  • Support CSS, sass, SCSS, less, stylus style writing
  • It supports CSS module and the coexistence of CSS and CSS module
  • Support react router, react Redux server-side rendering (SSR) and front-end rendering (CSR)
  • Support the automatic construction of webpack DLL, combine with multi process compilation, reduce the construction speed by 2 / 3
  • For the async and await features of node 8, the controller is written in class mode

Introduction to engineering rendering of eggreact SSR server

Introduction to engineering rendering of eggreact SSR server

Recommended Today

Redis 6.0 multithreading performance test results and analysis

  Single threaded redis has always been known for its simplicity and efficiency, but it also has Achilles heel: blocking! Before the completion of the most bottleneck network read-write (redis big key, including some other heavyweight operations such as sort / Sunion / zunionstore / sdiff, centralized expired key cleaning, memory overflow maxmemory policy, etc.), […]