Detailed explanation of Nuxt.js Vue server-side rendering

Nuxt.js is very simple and easy to use. A simple project just needs to add nuxt as a dependent component. This article mainly introduces you to Nuxt.js Vue server-side rendering and gives you a reference. I hope it can help you.

Vue is favored by many front-end developers because of its simple and easy-to-understand API, efficient data binding and flexible component system. Many domestic companies are using Vue for project development. The Jianshu we are using is built based on Vue.

We know that there are two major pain points in SPA front-end rendering: (1) SEO. It is difficult for search engine crawlers to crawl client-rendered page meta information and other SEO-related information, making the website unsearchable by users in search engines. (2) User experience. The js after packaging of a large webApp will be very large, so there is loading by module, like require.js, asynchronous request. When webpack becomes popular, it becomes code splitting. Even so, depending on the user's device, the initial rendering of the page may still be very slow, and the waiting time for a white screen is too long, which is unacceptable to the increasingly picky user group.

Therefore, for those displaying promotional pages, such as official websites, server-side rendering (SSR) must be performed. Install nuxt.js

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的

// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

Run

npm run dev

The application is now running At http://localhost:3000

Note: Nuxt.js will listen for file changes in the pages directory and automatically restart. There is no need to manually restart the application when adding a new page.

Routing

nuxt generates routing configuration based on the pages directory structure

Asynchronous data asyncData

Note A page component is required to call asyncData (that is, it cannot be called under components, it must be a routed page)

Asynchronous data beforeCreate, created

Note: In the life of any vue component During the cycle, only the two hooks beforeCreate and created will be called on both the browser side and the server side; other hooks will only be called on the browser side.

Using the plug-in mint-ui

First we need to add the plug-in file mint-ui.js in the plugins folder

import Vue from "vue";
import Mint from "mint-ui";

Vue.use(Mint);

Configure the plugins field in nuxt.config.js

/**
  * 配置第三方插件
  */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],

//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件

//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

layout layout

1.nuxt.js implements a new concept, layout layout. We can conveniently switch between multiple layouts of the page through layout layout. Three commonly used layouts have been implemented in this project, namely: 1) two-column layout, with a fixed left column and a dynamic width of the right column; 2. Error page prompt, a layout scheme with a prompt box in the middle of the page; 3. Pure white page layout.

In a specific developed page, if the default layout is used, there is no need to specify the layout of the page. The nuxt framework will automatically associate the page without a specified layout with the default layout. If you need to specify the layout, specify the layout in the layout field. As shown in the figure, the full layout is specified in the login page.

Related recommendations:

Vue.js and ASP.NET Core server-side rendering function

Nuxt Vue.js server-side rendering practice

Detailed explanation of React server-side rendering examples

The above is the detailed content of Detailed explanation of Nuxt.js Vue server-side rendering. For more information, please follow other related articles on the PHP Chinese website!