Detailed Due to the NUXT of the Services Pre-rendering

The front-end development is generally the development framework of the front and rear ends, MVVM and MVC, such as Angular, React, and Vue, although the write frame can make us quickly completed, but due to the front and back, give the project SEO Very inconvenience, search engine climbs data in the webpage when retrieving, because the page read from the single page is almost blank, and cannot climb any data information.

   Authorization_Web         
As above code, the single page application views the source code as shown above, so the search engine can not climb to any information, the search engine will consider the current The page is an empty point. In order to solve the SEO problem, the SSR server pre-rendering is launched to improve SEO optimization.
What is SSR
Before recognizing the SSR, the CSR is compared between the CSR and SSR.

First look at the traditional web development, the traditional web development is, the client sends a request to the server, the server query the database, splicing the HTML string (template), after a series of data processing, HTML is organized to return to the client, and the browser is equivalent to open a page. This kind of JSP, PHP, ASPX we often have heard, is the development of traditional MVC.

SPA application, to Vue, React, single-page application excellent user experience, gradually become mainstream, page integral JavaScript rendering, called client rendering CSR. SPA rendering process. Access the URL by the client to the server, return to the HTML structure (but the HTML structure returned by the SPA is very small, only one basic structure, as shown in the first code). After the client receives the return resultWhen the client starts rendering HTML, execute the corresponding JavaScript, finally rendering the template, the rendering is completed, and then send a data request to the server again, pay attention to the data request, the server returns JSON format data. The client receives the data and then completes the final rendering.

Although Spa is reduced to the server, it is also a shortcomings:

The first screen rendering time is longer: Waiting for JavaScript to load, and the execution can be rendered Screen.

SEO is not friendly: the reptile can only get a div element, think the page is empty, not conducive to SEO.

In order to solve the above two problems, there has been SSR solution, rendering the rear end of the return DOM structure fold, bring the front end to get the contents of the fold, the subsequent operation of the page, and then single Page routing and rendering, called server rendering (SSR).

The SSR rendering process is such that the client sends a URL request to the server. The server reads the corresponding URL template information. After the server is rendered, the rendering is rendered, and the rendering is returned to the HTML structure. The HTML structure of the first screen page after the client gets. So the speed will be very fast when browsing the first screen, because the client does not need to send AJAX request again. Not to do SSR Our page is not a SPA application, it is still a separate SPA application.

The SSR is a folded program in the CSR and SPA applications. When rendering the first screen, it makes rendering at the server, pay attention to the first screen, other pages still need to render on the client After the server receives the request and renders the first screen page, the remaining routing information will be reserved to the client to render other routes.

    nuXt.js introduction
  1. There is a sentence in the official website of the NUXT: nuXt.js presets to make you develop Vue.js application required All configurations. NUXT is a universal application framework based on Vue.js. Through the client / server base frameworkAbstract organizations, NUXT focuses on the application of the UI rendering.
The above introduction can be easily drawn:

NUXT is not only for server-side rendering or the development of SPA applications

Using nuXT Provided project structure, asynchronous data loading, middleware support, layout and other characteristics can greatly improve development efficiency

nuXT can be used for website static, you can use the command to pack the entire web into a static page, make SEO more friendly

Based on Vue

Automatic code hierarch
  1. server rendering
  2. Strong routing function, support asynchronous data
  3. Static file service
Syntax support for ECMAScript6 and ECMAScript7

Package and compress JavaScript and CSS

HTML Head Label Management
  1. Integrated ESLINT
  2. supports various style pre-encoders Sass, Less, etc.
  3. Support HTTP / 2 push
  4. nuXT rendering process
  5. A complete server request to rendering process
  6. As can be seen from the above flow chart, when a client requests entering, the server performs the action of the NUXTSERVERINIT in the Store, and the client request is received here. You can store some client information to the Store, that is, some login information of some clients stored on the server can be stored in the Store. Then the middleware mechanism is used,The part is actually a function that will execute before each route, you can do a lot here, or you can understand that the role of the interceptor of the router. Then Validate executes the parameters carried by the client, check the official rendering cycle with the FETCH, and the asyncdata acquires data to the server, merge the requested data into the DATA in Vue,
  7. NUXT installation:
  8. Make sure NPX is installed (NPX is installed by default in NPM version 5.2.0):


Installation Wizard:

详解服务端预渲染之Nuxt(介绍篇)

Project Name // Project Name Project Description // Item Description Use a Custom Server Framework // Select Server Framework Choose Features To Install // Select Installation Features Use a Custom UI Framework // Select UI Frame Use a Custom Test Framework / / Test Framework Choose Rendering Mode // Rendering Mode Universal // Rendering All Connection Page Single Page App // Rendering Current Page


These are more important other configurations The content is not introduced, and you can go back all the way.

Assets / / store material (WebPack pre-processing operation required) Components // components Layouts // layout file static // static file (no WebPack prerequisition operation) middleWare // Middleware Pages // All Page Plugins // Plug-in Server // Server Code Store // Vuex
    

Const PKG = Require (‘./ package’) module.exports = {Mode: ‘universal’, / / Current rendering mode Head: {// page Head configuration information Title: pkg.name, // title meta: [// meat {charset: ‘UTF-8’}, {name: ‘viewport’, Content: ‘Width = Device-width, initial-scale = 1 ‘}, {hid:’ description ‘, name:’ description ‘, content: pkg.description}], link: [// Favicon, if the reference CSS will not packet processing { Rel: ‘icon’, Type: ‘Image / X-icon’, Href: ‘/favicon.ico’}]}, loading: {color: ‘#fff’}, // Page progress bar CSS: [// Global CSS (WEBPACK package processing) ‘element-ui / lib / theme-chalk / index.css’], Plugins : [// Plugin ‘@ / plugins / element-ui’], modules: [// module ‘@ nuXTJS / AXIOS’,], AXIOS: {}, build: {// Packing Transple: [/ ^ Element-UI /], extend (config, ctx) {// WebPack Custom Configuration}}}
   

{“Scripts”: {// Develop environment “dev”: “Cross-env node_env = development nodemon server / index.js –watch server”, // package “build”: “nuXT build”, // Run “Start” on the server: “cross-env node_env = production node server / index.js”, // Generate a static page “generate”: “nuXT generate”}}

   Simple to Nuxt, will continue to update the follow-up of nuXT, I hope to help everyone, if there is What is the problem, you can leave a message below. 
The above is all in this articleRong, I hope to help everyone, and I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment