preface

This article is not
Vue SSRNo step by step introduction
Vue SSRGetting started, if you want
Vue SSRIntroductory tutorial, recommended reading
Vue“The club’s official website
Vue SSRThe guide, that should be the most detailed
Vue SSRIntroductory tutorial. The significance of this article is to mainly introduce how to
SSRThe most popular ones used in server-side rendering
vue ui 库
element-uiComponent library and
echartsThe plug-ins, as well as the examples presented in this article, overcome especially greatly
HackerNews DemoNeed to climb the wall to run the problem, novice in reading
SSRIn the official documents, if there are doubts, you can directly conduct relevant experimental verification based on the examples in this paper, so as to solve the doubts. The example of this paper
githubThe address is:
Github.com/fengshi123/…(Welcome star)

What is server-side rendering (SSR)?

The official website explains:
Vue.js is a framework for building client applications. By default, the Vue component can be exported to the browser for DOM generation and DOM manipulation. However, it is also possible to render the same component as server-side HTML strings, send them directly to the browser, and finally “activate” these static tags into a fully interactive application on the client side.
That is, SSR roughly means that vUE renders the entire HTML fragment of the label on the client side and completes the work on the server side. The HTML fragment formed by the server side is directly returned to the client side. This process is called server side rendering.

Advantages and disadvantages of server-side rendering

2.1 Advantages of server-side rendering:
(1) Better
SEOBecause:
SPAThe content of the page is passed
AjaxThe search engine crawler does not wait
AjaxAsynchronism completes before fetching the page content, so in
SPAIs not able to capture the page through
AjaxAcquired content; while
SSRThe rendered page is returned directly by the server (the data is already included in the page), so the search engine crawler can grab the rendered page;
(2) Faster content arrival time (faster first screen loading) :
SPAWill wait for all vUE compiled
jsAfter the files are downloaded, the page rendering starts. The file download takes a certain amount of time, so the first screen rendering takes a certain amount of time.
SSRRender the page directly by the server directly back to display, without waiting for download
jsFile and then render and so on, so
SSRFaster content arrival times;
2.2 Disadvantages of server-side rendering:
(1) More development conditions: for example, server-side rendering is only supported
beforCreateand
createdTwo hook functions, which cause some external extension libraries to require special handling to run in a server-side rendering application; And a fully static single-page application that can be deployed on any static file server
SPADifferent, server-side rendering applications need to be in
Node.js serverOperating environment;
(2) More server load: in
Node.jsRender a complete application, which will obviously be better than just providing static files
serverMore extensive occupation
CPUResources (
CPU-intensive - CPUDense), so if you expect a high traffic environment (
high traffic), prepare the appropriate server load, and use caching strategies wisely.

Vue – SSR demo introduction

The examples in this article are based on those given by U
HackerNews DemoRemovals require wall access
https://hacker-news.firebaseio.comThe relevant
apiAnd then the most popular ones were used in the project
vue ui library
element-uiAnd researched
echarts.js The availability of plugin rendering on the server side; The directory structure and renderings of the instance are as follows:





The specific logic of the relevant code for each file is annotated in detail in the code, so it will not be introduced in detail again, and can be in
githubThe above
clone And I’m going to look at it
VueThe official website of the server rendering schematic



As you can see from the picture,
ssrThere are two entry files,
client.js and
server.js, both contain application code,
webpackTwo entry files are packaged separately for the server
server bundleAnd for the client
client bundle. When the server receives a request from the client, it creates a renderer
bundleRendererthe
bundleRenderer Will read the one generated above
server bundle File, and execute its code, and then send a generated good
html Go to the browser and wait until the client loads
client bundleAfter that, it is generated with the server
DOM for
HydrationJudge this
DOMAnd the ones they’re about to generate
DOMWhether the same, if the same will be the client
vueThe instance is mounted to this
DOMOtherwise a warning will be given.

Four, this example of the pit summary

4.1, references,vueFile will report file not found
Question:If the reference
vueFile not added
.vue Suffix, will report file not found, that is: 

import adminContent from './views/adminContent';Copy the code

The following error is reported:

Solution:reference
vueFile add
.vueThe suffix, i.e. : 

import adminContent from './views/adminContent.vue';Copy the code



4.2, introducingelement-uiAn error is reported when the style of
Question:Introduced in the project
element-ui, i.e. : 

import 'element-ui/lib/theme-chalk/index.css';Copy the code

The following error will be reported if the style file is not imported: 

ReferenceError: window is not definedCopy the code

Solution:Parsing configuration for style files is required:
(1) Install style parsing plug-in: 

npm install css-loader --saveCopy the code

(2) in
webpack.base.config.jsTo configure
css-loader: 

{ 
 test: /\.css$/,  
 loader: ["css-loader"]}Copy the code



4.3, introducing element-ui An error is reported when the style of
Question:Introduced in the project
element-ui , i.e. : 

import 'element-ui/lib/theme-chalk/index.css';Copy the code

The following error will be reported if the style file is not imported: 

Module parse failed: Unexpected character The '@' (1:0) You may need an 
appropriate loader to handle this file type.Copy the code

Solution:Parsing configuration for style files is required:
(1) Install style parsing plug-in: 

npm install style-loader --saveCopy the code

(2) in
webpack.base.config.jsTo perform related configurations: 

{  
 test: /\.css$/,  
 loader: ["vue-style-loader"."css-loader"] {},test: /\.(eot|svg|ttf|woff|woff2)(\? \S*)? $/, loader:'file-loader'
},Copy the code



4.4,element-uiThe components of the el-table Server side rendering is not supported
Question:If the page in the server render contains
el-tableComponent in the page returned from the server
el-tableData is empty in the component because
el-tableComponents in the
mountClass in the hook function
tableData that the server does not support when rendering
mountHook function.
Solution:
githubThe above
elment-ui There are branches that fix this problem,
Github.com/ElemeFE/ele…; Compile the source code for the branch, and replace it in
node_modulesreplace
element-ui the
libCompile the package.


4.5,el-tableTable width is not 100% after server rendering
Question:
el-tableAfter server rendering, the table width is not 100% as set in the code, the table width is relatively small.
Solution:Additional style Settings: 

.el-table__header{ 
 width: 100%;
}
.el-table__body{ 
 width: 100%;
}
.el-table-column--selection{
 width: 48px;
}Copy the code

4.6,echartsHow does the plugin support server-side rendering?
Solution:use
node-canvasPlug-in, specific use can view this example written, can also view
node-canvas in
githubIntroduction above:
Github.com/Automattic/…
Existing problems:In this example, we use
node-canvasGenerate the corresponding image, and then reference the image in the page, there is a problem: the generated image has no dynamic effect. (This question was not pursued because: images have no text content,
seo It is not necessary; Images are then generated on the server and rendered on the page after downloading. Is it more resource efficient to render directly on the client?

Five, the summary

SSRThere is a better
SEOAnd the advantages of faster content arrival time, but there are also limitations in development conditions, server resource consumption, novice difficult to get started and other disadvantages, so whether your project needs server rendering, you need to combine your project specific evaluation of relevant indicators, do not follow the trend, for
SSRwhile
SSR.
The examples in this paper are mainly based on those given by You Da da
HackerNews DemoRemovals require wall access
https://hacker-news.firebaseio.comThe relevant
api And then the most popular ones were used in the project
vue ui 库
element-ui And researched
echarts.jsPlugin rendering on the server side is possible to help beginners get started better and faster
ssr, if in reading official
SSRIn the process of the document, there are some questions, you can carry out relevant test verification in the example of this paper, and then help solve the doubts. If feel this article as well
githubThe example of this article helps you, please help to give a star, the example of this article
githubThe address is:
Github.com/fengshi123/…