The new Java project studies online notes -day12 (b)

2 Nuxt.js Introduction Introduction 2.1 Nuxt.js

The rise of mobile Internet to promote the end of the separation vue.js development model of development, before and after the web server only focus on business, only focus on front-end user experience, extensive use of front-end front-end rendering techniques, such as the popular, react framework have achieved powerful front-end rendering.
However, there are pages for SEO needs if you are using front-end rendering technology development is not conducive to SEO, is there a ready to use vue.js, react front-end server technology to achieve rendering technology? In fact, the demand for server-side rendering, vue.js, react so popular front-end framework provides a server-side rendering solutions.
The new Java project studies online notes -day12 (b)
From the map you can see:
REACT framework provides next.js implement server-side rendering. vue.js framework provides Nuxt.js implement server-side rendering.
2.2 Nuxt.js works
following figure shows the request from the client to the server Nuxt.js be rendered whole workflow:
The new Java project studies online notes -day12 (b)

1, the user opens a browser, to enter the URL request Node.js 2, in the deployed application Nuxt.js receiver Node.js browser request, and requests the data acquisition server
3, the server for rendering the data obtained after Nuxt.js 4, Nuxt.js the response to the browser html page
Nuxt.js what the use of technology? Nuxt.js using Vue.js + webpack + Babel three technical framework / assembly, as shown below:
The new Java project studies online notes -day12 (b)

Js Babel is a transcoder, transcoding responsible for ES6 ES5 into the browser identification codes. Webpack is a front-end engineering packaging tool.
Vue.js is an excellent front-end framework. What are the characteristics of Nuxt.js?

Based Vue.js
automatic code tiered
server-side rendering
powerful routing capabilities to support asynchronous data
static files
ES6 / ES7 syntax support
package and compress JS and CSS
HTML head tag management of
local development support thermal load
integrated ESLint support a variety of styles pre processor: SASS, LESS, Stylus etc.

Guess you like

Origin blog.51cto.com/13517854/2401439