Detailed explanation of Vue Based on nuxt ssr and VueNUXTSSR

Detailed explanation of Vue Based on nuxt ssr and VueNUXTSSR

This article introduces the NUXT-based SSR of Vue, shares it with you, and gives you some notes.

SSR

First, let's talk about SSR, a popular term recently, that is, Server Side Rendering (Server Side Rendering). It aims to solve the SEO problem of single page applications and has little impact on general websites, but for forums, content-based websites are fatal, and search engines cannot capture page-related content, that is, users cannot find information about this website.

The premise of page capturing is that html contains the content to be crawled. Let's take a look at what is returned when a vue-based online SPA page request is sent.

<! DOCTYPE html> 
All our components are rendered after the html file is returned.<div id=app></div>. This reasonably explains the cause of SEO defects.
Since SSR can solve the SEO problem, it is not difficult to think of the principle that our html is rendered on the server, and the complete html file is synthesized and then output to the browser.
In addition, SSR is applicable to the following scenarios:

 
 
 
  
The client network is slow.
 
 
  
The client runs on the old or directly without the JavaScript engine.

 
Official vue website provides an image of SSR principles

I have a detailed explanation of the principles of this image on the official website, and there are many such articles. I will not repeat them here.
NUXT
Let's get started with NUXT.
Nuxt. js is a minimalistic framework for server-rendered Vue applications (supported Red by Next. js)
The function is to further encapsulate node. js, and then save the steps for setting up the server environment. You only need to follow the rules of this library to easily implement SSR.
Installation Process
The Nuxt. js team provides the vue-cli initialization template. If you have installed vue-cli before, skip this step.
npm install -g vue-cli
Then, run the following command in the directory to be created:
vue init nuxt/starter <project-name>cd <project-name>npm install
After dependency installation is complete
npm run dev
Open the browser http: // localhost: 3000
Note: Nuxt. js will listenpagesDirectory changes. You do not need to restart the service when adding a new page.
Directory structure
After the preceding command is completed, your directory structure will be as follows:

Nuxt. js provides the simplest directory structure.
|-- pages  |-- index.vue|-- package.json
That is to say, at least one page is required as the display page.
We recommend that you use absolute paths for file paths, as shown in the following table.

For example, how/pages/user/me.vueIntroducestaticImages in the folder

Routing
Nuxt. js generates vue-router configuration based on the pages directory structure. That is to say, the structure of the pages directory directly affects the routing structure.
Example 1:
|-- pages  |-- posts    |-- index.vue    |-- welcome.vue  |-- about.vue  |-- index.vue
Will generate
routes: [ {  path: '/posts',  component: '~pages/posts/index.vue' }, {  path: '/posts/welcome',  component: '~pages/posts/welcome.vue' }, {  path: '/about',  component: '~pages/about.vue' }, {  path: '/',  component: '~pages/index.vue' }]
Example 2: hide a route
Add_
|-- pages  |-- _about.vue  |-- index.vue
Will generate
routes: [ {  path: '/',  component: '~pages/index.vue' }]
Configuration File
Directorynuxt.config.jsIt is our only configuration entry. We do not recommend that you modify it here..nuxtDirectory unless otherwise required
By default, we have three configuration items: head-css-loading-header settings, global css, and loading progress bars.
The configuration of nuxt. config. js is as follows. Click to view the example.

 
 
 
  
Cache
 
 
  
Loading
 
 
  
Router
 
 
  
Css
 
 
  
Plugins
 
 
  
Head

 
In addition, vuex and other configurations are provided. If you are interested, go to github and the official website.
What can NUXT do for us?
For more information about how to use it (there are all on the official website. Here is an overview). Let's explain why we chose NUXT for SSR.
Problem 1: We don't need to worry about route division. You just need to create a. vue file at the corresponding folder level.
Question 2: there is no need to consider data transmission issues. nuxt will asynchronously request data before the template outputs (the axios library needs to be introduced) and further encapsulate vuex.
Problem 3: webpack is built in, eliminating the need to configure webpack. nuxt will package the corresponding file according to the configuration
There are many other conveniences. You can try to write and read the source code.
Summary

 
 
 
  
This article mainly introduces the convenience of nuxt, which is not recommended for use currently, for several reasons:
 
 
  
There are still many blank documents that are incomplete. It is not to say that we cannot get any information. You can refer to the examples of the document, which lists the comprehensive information.

 
The current version is 0.8.0, and README introduces 1.0 coming soon. New features may be added and the documentation will be improved. It is not too late to deploy it after the version is stable.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.