Learn from things | Yidun mobile terminal isomorphism practice, improve the official website interaction experience in a few steps

Learn from what you know | Yidun mobile terminal isomorphism practice , Several steps to improve the interactive experience of the official website

* background

In order to render the first screen faster , Let users see content faster , Netease Yidun has started the isomorphism construction of the official website of the mobile terminal , That is, a set of code runs at both ends , The client code runs directly on the server , No need to write redundant rendered views .

Before transformation , The technology stack of the official website project is more popular , With egg.js For the back-end framework ,Nunjuck As a template , The front end uses jQuery.

This time Vue As a front-end framework, it has been partially improved , The technical reserve of team members is also basically based on Vue On the technical system , From the following 3 Aspect departure , Reforming technology selection , Comprehensively improve the official website ecosystem of Yidun .

• Unified technology stack ：Nunjuck Templates are powerful , But it is the same as what we are used to Vue The grammar is still a little different . and jQuery It belongs to the product of the old era , The idea of data-driven view has been deeply rooted in the hearts of the people .
• User experience ： The front end after isomorphism can take into account SEO and SPA Interactive experience of .
• Development experience ： It is easier to integrate with modern development and construction tools , Such as webpack、ESLint、SASS etc. .

Technology selection

Scheme 1 ：
Vue SSR Official Guide https://ssr.vuejs.org/zh/

Project address ：https://github.com/vuejs/vue-hackernews-2.0/

Analysis of advantages and disadvantages ：

1. Highest degree of freedom , Do not rely on node The framework and vue Related to any ecology

2. The workload required is the largest , Mainly vue-ssr General logic & Implementation of front-end build configuration

3. Reusable is currently based on eggjs The back-end logic

Option two ：
nuxt.js

Analysis of advantages and disadvantages ：

1. Perfect solution , Provides many out of the box features , It can greatly reduce many configurations and general logic implementation

2. Do not rely on node frame , The main concern is the application of UI Rendering

3. Need to complete egg.js Back end api Logical migration of interfaces

Option three ：
egg.js and nuxt.js combination

With egg.js Mainly ,nuxt.js Downgrade to egg.js A middleware . The feasibility of this scheme benefits from nuxt.js Do not rely on node web frame .

1. Reuse current node End logic , Only migrate views

2. utilize nuxt.js Out of the box features provided , No need for attention vue-ssr General logic implementation and front-end complex construction configuration

3. One of the workload needs to be completed eggjs and nuxt.js The combination of , Provide a eggjs middleware

Scheme 3 can make use of nuxt.js The ability of , And there is no need for the present node Change the terminal logic , It meets our needs very well . The flow chart based on this scheme is as follows ：

Landing process

【egg-nuxt-render Plug in implementation 】

Implementation concerns of plug-in middleware ：

1. Request misses egg When routing, it will return 404, Middleware processing 404 request , modify status by 200, Follow up to nuxt.js Handle . If nuxt Also missed in the route , from nuxt Provide 404 page .
2. Pass on egg ctx, bring nuxt You can get egg The context of .
3. call nuxt.render, That is to complete the submission of the current request to nuxt.js Handle .

【 Project directory 】

thus , We can design our directory structure like this . Only in the eggjs Add... Under the root directory client Catalog , To place nuxt.js Various directories required by （ The meaning of each directory can be referred to nuxt Official documents ）.nuxt.config.js by nuxt Configuration file for , Will be egg-nuxt-render Plug in reading .

【 Page migration 】

Here we are , We can start to migrate our pages , namely Nunjuck The template is refactored to vue Templates . Delete original egg router Page route definition in , And then in client/pages Add the corresponding page in .vue. This step is physical work , It is also the most time-consuming work of this isomorphism . Seeing here, someone may wonder , This scheme requires that all pages be reconstructed at one time , If the project is huge , There is no way to complete the reconstruction at one time or when the reconstruction risk is very high , Is it difficult to implement ？ Considering this reasonable situation , Another compatible scheme is designed , Provide you with a way of thinking .

【 Compatible solutions 】

Because the project scale of our team is controllable , Therefore, all pages are reconstructed at one time .

The flow chart of the scheme is as follows ：

Be careful ： This scheme has not been tested online , For reference only

The core idea of this scheme is to render first Nunjuck Templates , And then through ctx Pass the rendering results to nuxt Of vue The template completes the final rendering . We can mainly pay attention to the following points ：

1. Retain eggjs Definition of page routing , call htmlRender take Nunjuck Convert template to html character string , And save to ctx.HTML_RENDER. At this time, we need to status Set as 404.

2. because status by 404, Will execute egg-nuxt-render middleware , Get into nuxt route . But this time nuxt There is no such route in （ Because the page is not reconstructed ）, So we refer to the same component , namely NjkWraper.vue.

3.NjkWraper.vue Responsible for rendering HTML_RENDER Content .HTML_RENDER Only the body of each page should be included , It does not include the general part of the page （ Such as navigation 、 Bottom, etc ）, This part is made up of vue Realization .

4. Because all routes will hit NjkWraper.vue, Will lead to real 404 Request lost . So we still need to make a step to judge whether the request is true 404 request . If it is , You need to redirect to 404 page . This step can be found in vue router Guard to achieve .

thus , We just need to put the general part of the page first , Such as navigation 、 Bottom, etc , adopt vue restructure , The specific pages can be migrated slowly .

Disadvantages of compatible solutions ：

Jump between pages must refresh the page . Because the final output to the browser page will contain vue Components and Nunjuck Rendered content , among Nunjuck There may be jquery、regular And so on , Repeated introduction may have problems .

After all pages are reconstructed , Compatible code needs to be deleted .

summary

This isomorphism practice is essentially a reconstruction of existing projects , System stability and reconfiguration cost are considered , Therefore, it is not right egg.js Adjust the main frame . When starting a new project , Direct adoption nuxt.js The complete solution provided will be more pure .