I am back again ~ this time we will learn Vue server rendering SSR.

SSR articles on the Internet a lot, at the beginning of my cloud in the fog. Then go to Vue. Js server rendering guide and NUxT official website to have a look, found that most of the articles are carrying the content of the official website, really speak very little clear. So I want to write an article to learn SSR, hoping to help you quickly understand Vue SSR.

What is SSR?

SSR, also known as server rendering, is to render the Vue page on the server side to generate HTML files and send the HTML page to the browser. Advantages:

SEO is different from SPA HTML, which has only one HTML with no actual content and one app.js. SSR generated HTML has content, which allows search engines to index the page content.
Faster content arrival Time Traditional SPA applications fetch bundle.js from the server, parse it on the client side and mount it into the DOM. SSR passes the HTML string directly to the browser. Greatly speed up the first screen load time.

As can be seen from the following two figures, the first is the HTML page generated by SSR, and the second is the HTML page generated by traditional SPA.

SSR

SPA

Nuxt.js

I looked at the official SSR introduction and the documentation for nuxt.js. In essence, SSR is node back-end operation behavior, as I just want to write front-end code, do not want to toss too much. Nuxt.js perfectly integrates SSR features. Let us out of the box ~ official also recommend using nuxt. js to build SSR projects.

benefits

I think nuxt.js has several advantages over writing SSR on your own.

No Need to configure Webpack: I was looking for a Webpack configuration at first, but I saw that NUxT wrapped it for us. To modify the Webpack configuration, simply modify the nuxt.config.js file.
No Node knowledge required: As long as you can write vUE frontend, you can write SSR. You don’t need to know how to configure SSR and Node and Express.
Integrated vUE whole family bucket, directly available. No less convenientvue-cliInstall Nuxt — write components — compile and start the service — see what happens. It’s that simple.
Simple configuration and documentation friendly: a close look at the nuxt.js documentation shows that it doesn’t cover much, but it’s full of features that make it a great place to start.

The installation

The installation method is here. It’s simple: generate the template, then NPM installs the dependencies, and finally runs them. Let’s do the simple handling.

$vue init nuxt-community/starter-template <project-name> // Install dependencies $CD <project-name> $NPM Install // Compile and start the service $NPM run dev // open http://localhost:3000Copy the code

Problems encountered in installation: Due to the use of async in nuxt.js… “Await” syntax, and lower versions of Node do not support this syntax, so you must upgrade node to above 7.0.

The directory structure

Nuxt.js spends a lot of time talking about its directory structure, but knowing the directory structure gives you an idea of what nuxt.js is all about. Nuxt.js has configured everything for us, so we just need to create files and write code in the appropriate directory.

Assets Resource files to be compiled, such as JavaScript, SASS, and LESS.
Static Static resource files, such as image resources, that do not need to be compiled.
Components as the name suggests, store*.vueComponent place. General vUE component writing.
The layouts directory in which to set the layout<nuxt/>Tags are the content of the page that we write. Can be used to add navigation bar, bottom bar and other cross sections.
The Middleware directory, middleware, is the function method that executes on pages and page hops. For example, verify user information during page hopping.
Pages Page directory. Here’s the thing ~ this is where we store the presentation page. The files in this directory are converted to the corresponding routing path for the browser to access. In addition, in this directory*.vueThe nuxt.js page file provides some special methods for handling events in server rendering. Details about routing and special methods are listed below.
- Pages routing
- For a brief introduction to page components, see THE API for specific configuration items.
Plugins, third party plugins such as mint-UI, can be found here.
Store Vuex state manager directory. If this directory is empty, nuxt.js will not enable vuex. The Vuex state manager can be used when the index.js file is created in this folder. Usage here!
Nuxt.config. js this file is the only configuration item for nuxt.js. As mentioned above, nuxt.js encapsulates Webpack and other configurations, so if special configurations are required, you only need to modify this file to override the default configuration. For details about configuration parameters, see API.
Package. json does not explain…

The Demo presentation

Good news, VueStudyDemos is updated again! Welcome Star~ this article Demo has been added to VueStudyDemos. Now let’s simply implement the functions mentioned in each folder.

Resource to load

I added the font awesome library in assets and a Vue logo in Static. The resource is then called.

<i class="fa fa-address-book" aria-hidden="true"></i>
<img src="~/static/logo.png" />
Copy the code

You need to change the FONT-awesome CSS to global CSS to avoid importing CSS from the font library on every page you use. So we added the following configuration to nuxt.config.js.

module.exports = {
  ...
  css: [
    '~/assets/font-awesome/css/font-awesome.min.css'
  ],
  ...
}

Copy the code

Component definition

Components are stored in the Components folder, which we talked about when we talked about directories. Components are used in the same way as common VUE components. Define the component Avatar and use it in the Page Page.

<template>
  <avatar/>
</template>
<script>
import avatar from '~/components/Avatar'
export default {
    ...
    components: {
        avatar
    }
};
</script>
Copy the code

layout

In the layouts directory, default is the default layout. We can modify the default layout or create a new layout to use. The tag in the layout file is the area we want the server to render. So let’s create a layout for fun.

// layouts/page.vue <template> <div> <mt-header fixed title=" title 2"></ Mt-header >< nuxt/> </div> </template>Copy the code

Then we use layout and configure the Layout option on the Pages page (default if not).

export default { ... Layout: 'page' // Default is 'default'};Copy the code

The middleware

Middleware is the behavior performed between two page jumps. Let’s say I define a middleware add.js

export default function ({ store }) {
    store.commit('increment')
}
Copy the code

Then configure it in nuxt.config.js:

module.exports = {
  ...
  router: {
    middleware: 'add'
  },
  ...
}

Copy the code

This will result in a middleware method being executed every time the page jumps. Of course, it is also possible to define the middleware of a particular page

page

Nuxt.js configures the directory structure as a vue-router routing system, so we can query the page directly through the file name (not to mention the specific route). Such as pages/app. Vue file can be accessed through http://localhost:3000/app. Note: Page components are written in the same way as common Vue components, but nuxt.js also provides special configuration items to configure the behavior of the server during rendering. Please refer to the page documentation for details.

routing

Routing is what makes the Pages directory directly accessible. Nuxt.js cleverly uses directory structures and file names to cover the various uses of vue-router. For example, dynamic routing and nested routing. For details, please refer to the documentation. You can also look in the Pages directory of demo.

The plug-in

For front-end projects, the use of plug-ins is, of course, essential. The website is very clear about this. Let me post the demo usage. I’m using the Mint-UI library here.

// plugins/mint-ui.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)
Copy the code

// nuxt.config.js
module.exports = {
  build: {
    vendor: ['mint-ui']
  },
  plugins: [
    '~plugins/mint-ui'
  ]
}
Copy the code

So you can use a third-party Cumint-UI!

<template> <div> <mt-navbar V-model ="selected"> <mt-tab-item id="1"> Option one </mt-tab-item> <mt-tab-item Id = "2" > options < / 2 mt - TAB - item > < mt - TAB - item id = "3" > option three < / mt - TAB - item > < / mt - navbar > <! -- tab-container --> <mt-tab-container v-model="selected"> <mt-tab-container-item id="1"> <mt-cell v-for="n in 10" : key = "n" title = "' content '+ n" / > < / mt - TAB - the container - item > < mt - TAB - the container - item id = "2" > < mt - cell v - for = "n in 4:" key = "n" :title="' test '+ n" /> </mt-tab-container-item> < Mt-tab-container-item id="3"> < Mt-cell v-for="n in 6" :key="n" : title = "' options' + n" / > < / mt - TAB - the container - item > < / mt - TAB - container > < / div > < / template >Copy the code

vuex

For VUex, there are two usages: normal and modular, which are the same as for vuex. My demo is a direct copy of the official website code. Note that the vuex data is stored in the Context object, and we can get state data from the context object.

release

There are two ways to publish: server application rendering deployment and static deployment, see here

The last

If you look at the NUxt.js API, nuxt.js is really highly packaged. For the template project generated by nuxt.js, there are only some necessary configurations that need to be done. Nuxt.js is a very friendly and powerful SSR framework.

Vue.js learning series

In view of the serious fragmentation of front-end knowledge, I hope to systematically organize a series of Vue learning blogs.

Vue.js Learning series 1 — Vue-Router2 Learning Practice Notes (with DEMO) Vue.js learning series 2 — Vuex learning practice notes (with DEMO) Vue.js learning series 3 — Axios and network transport related knowledge learning practice Vue. Js Learning Series 4 — Using the Webpack tool Vue. Js Learning series 5 — Talking about ESLint from VUe-CLI Learning series 6 — Vue unit test Karma+Mocha learning Notes Vue. Js Learning Series 7 — Nuxt learning for Vue server rendering

Vue.js learning series project address

This article source has been income to GitHub, for reference, of course, can leave a star better -. Github.com/violetjack/…

About the author

VioletJack, efficient learning front-end engineer, likes to study methods to improve efficiency, and also focuses on learning and sorting out Vue front-end related knowledge. Welcome to follow, like, comment ~ I will continue to produce Vue related quality content.

Sina Weibo: weibo.com/u/264090960… The Denver nuggets: juejin. Cn/user / 442409… CSDN: blog.csdn.net/violetjack0… Jane: www.jianshu.com/users/54ae4… Making: github.com/violetjack

Vue. Js Learning Series 7 — Nuxt learning for Vue server rendering