Diy Page Server Rendering solution, diy server Rendering

Diy Page Server Rendering solution, diy server Rendering

1. Problem Origin

In the mobile Internet e-commerce field, operators need to set up multiple promotion pages every day to attract users to click to buy. At the beginning, programmers need to temporarily write a new page for implementation, however, these pages can be used several times, which is time-consuming and labor-consuming to create new pages each time. In addition, the e-commerce operation requirements are quickly iterated and changed in the page code each time, then it is too inconvenient to go online. Therefore, the product puts forward the Diy page-configure web components to build pages, determine in advance what components may be used on the page, and then choose which components the page consists of in the background, then configure the corresponding component data separately, so that the operation can quickly create the pages they need and quickly respond to changes in requirements. Therefore, the Diy page can effectively solve the complex and rapid demand changes of e-commerce operations.

2. Diy page initial solution

Each component is composed of a template file (tpl), a JS file, and a css file. You can obtain page data through Ajax on the page and load the required component content on the page through Require JS, then, the front-end rendering generates the corresponding component html and executes the corresponding JS method. Although this solution meets the operation requirements, the page performance is not very high, and the user waits for a long time to access, therefore, you must increase the page response speed.

Reasons for slow page response in this solution:

Based on the above analysis, the improved solution is best to render web components on the server.

3. Diy Page Server Rendering solution

For front-end engineers, rendering pages on the server is a great challenge when they are not familiar with the server language. Thanks to the rapid technological development, Node can use Javascript to write data to the server, self-help clothes and food.

NodeJs is now very mature, so you don't have to worry about any problems when using node.

The implementation method is as follows:

The overall process is as follows:

 

Advantages of this solution:

1. Greatly reduce http requests related to components, and merge js and css into one request.

2. The data interface layer requested by the server proxy is much faster than the data interface layer accessed by the client;

3. The server renders and generates page html, which facilitates SEO and static pages later, further improving page performance.

 

I wrote a demo on github, interested people can see, the code is still improving, address https://github.com/hskww/Ncomponents/

Source code description:

The Code is based on the node-based thinkjs framework. I personally think thinkjs is really good. We are familiar with the MVC model. thinksjs provides front-end developers with great benefits and accesses thinkjs https://thinkjs.org /.

Steps for using the source code:

1. Install node;

2. install thinkjs, npm install thinkjs @ 2-g -- verbose, if slow, you can use npm install thinkjs @ 2-g -- registry = https://registry.npm.taobao.org -- verbose;

3. Installation depends on npm install;

4. Run the program npm start;

The combo interface in the source code is self-implemented by myself, of course, this combo everyone can also use outside mature combo solution; Template selected Nunjunks, powerful template engine (http://mozilla.github.io/nunjucks ), of course, you can also select ejs. ejs can directly use global functions in the template, while Nunjunks needs to be registered in advance. Interested friends can choose their own services.

Css is developed using sass, and gulp is used to compile and compress js and css files. The combo interface only merges related files and caches js and css files at the node layer, add the Expires header and try to use the browser cache.

For the node-layer cache, You can manually update these js and css caches when launching the production environment so that each user access will retrieve data from the cache.