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.
- 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.
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?
- 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?
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 directory
webpack.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 construction
public, the default port is 9000; node means to build jsbundle for the front end, and the file directory after construction
app/view, default port 9001
- The local build is the webpack memory build, and the file does not land on the disk, so
publicWhen you develop locally, you don’t see the files. Only NPM run build can see the content after construction in these two directories.
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
Online access: http://126.96.36.199 :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