Nuxt.js server-side rendering technology

This is the 8th day of my participation in the August More Text Challenge

Nuxt.js server side rendering

First, server-side rendering technology

1.1 Search engine optimization

1.1.1 What is SEO

Search engine optimization, or SEO, is a way of using the rules of search engines to improve your site’s natural ranking within the relevant search engines. The goal is to give it a leading position in the industry, so it can improve its ranking and get more traffic.

1.1.2 Search engine workflow

Common SEO methods such as:

To standardize url links, use restful style URL, use static resource URL
Note the Settings of keywords, description, and title
H1-h6, the use of A tags and so on
.

[Note] : Spiders do not support javascript well. JSON data obtained by Ajax cannot be crawled by spiders

What techniques help SEO? Answering this question requires an understanding of server-side and client-side rendering.

1.2 Server Rendering and Client Rendering

Server rendering, also known as SSR, completes the rendering of page content on the server rather than the client.

SSR is not a front-end unique technology, we have learned JSP technology and Thymeleaf technology is a typical SSR

1.2.1 What is Server-side rendering

Server Side rendering, also known as SSR (Server Side Render), completes the rendering of page content on the Server rather than the client.

SSR is not a front-end unique technology, we have learned JSP technology and Thymeleaf technology is a typical SSR

Server-side rendering features:

Generate THE DOM element of an HTML page on the server
The client (browser) is only responsible for displaying the DOM element content

1.2.2 What is Client Rendering

The client (browser) uses AJAX to make an HTTP request to the server, gets the data it wants, starts rendering the HTML page, generates DOM elements, and finally presents the content to the user.

Client rendering features:

On the server side, only the data is given to the client in response, not the HTML page
The client (browser) is responsible for retrieving the server-side data to generate DOM elements

1.2.3 What are the advantages and disadvantages of the two methods?

Client rendering:

Disadvantages: Not conducive to SEO, because the site uses a lot of javascript technology, is not conducive to search engines crawling web pages.
Advantages: The client is responsible for rendering, and the user experience is good. The server only provides data and does not care about the content of the user interface, which is conducive to improving the development efficiency of the server.

3) Application scenario: SEO does not require the system, such as background management system, such as e-commerce background management, user management and so on.

Server render:

Advantages: It is good for SEO. The site leads the search engine directly to the server through the href URL, and the server provides high-quality web content to the search engine.
Disadvantages: The server completes part of the work of the client, and usually needs to modify the code of the client and the server to complete a requirement. The development efficiency is low, which is not conducive to the stability of the system.

3) Application scenario: SEO requirements of the system, such as: portal home page, product details page, etc..

1.3 Nuxt. Js

1.3.1 Introduction to nuxt.js

The rise of mobile Internet has promoted the development of the separated development mode of the front and back ends of The Web, where the service end only focuses on business and the front end only focuses on user experience. For example, the popular vue.js has realized powerful front-end rendering. However, for SEO needs of the web page if the use of front-end rendering technology to develop is not conducive to SEO, is there a way to use vue.js front-end technology to achieve server-side rendering technology?

Nuxt.js is a lightweight application framework based on Vue. It can be used to create server-side rendering (SSR) applications, and can also act as a static site engine to generate static site applications, with elegant code structure layering and hot loading features.

Official website: zh.nuxtjs.org/

1.3.2 Nuxt.js server-side rendering

The following diagram shows the overall workflow for server-side rendering from client requests to nuxt.js:

1) The user opens the browser and enters the URL to request the front-end View component in Node.js

2) The application nuxt.js deployed on Node.js receives browser requests and asks the server for data

3) Nuxt.js gets the data and renders it on the server side

4) Nuxt.js responds to the HTML page to the browser

1.4 Project Use

Nuxt.js extends vue.js with an asyncData method that is called before each component (page component only) is loaded. It can be invoked before a server or route is updated. You can retrieve data using asyncData methods. Nuxt.js will return the data returned by asyncData to the current component.

[Note] : The asyncData method is called before the component is initialized, so there is no way to reference the component instance object through this.

async asyncData(page) {
  const vid = page.route.params.vid
  const response = await courseApi.getPlayAuth(vid)
  console.log(vid)
  return {
    vid: vid,
    playAuth: response.data.playAuth
  }
},
Copy the code

Call data:

Created () {// isBuy is the default value false if you are not logged in. Get ('lei_token') if (token) {orderApi.isbuy (this.course.id).then(response => { IsBuy = response.data.isbuy console.log(this.isbuy)}) // Check whether collectApi.iscollect (this.course.id).then(response)  => { this.isCollect = response.data.isCollect }) } },Copy the code

Nuxt.js server-side rendering technology