vue ssr server rendering (vue+nuxt)-quarterly sharing

Posted Jun 28, 20204 min read

image.png
Today I will share with you the Vue server rendering, which will take about 40 minutes of everyone's time. The purpose of sharing today is to let everyone understand three points:
image.png

  1. In-depth understanding of the concept of server-side rendering(SSR)

  2. Master the use of nuxt.js, a Vue general framework for server-side rendering

  3. Understand the principle of Vue SSR
    image.png
    Before deeply understanding server-side rendering, we must first know what is server-side rendering? We can talk about early web development. At that time, the front end and the back end were not separated. Is the front end only responsible for initiating requests, the back end querying database data, and the data is plugged into templates such as jsp, php, etc. Is the business logic and data processing all in The back end, and then the back end returns an html page to the front end, the front end is only responsible for display, so it can be understood as generated html page on the server side, is it the server side rendering; then what is the customer End rendering, can it be understood that the html page generated on the client is the client rendering**?

What are multi-page applications and single-page applications? Early web development is a kind of multi-page application, each request is loaded and refreshed on the whole page, application consists of multiple complete pages.

What is a single page application? Does our PC-end management backend be a type of single-page application, popularly refers to applications with only one main page, let s go to the single-page application and right-click to view the page source Is the code'only one shell**? <body><div id='app'></div></body> The single-page application browser starts by loading all necessary html, js, css, and then dynamically loaded by the routing program during interaction , Single page page jump, only refresh local resources.

That said so much, we know what problem the server-side rendering ssr solves? what is the benefit?
image.png
1, better SEO

Why is there a better seo? In fact, I just answered this question. The server-side rendering returns the complete web content. Is it true that the search engine crawler can crawl the content inside your web page, and the single-page application has only one shell , The crawler will not crawl the content loaded asynchronously by js

2. Faster arrival time of first screen content

Why is there a faster first-screen content arrival time for server-side rendering? Is this speed compared to a single page? We have just answered, Single page application requires the browser to load all the necessary html, js, css at the beginning, so the first screen is better than the server Slow rendering.
image.png
Now that we have understood the advantages and disadvantages of server-side rendering and single-page applications, if we want to develop a website, such as the development of the official website of the next quarter , focus on seo optimization, hoping that the web content can be crawled by search engines, Is it necessary to consider the way of server-side rendering, then we may return to the early development method, the back-end students may not agree, then our vue server-side rendering is a compromise solution , first screen Realize server-side rendering**, which is conducive to seo optimization and has the advantages of single-page application;

So how do we create a new ssr project based on vue+nuxt, similar to the vue-cli scaffolding tool, we execute $npx create-nuxt-app and quickly create a project with the following directory structure:

(The difference between npx and npm, a brief explanation)

Explain the project directory structure to ppt; ...
image.png
Only beforeCreate and created are called during server-side rendering(SSR). This means that any code in other vue lifecycle hook functions will only be executed on the client.
image.png
image.png
Combine the actual demo to explain the following key points:
image.png
lIt is only the first screen server-side rendering, and has the advantages of SPA applications

l How to implement basic routing, dynamic routing, and nested routing https://zh.nuxtjs.org/guide/routing

l Nuxt integrates vuex itself, so there is no need to install it, you can use it by creating new index.js in the /store directory

l Asynchronous data acquisition fetch, asyncData use range

Can only be used in page components, that is, components in the pages directory, not components in the components directory, to be differentiated

The asyncData function will be executed before beforeCreate, and the returned data will eventually be merged with the data

l Where are the public components such as Header and Footer?

The vue-cli entry file is app.vue, which is ./layout/default.vue in nuxt development

l All plug-ins are written in the /plugins directory, here is element-ui.js as an example

l Nuxt.config.js configuration

l Configuration error page

You can customize the error page by editing the layouts/error.vue file