Target
By using the method of rendering incentive pages on the server side, the page loading time of white screen is reduced, thereby improving the incentive H5 rendering experience.
architecture design
Research and selection of front-end service framework
Only compare and analyze the following two options:
- Vue3 + Nuxt3 + Webpack
- Next.js + React + Node.js
| ’ | Nuxt3 | Next.js |
|---|---|---|
| introduce | Nuxt is a general-purpose application framework based on Vue. It presets various configurations required for developing server-side rendered applications using Vue. The main focus is on the UI rendering of the application. | Next is a React framework that allows building SSR and static web applications with React |
| Response time | almost the same | almost the same |
| FrameworkGithub Star | 39.8k | 85.3k |
| Npm Downloads | 333,922 | 2,130,573 |
| scaffolding tools | create-nuxt-app | create-next-app |
| Advantage | 1. Its main scope is UI rendering, and abstract client/server distribution at the same time 2. Static rendering, front and rear separation 3. Automatic code layering 4. Services and templates can be configured 5. Clear project structure 6. No components and pages 7. Support ES6/ES7 by default 8. Support development hot update 9. Asynchronous data acquisition at routing level 10. Support static file service 11. Style pre-preparation: Sass, Less, Stylus |
1. By default, every component is server-rendered 2. Automatic code splitting to speed up page loading 3. No unnecessary code loaded 4. Simple client-side routing (page-based) 5. Webpack-based development Environment, support module hot update (HMR) 6. Obtaining data is very simple 7. Support any Node HTTP server implementation, such as Express 8. Support Babel and Webpack customization 9. Can be deployed on any platform that can run node 10. Built-in page search Engine Optimization (SEO) Processing |
| insufficient | 1. Less peripheral resources 2. It may be troublesome to develop complex components 3. Custom configuration is very troublesome 4. Many data operations with side effects this.items[key]=value 5. High traffic may bring problems to the server Pressure 6. DOM can only be queried and manipulated in certain hooks |
1. Next is not a backend service, it should be opened independently from the background operation 2. If you just want to create a simple WEB application, then it may be overkill 3. Data will be loaded repeatedly on the client and server 4. Not implemented Front and rear separated projects, migrating to Next is a pain and may require double work |
| performance | A basic HelloWorld application implemented in . It can handle 190.05 requests per second. The average request time is 52.619ms. On this metric, Nuxt performs worst compared to Next.js framework | The Hello world program implemented based on the Next framework can process 550.87 requests per second, and the average time spent on each request is 18.153ms |
| Difficulty | quick | slow |
It can be seen from the comparison of the above tables that the Next.js framework is a better choice!